JSFiddle - React, Tailwind, and code Playground

by Anil Vangari

HTML

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

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

JavaScript

Highcharts.chart('container', {
  "credits": {
    "text": "",
    "href": ""
  },
  "chart": {},
  "title": {
    "text": ""
  },
  "plotOptions": {
    "series": {
      "cursor": "pointer",
      "animation": false
    }
  },
  "xAxis": {
    "type": "datetime",
    //"dateTimeLabelFormats": {      "month": "%b %Y"    },
    
    "labels": {
    	format: "{value:%Y-%b}",
      "useHTML": true
    },
    startOnTick: true,
    //tickmarkPlacement: 'between',
    "tickInterval": 2592000000
  },
  "yAxis": [{
    "labels": {
      "format": "{value:.0f}",
      "style": {
        "color": "#BB5B55"
      }
    },
    "lineWidth": 1,
    "title": {
      "text": "Total",
      "style": {
        "color": "#BB5B55"
      }
    }
  }, {
    "title": {
      "text": "Trend (%)",
      "style": {
        "color": "#5187B9"
      }
    },
    "lineWidth": 1,
    "labels": {
      "format": "{value}%",
      "style": {
        "color": "#5187B9"
      }
    },
    "opposite": true
  }],
  "tooltip": {
    "shared": true,
    "useHTML": true
  },
  "legend": {
    "align": "center",
    "verticalAlign": "bottom",
    "backgroundColor": "#FFFFFF"
  },
  "series": [{
    "name": "Total",
    "type": "column",
    "yAxis": 0,
    "data": [
      [1485842400000, null],
      [1488261600000, null],
      [1490936400000, null],
      [1493528400000, null],
      [1496206800000, null],
      [1498798800000, null],
      [1501477200000, null],
      [1504155600000, null],
      [1506747600000, null],
      [1509426000000, null],
      [1512021600000, null],
      [1514700000000, null]
    ],
    "tooltip": {
      "valueSuffix": "",
      "valueDecimals": 0
    }
  }, {
    "name": "Trend (%)",
    "type": "spline",
    "yAxis": 1,
    "data": [
      [1485842400000, null],
      [1488261600000, null],
      [1490936400000, null],
      [1493528400000, null],
      [1496206800000, null],
      [1498798800000, null],
      [1501477200000, null],
      [1504155600000, null],
     ...