Question

114

Highcharts: Add a custom image button

rated 0 times [ 121] [ 7] / answers: 1 / hits: 16233 / 13 Years ago, thu, february 9, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trinity

Add To Favorites

Follow

Total Points: 591

Total Questions: 102

Total Answers: 106

Location: Singapore

Member since Sun, Jul 25, 2021

3 Years ago

answered 13 Years ago kenyamelinad · Accepted Answer

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