JSFiddle - React, Tailwind, and code Playground

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

CSS

#container,
#sliders {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

#container {
  height: 400px;
}

JavaScript

$(function() {



  // Set up the chart
  $('#container').highcharts({
    "chart": {
      "marginTop": 15,
    },
    "title": {
      "text": ''
    },

    "xAxis": {
      "categories": ["Consumer", "Corporate", "Home Office", "Small Business"]
    },
    "yAxis": [{
      "opposite": false,
      "maxPadding": 0,
      "minPadding": 0,
      "plotLines": [{
        "value": 299,
        "zIndex": 5,
        "dashStyle": "Solid",
        "width": 1,
        "color": "#000000",

        "label": {
          "text": "299",
          "overflow": "justify",
          "style": {
            "color": "#000000",
            "font-size": "1.143rem",
            "font-family": "Lucida Sans Unicode"
          }
        }
      }],
      "plotBands": [],
      "tickInterval": null
    }],
    "series": [{
      "type": "column",
      dataLabels: {
        enabled: true
      },
      "yAxis": 0,
      "data": [{
        "y": 247
      }, {
        "y": 294
      }, {
        "y": 267
      }, {
        "y": 148
      }]
    }]
  });


});