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: 'scatter',
    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({
            color: titleColor,
            fontSize: '16px',
            fontWeight: yAxis.options.title.style.fontWeight
          }).attr({
            align: 'center'
          }).add();

          chart.customRenderedElements.push(rect, title);
        });
      }
    }
  },
  yAxis: [{

  }, {
  }, {
  }],
  series: [{
    data: data1,
    name: 'Series 1',
   ...