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 weled too.

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 weled too.

• javascript
• jquery
• highcharts

• Hi, I want the same kind of functionality, after clicking on one button on chart I want the same graph to be opened in popup. By looking at your code you seem to be doing the same thing. Can you please tell me what you are doing in this function popUpChart($(this)); to show it in pop up. – Apparatus Commented Nov 18, 2014 at 5:08
• $this in popUpChart refers to instance of highcharts. I use this to get chart options again, then I open a popup like fancybox. And in that popup, I draw the chart again. – Jashwant Commented Nov 18, 2014 at 6:25
• If you don't mind, can you show your entire code because I am facing some issues in doing that so? – Apparatus Commented Nov 18, 2014 at 7:05
• You can ask a question, adding your code , showing your effort and which issue, you are facing. I'll be happy to help. It was an old question, I don't think I have the whole code. – Jashwant Commented Nov 18, 2014 at 8:14

1 Answer 1

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