JSFiddle - React, Tailwind, and code Playground

by core972

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

let p2Color = '#f00'

Highcharts.chart('container', {
		xAxis:{
    	type: 'category'
    },
    yAxis:[
    	{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true

    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }

    }
    ],
    series: [{name: "Grouped rep_oos",
  data: 
   [{name: "2018-07-01", y: 1.1},
    {name: "2018-07-02", y: 2.02},
    {name: "2018-07-03", y: 3.85},
    {name: "2018-07-04", y: 0.0},
    {name: "2018-07-05", y: 2.6},
    {name: "2018-07-06", y: 1.06},
    {name: "2018-07-07", y: 2.86},
    {name: "2018-07-08", y: 0.98},
    {name: "2018-07-09", y:null},
    {name: "2018-07-10", y: 4.94},
    {name: "2018-07-11", y: 4.21},
    {name: "2018-07-12", y: 6.32},
    {name: "2018-07-13", y: 2.73},
    {name: "2018-07-14", y: 1.08},
    {name: "2018-07-15", y: 1.08},
    {name: "2018-07-16", y: 0.0},
    {name: "2018-07-17", y: 0.78},
    {name: "2018-07-18", y: 0.0},
    {name: "2018-07-19", y: 3.95},
    {name: "2018-07-20", y: 2.9},
    {name: "2018-07-21", y: 3.64}],
    connectNulls: true,
  yAxis: 1,
  
  type: "line"},
 {name: "Grouped change_in_conversion_prior_period",
  data: 
   [{name: "2018-07-01", y: 37.44},
    {name: "2018-07-02", y: -56.74},
    {name: "2018-07-03", y: 30.89},
    {name: "2018-07-04", y: 12.55},
    {name: "2018-07-05", y: 52.73},
    {name: "2018-07-06", y: -41.49},
    {name: "2018-07-07", y: 47.71},
    {name:...