Highcharts Demo

author(s): Torstein Hønsi

by ryannaumanx

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>
<script src="https://code.highcharts.com/modules/boost.js"></script>

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

CSS

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

JavaScript

Highcharts.chart('container', {
  accessibility: {
    enabled: false,
  },
  credits: {
    enabled: false,
  },
  title: {
    text: 'fruits',
    margin: 50,
  },
  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,
      },
      labels: {
        y: -7,
      },
      tickLength: 0,
      endOnTick: true,
      lineWidth: 0,
      startOnTick: true,
      tickAmount: 2,
      minorTickInterval: 'auto',
      tickPositions: [50, 250],
      min: 50,
      max: 250,
      reversed: false,
      opposite: true,
      gridLineWidth: 0,
      minRange: 0.1,
      type: 'linear',
    },
  ],
  yAxis: [
    {
      min: 1067,
      max: 1098,
      minorTicks: true,
      reversed: true,
      crosshair: {
        snap: false,
      },
      title: {
        text: null,
      },
      maxPadding: 0,
      minPadding: 0,
      events: {},
      labels: {
        padding: 0,
        format: '{value}',
      },
      plotLines: [],
      plotBands: [],
    },
  ],
  annotations: [],
  exporting: {
    enabled: false,
  },
  plotOptions: {
    series: {
      cursor: 'pointer',
      connectNulls: false,
      findNearestPointBy: 'xy',
      pointStart: null,
      allowPointSelect: true,
      stickyTracking: false,
      turboThreshold: 0,
      events: {},
      point: {
        events: {},
      },
    },
  },
  series: [
    {
      id: 'apples',
      cropThreshold: 999999999,
      data: [
        [139.1992, 1067.62296],
        [149.4853, 1067.65344],
        [144.3969,...