Highcharts Demo

author(s): Torstein Hønsi

by vasagi

HTML

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

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

JavaScript

const data1 = [];
const data2 = [];
const data3 = [];
for (let i = 0; i < 10000; i++) {
  const time = (new Date()).getTime() + i * 1000;
  data1.push([Math.random() * 10, Math.random() * 10]);
  data2.push([Math.random() * 10, Math.random() * 100]);
  data3.push([Math.random() * 10, Math.random() * 10]);
}
Highcharts.theme = {
  yAxis: {
    labels: {
      style: {
        fontSize: '14px'
      }
    },
    title: {
      enabled: false
    }
  }
};
Highcharts.setOptions(Highcharts.theme);
Highcharts.chart('container',{
    "chart": {
        "type": "",
        "styledMode": false,
        "id": "7aa596bc-4b3b-4f21-bf40-2ba252ec3eaa",
        "width": null,
        "height": 250,
        "marginTop": 30,
        "className": "vertical-chart line-chart points-no-fill highcharts-multiple-series",
        "zooming": {
            "mouseWheel": {
                "enabled": false
            }
        },
 events: {
      render: function() {
        const chart = this;

        // Clear previous renders
        if (chart.customRenderedElements) {
          chart.customRenderedElements.forEach(function(element) {
            element.destroy();
          });
        }
        chart.customRenderedElements = [];

        chart.yAxis.forEach(function(yAxis, index) {
          const rectColor = ['rgba(255, 0, 0, 0.1)', 'rgba(0, 255, 0, 0.1)', 'rgba(0, 0, 255, 0.1)'][index];
          console.log(yAxis.offset)
          const rect = chart.renderer.rect(
            -yAxis.offset + 7.5,
            yAxis.top - 10,
            yAxis.maxLabelLength + 5,
            yAxis.len + 20,
            0
          ).attr({
            fill: rectColor,
            zIndex: -1
          }).add();

          const titleColor = ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)'][index];
          const title = chart.renderer.text(
            index,
            -yAxis.offset + 10 + (yAxis.maxLabelLength + 5) / 2,
            yAxis.top - 15
          ).css({
           ...