Highcharts: Add a custom image button

highcharts, javascript, jquery

Solution

Finally, I figured it out like this. May be it will help others.

function callback($this){
    var img = $this.renderer.image('images/zoom_icon.png',$this.chartWidth-40,5,40,12); 
    img.add(); 
    img.css({'cursor':'pointer'});
    img.attr({'title':'Pop out chart'});
    img.on('click',function(){
              // prcessing after image is clicked
    });

 }

new Highcharts.Chart(charts.params,callback);

// where charts.params is object which contains options for chart

Problem

I want to add and image button on highcharts. So far, I have successfully created a image button and have attached a click event on it. But problem is that, the image (sun.png) is on left side of chart and image button is right aligned ( the default position of toolbar). Any fix for this ? ``` exporting: { buttons: { popUpBtn: { symbol: 'url(images/sun.png)', _titleKey: 'popUpBtnTitle', x: -10, symbolFill: '#B5C9DF', hoverSymbolFill: '#779ABF', onclick: function () { alert('ad'); popUpChart($(this)); } }, exportButton: { enabled: false }, printButton: { enabled: false } } } ``` Also, if there are other methods to add an image in chart which have click event, those methods are welcomed too.

Original source

Related problems