Dynamically allocating Highcharts.Chart options noData

Question

I have a Highcharts.Chart object and the global options for it are like:

Highcharts.setOptions({
    global: {
        useUTC: false
    },
    lang: {
        noData: message_1
    },
    chart: {
        style: {
            fontSize: '12px',
            fontWeight: 'lighter',
            color: '#000000'
        }
    }
});

I then set the options using javascript as follows:

var options = {};
options.lang = {};
options.noData = {};
options.noData.useHTML = true; //message_1 is HTML

Now, How do I check if the chart that is going to be plotted has any data or not after the fetch data operations are performed in my code? Is there any function that I could use in my javascript code to know the same?

And in case there is no data to be plotted, how do I assign a new noData message (say, message_2) to the chart.

I tried doing this but to no avail,

chart.options.noData = message_2;

where chart is the Highcharts.Chart object.

Have you seen this HC example? http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/no-data-to-display/no-data-line/ — Grzegorz Blachliński, Sep 22 '16 at 11:44
Yes, I tried this as well, but doesn't seem to be working for me. — Abhinav, Sep 22 '16 at 13:00
@GrzegorzBlachliński. It worked!! I needed to make use of the 'highcharts-no-data' class as specified by you. Although "chart.options.lang.noData = 'message3';" doesn't seem to make any difference except for changing the value of chart.options.lang.noData to 'message_3'. If you comment out this line, then also 'message_3' will be displayed. Thanks a ton! :) — Abhinav, Sep 23 '16 at 10:35

score 1 · Accepted Answer · answered Sep 23 '16 at 13:59

If you want to change your noData message, you can use ('.highcharts-no-data') class for changing this message:

  $('.highcharts-no-data')[0].children[0].innerHTML = 'message3';

If you want to set this message in your chart object, you can use

  chart.options.lang.noData = 'message3';

This will help you 'save' your new message so you won't have to change innerHTML of your mesage text every time you remove your data.

Here you can see an example how it can work: http://jsfiddle.net/0Lqyax5x/

Dynamically allocating Highcharts.Chart options noData

1 Answers1