JSFiddle - React, Tailwind, and code Playground

by cincodenada

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {
    Highcharts.setOptions({
  credits: { enabled: false },
  title: { text: '' },
  xAxis: { title: { text: '' } },
  yAxis: { 
    title: { text: '' }, 
    minRange: 0.5, 
    min: 0,
    minTickInterval: 1,
  },
  legend: { enabled: false },
  plotOptions: {
    line: {
      lineWidth: 1,
      marker: { radius: 2 },
      fillOpacity: 0.4
    },
  },colors: [
    '#004d9f',
    '#1f78b4',
    '#a6cee3',
    '#b2df8a',
    '#33a02c',
    '#fb9a99',
    '#e31a1c',
    '#fdbf6f',
    '#ff7f00',
    '#cab2d6',
    '#6a3d9a',
    '#cccc00',
    '#b15928',
  ],
  tooltip: {
    valueDecimals: 1,
  },
  global: {
    useUTC: false,
  }
});
    
    opts = {"options":{"title":{"text":""},"xAxis":{"type":"datetime"},"yAxis":{"labels":{"format":"{value:.0f}%"}},"chart":{"type":"spline"},"legend":{"enabled":true},"tooltip":{"shared":true,"pointFormat":"<span style=\"color:{series.color};\">{series.name}</span>: <b>{point.y:.1f}%</b><br/>"}},"series":[{"name":"Overall...