Update text dynamic via tooltip in Highcharts Piechart

Question

I am trying to dynamic update the text in the centre of my piechart when my tooltip mouses over the series.

By using the formatter inside the tooltip field of the chart I am able to call a separate function but it seems like the text is not updating.

Here is my fiddle Pie Chart

$(function () {

var chartTitle = "Text in the Pie";
var colors = Highcharts.getOptions().colors;
var chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'container1',
        type: 'pie'
    },
    title: {
        text: 'Pie Pie Pie',
        y: 20,
        verticalAlign: 'top'
    },
    tooltip: {
        //pointFormat: '{series.name}: <b>{point.percentage}%</b>'
        formatter: function () {
            chartTitle = this.series.name + '/n' + this.point.percentage.toFixed(2) + '%';
            refreshText(this);
            return '<b>' + this.series.name + '</b>: ' + this.point.percentage;
        }
    },
    plotOptions: {
        pie: {
            borderColor: 'white',
            innerSize: '60%',
            dataLabels: {
                enabled: false
            }
        }
    },
    series: [{
        data: [{
            y: 59,
            color: '#005C7F',
            name: 'Chrome'
        }, {
            y: 41,
            color: '#4CCDFF'
        }, {
            y: 61,
            color: '#00B8FF'
        }, {
            y: 52,
            color: '#26677F'
        }],

        size: '80%',
        innerSize: '60%'
    }]
},
function (chart1) { // on complete
    var xpos = '50%';
    var ypos = '50%';
    var circleradius = 130;

    // Render the circle
    chart1.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#0093CC'
    }).add();

    // Render the text 
    //chart1.renderer.text(chart1.series[0].data[0].percentage.toFixed(2) + '%', 270, 200).css({
    chart1.renderer.text(chartTitle + '%', 230, 200).css({
        width: circleradius * 2,
        color: '#FFFFFF',
        fontSize: '16px',
        textAlign: 'center'
    }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
    }).add();
}


);


function refreshText(chart1) {

    alert("inside refreshText() function");
    var xpos = '50%';
    var ypos = '50%';
    var circleradius = 130;

    // Render the circle
    chart1.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#0093CC'
    }).add();


    chart1.renderer.text(chartTitle + '%', 270, 200).css({
        width: circleradius * 2,
        color: '#FFFFFF',
        fontSize: '16px',
        textAlign: 'center'
    }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
    }).add();


}

});

Probably related to the console error viewable on your fiddle in Firebug: Uncaught TypeError: Cannot read property 'circle' of undefined — Fo., Jul 03 '14 at 02:27
@Fo my bad I was only using fiddle to check the validity of my code, that means the chart variable can't be used after I initialized it with an outside function? So is it possible to use a function to update the text inside the circle? — jonleech, Jul 03 '14 at 02:38
I found a question that does exactly what I want, sorry about this. http://stackoverflow.com/questions/15670427/highcharts-donut-chart-text-in-center-change-on-hover?rq=1 — jonleech, Jul 03 '14 at 02:45

score 0 · Answer 1 · answered Jul 03 '14 at 08:38

FYI, you were calling refreshChart(this) in your tooltip. You just needed to call refreshChart(chart1) to get the refresh to work, although you weren't clearing out the renderer.

tooltip: {
        //pointFormat: '{series.name}: <b>{point.percentage}%</b>'
        formatter: function () {     

            chartTitle = this.series.name + '/n' + this.point.percentage.toFixed(2) + '%';

            refreshText(chart1);
            return '<b>' + this.series.name + '</b>: ' + this.point.percentage;
        }
    },

http://jsfiddle.net/2qV9K/

Update text dynamic via tooltip in Highcharts Piechart

1 Answers1