JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JavaScript

Highcharts.chart("container", {
  chart: {
    type: "arearange"
  },
  credits: {
    enabled: false
  },
  title: { text: "" },
  subtitle: { title: { text: " " } },
  xAxis: {
    type: "datetime",
    // tickInterval: 1000 * 60 * 60 * 24 * 180, // Overrided by tickPositioner
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true,
    labels: {
      rotation: -45,
      format: "{value:%b-%y}"
    },
    tickPositioner: function () {
      var positions = [],
          tick = Math.floor(this.dataMin),
          increment = 1000 * 3600 * 24 * 180; // 6 months

      for (tick; tick <= this.dataMax; tick += increment) {
        positions.push(tick);
      }
      if (positions.indexOf(this.dataMax) == -1) positions.push(this.dataMax);
      return positions;
    }
  },
  yAxis: {
    title: { text: " " },
    min: 0,
    max: 4.5,
    tickInterval: 0.5,
    plotLines: [{
            color: '#a95228',
            width: 3,
            value: 4,
      zIndex: 7,
      label: {
                text: '',
                align: 'center',
                x: 0,
                y: -14
            }
        }]
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    area: {
      marker: {
        radius: 2
      },
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      threshold: null
    }
  },
  tooltip: {
    enabled: true,
    headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
    pointFormat:
      '<tr><td style="padding:0;font-size:12px"><b>{point.y:.2f}%</b></td></tr>',
    footerFormat: "</table>",
    shared: true,
    useHTML: true,
    zIndex: 99
  },
  series: [
    {
      fillColor: "#129777",
      color: "#129777",
      lineColor: "transparent",
      type: "area",
      name: " ",
      marker: {
        fillColor: "#ffffff",
        lineWidth: 1,
        lineColor: null // inherit from series
      },
      data: [
        [Date.UTC(2008, 02, 29), 3.125700755],
    ...