basic chart

author(s): Torstein Hønsi

by Haze32

HTML

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

CSS

body{
  
  background:grey
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {


  Highcharts.chart('container', {
    chart: {
      type: 'pie',

      events: {
        load: function(e) {
          var chart = this,
            legend = chart.legend,
            point = chart.series.chart;

          chart.series[0].points[0].onMouseOver();
          chart.series[0].points[0].setState('hover');


          this.legend.allItems.forEach((item, index) => {
            item.legendItem.group.on('mouseover', () => {

              chart.series[0].points[index].onMouseOver();
              chart.series[0].points[index].setState('hover');
            });
          });
          this.legend.allItems.forEach((item, index) => {
            item.legendItem.group.on('mouseout', () => {
              chart.series[0].points[0].onMouseOver();
              chart.series[0].points[0].setState('hover');

            });
          });


        },
        redraw: function(e) {
          var chart = this,
            legend = chart.legend,
            point = chart.series.chart;

          chart.series[0].points[0].onMouseOver();
          chart.series[0].setState = function() {};
          chart.series[0].points[0].setState('hover');
          


          this.legend.allItems.forEach((item, index) => {
            item.legendItem.group.on('mouseover', () => {

              chart.series[0].points[index].onMouseOver();
              chart.series[0].points[index].setState('hover');
            });
          });
          this.legend.allItems.forEach((item, index) => {
            item.legendItem.group.on('mouseout', () => {
              chart.series[0].points[0].onMouseOver();
              chart.series[0].points[0].setState('hover');

            });
          });


        },

      },


    },
    title: {
      text: null
    },
    tooltip: {
      useHTML: true,
      headerFormat: '',
      pointFormat: '{point.name}: <b>{point.y}</b>',
      positioner: function(labelWidth, labelHeight,...