Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

/* .highcharts-tracker-line {
  stroke: black !important;
} */

JavaScript

(function(H) {
  H.wrap(H.Pointer.prototype, 'getHoverData', function(proceed) {
    const result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    const hoverPoint = result.hoverPoint;

    if (hoverPoint) {
      const allSeries = hoverPoint.series.chart.series;

      allSeries.forEach(s => {
        const point = s.points[hoverPoint.index];

        if (point && point !== hoverPoint) {
          result.hoverPoints.push(point);
        }
      });
    }

    return result;
  });
}(Highcharts));

Highcharts.chart('container', {
  "accessibility": {
    "enabled": false
  },
  "credits": {
    "enabled": false
  },
  "title": {
    "text": "fruits",
    "margin": 50,
  },
  "tooltip": {
    "split": true,
    "outside": true
  },
  "boost": {
    "useGPUTranslations": false,
    "seriesThreshold": 1,
    "enabled": true
  },
  "chart": {
    "spacingRight": 15,
    "spacingLeft": 5,
    "marginTop": 60,
    "width": 200,
    "zooming": {
      "mouseWheel": {
        "enabled": true
      },
      "type": "y"
    },
    "marginBottom": 100,
    "events": {}
  },
  "legend": {
    "width": 200,
    "maxHeight": 100,
    "x": 15,
  },
  "xAxis": {
    "minorTicks": true,
    "crosshair": {
      "snap": false
    },
    "maxPadding": 0,
    "minPadding": 0,
    "title": {
      "offset": 7,
      "style": {
        "fontSize": "11px"
      }
    },
    "labels": {
      "y": -7,
    },
    "tickLength": 0,
    "endOnTick": true,
    "lineWidth": 0,
    "startOnTick": true,
    "tickAmount": 2,
    "minorTickInterval": "auto",
    "tickPositions": [
      0,
      150
    ],
    "min": 0,
    "max": 150,
    "reversed": false,
    "opposite": true,
    "gridLineWidth": 0,
    "minRange": 0.1,
    "type": "linear"
  },
  "yAxis": {
    "min": 1067.62296,
    "max": 1097.18856,
    "minorTicks": true,
    "reversed": true,
    "crosshair": {
      "snap": false
    },
    "title": {
      "text": null
    },
    "maxPadding": 0,
    "minPadding":...