Highcharts Demo

author(s): Torstein Hønsi

by stitot

HTML

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

<div id="container"></div>

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {
  xAxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
  },
  tooltip: {
    shared: true, // opacity removed if true
    fixed: false, // dropshadow removed if true
  },
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function () {
            for (const s of this?.series?.chart?.series) {
              if (s !== this.series) {
                s.update({ opacity: 0.1 });
              }
            }
          },
          mouseOut: function () {
            for (const s of this.series.chart.series) {
              s.update({ opacity: 1 });
            }
          }
        },
      },
    },
  },
  series: [
    {
      data: [
        29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
        95.6, 54.4,
      ],
    },
    {
      data: [
        216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
        148.5,
      ],
    },
    {
      data: [
        73.2, 221.9, 15.7, 139.0, 94.6, 12.1, 206.4, 51.8, 180.5, 234.0, 64.2,
        119.3,
      ],
    },
  ],
})