Highcharts custom error handler

Question

We are using highcharts to plot multiple charts on a single HTML page.

However one/some of the chart throw highchart error and we like to capture those error and show different error to user. For this highcharts do provide custom error handler. But this custom error handler does not provide information about specific chart throwing that error.

Here that JS Fiddle provided by highcharts, which works fine for a chart :

Highcharts.error = function (code, true) {
// See 
https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
Highcharts.charts[0].renderer
    .text('Chart error ' + code)
    .attr({
        fill: 'red',
        zIndex: 20
    })
    .add()
    .align({
        align: 'center',
        verticalAlign: 'middle'
    }, null, 'plotBox');
};

http://jsfiddle.net/gh/get/library/pure/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/highcharts-error/

Any idea how can I use this custom error handler per chart? I'm using new Highcharts.Charts(options) to create new chart, but don't see way to specify error handler per chart.

Additional info: Charts are refreshed/appended using data through APIs. User that configures chart also configures refresh interval and query to use for chart.

Answer 1

Error handling in HighCharts does not make much sense. It would make more sense to pass the chart instance to Highcharts.error (like Kamil Kulig wrote) or to have an error event in chart.events. Anyways here is a solution I came up with:

Create an array of errors:

var chartErrors = [];

Create an error handler which will push errors into the chartErrors. Error objects I'm making look like this: {"chartIndex": <chart index>, "errorCode": <error code>}. All charts are added to the Highcharts.charts array when they are created so we can use Highcharts.charts.length - 1 for the chartIndex.

Highcharts.error = function (code) {
    // See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
    // for error id's
    chartErrors.push({"chartIndex": Highcharts.charts.length - 1, "errorCode":code});
};

After initiating all charts we will have an array of errors. We can call forEach on this array and handle errors the way we want.

chartErrors.forEach(function(c) { 
    Highcharts.charts[c.chartIndex].renderer
        .text('Chart error ' + c.errorCode)
        .attr({
            fill: 'red',
            zIndex: 20
        })
        .add()
        .align({
            align: 'center',
            verticalAlign: 'middle'
        }, null, 'plotBox');
});

Working example:

Note: I've wrapped the code in a self invoking function to prevent leaking variables to global scope.

(function() {
var chartErrors = [];

Highcharts.error = function (code) {
  // See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
  // for error id's
  chartErrors.push({"chartIndex": Highcharts.charts.length - 1, "errorCode":code});
};

Highcharts.chart('container1', {

    title: {
        text: 'Demo of Highcharts error handling'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },

    yAxis: {
        type: 'logarithmic',
        min: 0
    },

    series: [{
        data: [1, 3, 2],
        type: 'column'
    }]
});

Highcharts.chart('container2', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});
Highcharts.chart('container3', {

    title: {
        text: 'Demo of Highcharts error handling'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },

    yAxis: {
        type: 'logarithmic',
        min: 0
    },

    series: [{
        data: [1, 3, 2],
        type: 'column'
    }]
});

chartErrors.forEach(function(e) { 
  Highcharts.charts[e.chartIndex].renderer
    .text('Chart error ' + e.errorCode)
    .attr({
    fill: 'red',
    zIndex: 20
  })
    .add()
    .align({
    align: 'center',
    verticalAlign: 'middle'
  }, null, 'plotBox');
});
})();

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container1" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
<div id="container3" style="height: 400px"></div>