JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div id="chart">

</div>

CSS

#chart {
  width: 100%;
  height: 400px;
  background: white;
}
body {
  background: #eef;
}

JavaScript

let result = {
  "status": 1,
  "data": [
    [1657883629152, null],
    [1657926830679, 1],
    [1658141735824, null],
    [1658184937245, 1]
  ],
  "additional": "",
  "label": "my exception",
  "id": 12
};

let plotOptions = {
  series: {
    states: {
      inactive: {
        opacity: 1
      },
      hover: {
        enabled: false
      }
    }
  },
  area: null
};

let seriesData = [];

seriesData.push({
  data: result.data,
  name: result.label,
  id: result.id,
  type: 'line', // dataset.type,
  // color: Highcharts.getOptions().colors[j],
  step: 'left',
  lineWidth: 5
});

let chartDiv = document.getElementById("chart");

let chart = Highcharts.chart(chartDiv, {
  accessibility: {
    enabled: false
  },
  chart: {
    marginLeft: 45,
    spacingTop: 15,
    spacingBottom: 15,
    height: 400,
    marginRight: 120,
    zoomType: 'x'
  },
  title: null,
  subtitle: {
    enabled: true,
    text: '',
    align: 'left',
    margin: 0,
    x: 10,
    y: 20
  },
  credits: {
    enabled: false
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    enabled: true,
    floating: true,
    verticalAlign: 'top',
    useHTML: true,
    width: 500,
    itemMarginTop: 2,
    symbolHeight: 12,
    symbolWidth: 12,
    symbolRadius: 6,
    squareSymbol: true,
    itemMarginBottom: 8,
    itemStyle: {
      color: '#000000',
      fontWeight: 'normal'
    },
    labelFormatter: function() {
      return this.name;
    },
    x: 0,
    y: 0
  },
  xAxis: {
    crosshair: true,
    visible: true, //i === numCharts - 1,
    events: {
      setExtremes: self.syncExtremes
    },
    type: 'datetime'
  },
  yAxis: {
    enabled: true,
    title: {
      text: null
    },
    visible: false,
    steps: 'left'
  },
  tooltip: {
    positioner: function() {
      return {
        // right aligned
        x: this.chart.chartWidth - 285,
        y: 39 // align to title
      };
    },
    borderWidth: 0,
    backgroundColor: 'none',
    headerFormat: '',
    useHTML:...