Highcharts Pie Charts Show Outline When Empty

Question

I currently have a pie chart successfully displaying on my reporting dashboard. However, a business request was made to retain a chart outline and display the 'noData' message in the center when all series are empty.

The business did not like the look of a floating label on the page when the chart was empty. Using an existing chart object, would it be possible to essentially fabricate a chart outline and display a noData message?

Answer 1

It is possible to add custom shape, eg circle, that will be showing in case there is no data. Using chart's events load and redraw you can update shape to fit in chart and be placed in center or remove when data is added to chart.

API reference for renderer.circle: http://api.highcharts.com/highcharts#Renderer.circle

Example: http://jsfiddle.net/v8n1159o/1/

chart: {
        events: {
            load: function () {
                var chart = this;
                if (!chart.hasData()) {
                    var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                        y = chart.plotHeight / 2 + chart.plotTop,
                        x = chart.plotWidth / 2 + chart.plotLeft;
                    chart.pieOutline = chart.renderer.circle(x, y, r).attr({
                        fill: '#ddd',
                        stroke: 'black',
                            'stroke-width': 1
                    }).add();
                }
            },
            redraw: function () {
                var chart = this;
                if (chart.pieOutline && chart.pieOutline.element) {
                    if (chart.hasData()) {
                        chart.pieOutline.destroy();
                    } else {
                        var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                            y = chart.plotHeight / 2 + chart.plotTop,
                            x = chart.plotWidth / 2 + chart.plotLeft;
                        chart.pieOutline.attr({
                            cx: x,
                            cy: y,
                            r: r
                        });
                    }
                } else if(!chart.hasData()) {
                    var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                        y = chart.plotHeight / 2 + chart.plotTop,
                        x = chart.plotWidth / 2 + chart.plotLeft;
                    chart.pieOutline = chart.renderer.circle(x, y, r).attr({
                        fill: '#ddd',
                        stroke: 'black',
                            'stroke-width': 1
                    }).add();
                }
            }
        },
...