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: 'datetime'
  },
  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: [
        [1530403200000, 1.1],
        [1530489600000, 2.02],
        [1530576000000, 3.85],
        [1530662400000, 0.0],
        [1530748800000, 2.6],
        [1530835200000, 1.06],
        [1530921600000, 2.86],
        [1531008000000, 0.98],
        [1531180800000, 4.9],
        [1531267200000, 4.21],
        [1531353600000, 6.32]
      ],
      yAxis: 1,

      type: "line"
    },
    {
      name: "Grouped change_in_conversion_prior_period",
      data: [
        [1530403200000, 37.44],
        [1530489600000, -56.74],
        [1530576000000, 30.89],
        [1530662400000, 12.55],
        [1530748800000, 52.73],
        [1530835200000, -41.49],
        [1530921600000, 47.71],
        [1531008000000, 18.54],
        [1531094400000, 53.38],
        [1531180800000, -48.15],
        [1531267200000, -57.37],
        [1531353600000, 116.67]
      ],
      yAxis: 1,
      type: "line"
    }
  ]
});