JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

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

CSS

#chart {
    width: 90%;
    height: 300px;
}

JavaScript

Highcharts.chart("chart", {
  chart: {
    type: "spline",
    height: 300,
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  title: {
    text: "Chart"
  },
  yAxis: [{
    endOnTick: false,
    max: 0.1,
    title: {
      text: "Negative values make me sad"
    }
  }],
  series: [{
    data: [0, 0, 0, -2, -2, -1, 0, -2], // If you put a `1` value in and then everything renders nicely.
    lineWidth: 20
  }]
});