Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

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

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

.tooltipTable {
  border: 1px solid black;
  border-collapse:collapse;
}

.tooltipCell {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.tooltipCellRight {
  border-left: 1px solid black;  
}

JavaScript

let color = null,
  colorIndex = null,
  colors = ['rgba(200,150,168,0.9)', 'rgba(120,250,60,0.9)', 'rgba(40,250,208,0.9)', 'rgba(90,10,208,0.9)'],
  seriesData=[{
    name: 'Alberta',data: [24916, 24064, 29742, 29851, 32490]},{
    name: 'Ontario',data: [11744, 17722, 16005, 29851, null]},{
    name: 'British Columbia',data: [null, null, 6988, 29851, 15112]}, {
    name: 'Canada',data: [12908, 7948, 8405, 29851, 8989]}];
Highcharts.chart('container', {
  
  title: {text: ''},
  colors: colors,
  yAxis: {title: {text: 'Number of Employees'}},
  legend: {align: 'center',verticalAlign: 'top'},
  plotOptions: {
    series: {
    	lineWidth: 1,
      states: {hover: {lineWidth: 1}},
      pointStart: 2010,
      events: {
        mouseOver: function() {
        	this.chart.series.forEach((series, index)=>{
          	color = (colors[index]).replace('0.9', '0.5');
          	series.update({color: color});
          })
          color = (colors[this.index]).replace('0.9', '1');
          colorIndex = this.index;
          this.chart.series[this.index].update({
            color: color
          });
        },
        mouseOut: function() {
          this.chart.series[this.index].update({
            color: colors[this.index]
          });
        }
      }
    }
  },

  series: seriesData,
  tooltip: {
    useHTML: true,
    formatter: function() {
      var thisPointIndex=this.points[0].point.index;
			var isOnHover=seriesData[colorIndex].name;
      
      var s = '<table class="tooltipTable"><tr><th colspan="3" style="background-color:#636363;color:white;">' + this.points[0].key + '</th></tr>';
      
      
      seriesData.forEach(function(series, index) {
        var thisColor='', openBold='', closeBold='', backgroundColor='', fontColor='';
        if (series.name != isOnHover) {
        	thisColor='#000'//'#c6c6c6';
          openBold='';
          closeBold='';
          backgroundColor='';
          fontColor='';
        }
        else {
       ...