JSFiddle - React, Tailwind, and code Playground

by Swapnil Navalakha

HTML

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

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

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto;
}

.my-label .highcharts-data-label-box {
  fill: green;
  stroke-width: 1px;
  stroke: black;
  border-radius: 50px;
}

JavaScript

Highcharts.chart('container', {
  xAxis: {
    min: 0,
    max: 11,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: '',
    }
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true
      },
      enableMouseTracking: true
    }
  },


  chart: {
    type: 'line'
  },

  tooltip: {
    shared: true
  },
  series: [{
    name: 'Test',
    //type: 'column',
    color: 'orange',
    data: [
      [0, 0],
      [1, 0],
      [2, 0],
      [3, 0],
      [4, 0],
      [5, 0],
      [6, 0],
      [7, 0],
      [8, 0],
      [9, null],
      [10, null],
      [11, null]
    ],
    marker: {
      enabled: true
    },
    states: {
      hover: {
        lineWidth: 0
      }
    },
    enableMouseTracking: true
  }, {
    name: 'Test Case',
    //type: 'spline',
    color: 'darkblue',
    data: [90, 89, 93, 100, 97, 54, 89, 97, 100, null, null, null],
    marker: {
      enabled: true
    },
    states: {
      hover: {
        lineWidth: 0
      }
    },
    enableMouseTracking: true
  }]
});