JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

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

<div id="container2"></div>

CSS

#container2 {
  height: 400px
}

JavaScript

var options = {
  chart: {
    type: 'bar',
    backgroundColor: 'transparent'
  },
  title: {
    text: 'Forms wise progress'
  },
  xAxis: {
    type: 'category',
    startOnTick: false,
    labels: {
      rotation: 0,
      useHTML: true,
      //x: 0,
      //y: 30,
      style: {
        color: '#000',
        font: '12px roboto',
        top: '0px',
        right: '10px',
        'margin-bottom': '0px',
        paddingLeft: '0px',
        paddingRight: '0px',
        paddingTop: '0px',
        paddingBottom: '0px',

      },

      //step: 1
    },
   //lineWidth: 0,
 //   minorGridLineWidth: 0,
//    gridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
   // pointWidth: 0.1

  },
  yAxis: {
    gridLineWidth: 0,
    min: 0,
    title: {
      text: ''
    },
    gridLineColor: '#ffffff',
    labels: {
      enabled: false

    },
    minorGridLineWidth: 0


  },

  plotOptions: {
    bar: {
      pointPadding: 0,
      borderWidth: 0,
		 	groupPadding: 0.01
    },

    series: {
      stacking: 'normal',
   //   pointWidth: 20,
      dataLabels: {
        enabled: true,
        color: 'white'
      }
    }

  },
  series: [{
    name: 'Yet-toStart',
    data: [1,1,1,1]
  }, {
    name: 'Completed',
    data: [2,2,2,2]
  }, {
    name: 'Inprogress',
    data: [3,3,3,3]
  }, {
    name: 'Ongoing',
    data: [4,4,4,4]
  }]
};
$(function() {
  $('#container2').highcharts(options)
});