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;
}

div.custom_tooltip div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

div.custom_tooltip span:first-child {
  flex: 1;
  text-align: left;
}

div.custom_tooltip span:last-child {
  text-align: right;
  min-width: 80px;
  font-variant-numeric: tabular-nums;
}

JavaScript

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    tooltip: {
      useHTML: true,
      formatter() {
        let output = "";
        for (const s of this?.series?.chart?.series) {
          const opacity = s !== this.series ? 0.3 : 1;
          output += `
            <div>
              <span>
                <span style="color:${s.color}; opacity: ${opacity}; margin-right: 4px;">\u25CF</span>
                <span>${s.name}</span>
              </span>
              <span>${s.dataTable.columns.y[this.index]}</span>
            </div>
          `;
        }
        return `<div class="custom_tooltip">${output}</div>`;
      },
    },
    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]
        }
    ]
});