Highcharts Demo

author(s): Torstein Hønsi

by Harsh Bhatnagar

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  plotOptions: {
    pie: {
      point: {
        events: {
          legendItemClick: function(e) {
            var chart = this.series.chart,
              points = this.series.points,
              visibilityFlag = true,
              noDataTextBBox;

            e.preventDefault();
            this.setVisible(!this.visible);

            points.forEach(function(point) {
              if (point.visible) {
                visibilityFlag = false;
                return;
              }
            });

            if (visibilityFlag) {
              noDataText = chart.renderer.text('No data to display', 100, 100)
                .css({
                  color: '#9E9E9E',
                  fontSize: '20px'
                })
                .add();

              noDataTextBBox = noDataText.getBBox();
              noDataText.attr({
                x: chart.plotLeft + (chart.plotWidth * 0.5) - (noDataTextBBox.width * 0.5),
                y: chart.plotTop + (chart.plotHeight * 0.5) - (noDataTextBBox.height * 0.5)
              });
            } else {
              noDataText = noDataText ? noDataText.destroy() : null;
            }
          }
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    type: 'pie',
    showInLegend: true,
    data: []
  }]
});