JSFiddle - React, Tailwind, and code Playground

by vasagi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgit.com/highcharts/rounded-corners/master/rounded-corners.js"></script>

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

  title: {
    text: 'Highcharts rounded corners plugin'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },

 series: [
      {
          "name": "Additional Usage",
          "data": [
              7,
              0,
              3,
              5
          ],
          "stacking": "normal",
            borderRadiusTopLeft: '50%',
    			borderRadiusTopRight: '50%',
      },
      {
          "name": "Accumulated Energy Usage",
          "data": [
              25,
              19,
              15,
              18
          ],
          "stacking": "normal",
      },
      {
          "name": "Subscription allowance",
          "data": [
              26,
              18,
              15,
              18
          ],
            borderRadiusTopLeft: '50%',
    borderRadiusTopRight: '50%',
      }
  ]

});