Highcharts Dynamically Changing Labels?

4
votes

There is a label at this graphic: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/ label is "Total fruit consumption"

After chart created, how can I change that sentence dynamically?

PS: I tries to set labels and redraw graphic but didn't work: http://jsfiddle.net/UXDqL/

Any ideas?

3
javascriptjqueryhighcharts

3 Answers

9
votes

Insted of using labels, you can use renderer text () and then use variable to keep object. If you need update dynamically this text, only what you need is use attr() function and update.

http://jsfiddle.net/6GKCJ/2/

var title = chart.renderer.text('Total fruits consumption', 100, 90)
        .css({
            fontSize: '12px'
        })
        .add();

        $('#btn').click(function(){

            title.attr({
                text:'newText'
            });
        });
2
votes

If you want to change it after the plot is drawn, just act on the element itself. Using jquery selectors it's as easy as:

// find me the tspan containing the specified text and change it to...
$("tspan:contains('Total fruit consumption')").text("Something New")
1
votes

Highchart does not provide any method to dynamically update label header as of Highcharts 3.0. Although it does provide a method to update series dynamically: http://api.highcharts.com/highstock#Series.update()

To update the label header, we need to follow a brute force approach here i.e. to render the chart again after updating chart options. The following code should do the trick :

var mychart = $('#container').highcharts();
    mychart.options.labels.items[0].html= "Changed label header";
    mychart = new Highcharts.Chart(mychart.options);
    mychart.render();

JsFiddle: http://jsfiddle.net/msjaiswal/ZD4N5/2/

A similar thread : here