JSFiddle - React, Tailwind, and code Playground

by nowo

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

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

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.stockChart('container', {

  xAxis: {
    type: 'datetime',
    startOnTick: false,
    endOnTick: false,
    tickInterval: 360 * 24 * 3600 * 1000,
    crosshair: {
      snap: true,
    },
  },

  tooltip: {
    split: false,
    shared: true,
  },

  legend: {
    enabled: true,
    layout: 'proximate',
    align: 'right',
    itemStyle: {
      color: '#000000',
      fontWeight: 'bold',
      fontSize: '10px',
    }
  },

  series: [{
      name: 'Line1',
      data: [{
          x: (new Date("2000-05-12")).getTime(),
          y: 0
        },
        {
          x: (new Date("2050-05-12")).getTime(),
          y: 100
        },
      ]
    },
    {
      name: 'Line2',
      data: [{
          x: (new Date("2000-05-12")).getTime(),
          y: 100
        },
        {
          x: (new Date("2050-05-12")).getTime(),
          y: 0
        },
      ]
    }
  ]
});