JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="http://localhost:3031/highcharts.js"></script>

<div id="container"></div>

CSS

@import url("htdtp://localhost:3031/css/highcharts.css");

JavaScript

Highcharts.addEvent(Highcharts.Chart, "render", function () {
  this.axes.forEach((axis) => {
    axis.plotLinesAndBands.forEach((plb) => {
      const fill = plb.svgElem.attr("fill")
      if (fill) {
        plb.svgElem.css({
          fill,
          "fill-opacity": 1,
        })
      }
    })
  })
})

Highcharts.chart("container", {
styledMode: false,
  yAxis: {
    plotBands: [
      {
        from: 0,
        to: 65,
        color: "#55BF3B",
      },
      {
        from: 60,
        to: 125,
        color: "#DDDF0D",
      },
      {
        from: 120,
        to: 180,
        color: "#DF5353",
      },
    ],
  },
  series: [
    {
      data: [20, 80, 20, 180],
    },
  ],
})