CODEWITHSUNDEEP
textchartshighcharts
luftikus143
luftikus143

Reputation: 1285

How to add text via chart.renderer.text in Highcharts?

I have succeeded adding additional text to my charts, like here. This, I achieved through adding a "function(chart)" to my "var chart = new Highcharts.Chart"

$.get('xxx.csv', function(data)
{
    var chart = new Highcharts.Chart({          
        ...
        plotOptions: 
        {
            series: 
            {
                ....
            }
        }
    }, function(chart)
    { 
       chart.renderer.text('The dotted line represents ...', 100, 86)
            .css({
                fontSize: '13px',
                color: '#666666'
            })
            .add();
    }
)};

My current format is however different:

$(function () {

    var options = 
    {
        chart: 
        {
            ...
        },
        ...
    };

    $.get('xxx.csv', function(data)
    {   
        var series = {
            data: []
        };

        var temp = []

        // Split the lines
        var lines = data.split('\n');

        // For each line, split the record into seperate attributes
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');

            if (lineNo !== 0) {
                var xValue = +items[0],
                    kwh = parseFloat(items[2] / 1000);
                if (!isNaN(kwh)) {
                    series.data.push({x:xValue,y: kwh, extra:items[1]});
                }
            }
        });


        // Push the completed series
        options.series.push(series);

        new Highcharts.Chart(options);
    });
});

Now, I wonder how I can add a chart.renderer.text to the graph. I have tried different things, but didn't succeed. Where and how am I supposed to add the code for the text now? Here is a fiddle for this. Thanks for any hints!

Upvotes: 2

Views: 12064

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can add your text inside load event callback function of your chart. You can add this function inside your options - options.chart.events object. http://api.highcharts.com/highcharts#chart.events.load

options.chart.events = {
  load: function() {
    var chart = this;
    chart.renderer.text('The dotted line represents ...', 100, 186)
      .css({
        fontSize: '13px',
        color: '#666666'
      })
      .add();
  }
}

Here you can see an example how it can work: http://jsfiddle.net/17ed42pa/1/

Best regards.

Upvotes: 4

Related Questions