JSFiddle - React, Tailwind, and code Playground

by Ravinder Bhardwaj

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        colors: ['#00ff00', '#ff6600','#FF0000', '#90ed7d', '#f7a35c', '#8085e9', 
   '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
        
        title: {
            text: 'Column Stacked with line'
        },
        xAxis: [{
            categories: ['','2/1','3/1','4/1', '5/1', '6/1',                '7/1','8/1','9/1','10/1','11/1', '12/1', '13/1', '14/1', '15/1'],
             plotLines: [{
                color: '#333333', // Red
                width: 2,
                value: 4,
                dashStyle: 'longdash'
            }]
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            min: 0,
            max:undefined,
        }, { // Secondary yAxis
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            min: 0,
            max: undefined,
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0],
                    display:'none'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            },
            line: {
              marker: {
                  enabled: false
              }
            }
        },
        series: [
            {
            name: 'suff1',
            type: 'column',            
            data: [0.15],

          },
          {
            name: 'suff1',
            type: 'column',            
            data: [0.3],

          },
          {
            name: 'suff1',
     ...