javascripthighchartsno-data

Dynamically allocating Highcharts.Chart options noData


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.


Solution

  • 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/