Highcharts Stock Demo

author(s): Torstein Hønsi

by Black Label

HTML

<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>

JavaScript

function getFunction() {
  const series = [];
  const start = 1579046400000;
  const end = 1579046400000 + 86400000 * 50;
  for (let i = start; i <= end; i = i + 86400000) {
    series.push([i, Math.random() * (10 - 1) + 1]);
  }
  return series;
}

let chart = Highcharts.chart("container", {
  chart: {

    zoomType: "x", // zoom by dragging the mouse is allowed in x dimension
  },
  series: [{
      name: "1",
      data: getFunction(),
      pointInterval: 24 * 3600 * 1000,
    },
    {
      name: "2",
      data: getFunction(),
      lineWidth: 0,
      marker: {
        enabled: false,
      },
      _events: {
        stickyTracking: true,
        mouseOver: function() {

          this.update({
            marker: {
              enabled: true,
              radius: 5,
              fillColor: 'red'
            }
          })
        },
        mouseOut: function() {

          this.update({
            marker: {
              enabled: false
            }
          })
        }
      },
      pointInterval: 24 * 3600 * 1000,
    },
    {
      name: "3",
      data: getFunction(),
      pointInterval: 24 * 3600 * 1000,
      cursor: "move",
      dragDrop: {
        draggableY: true, // enable dragging in the Y dimension
      },
    },
  ],

  xAxis: {
    crosshair: {
      width: 2,
    },
  },
  tooltip: {
    shared: true,
    borderRadius: 30,
    padding: 15,
    borderColor: "#000000",
  },

  plotOptions: {
    series: {
      states: {
        hover: {
          enabled: false
        }
      }
    }
  },
});


document.getElementById("container").addEventListener("mouseover", function(event) {
  chart.series[1].update({
    marker: {
      enabled: true,
      radius: 5,
      fillColor: 'red'
    }
  })
}, false);

document.getElementById("container").addEventListener("mouseout", function(event) {
  chart.series[1].update({
    marker: {
      enabled: false
    }
  })
}, false);