JSFiddle - React, Tailwind, and code Playground

by fekkyDev s

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
      offset: 10,
      lineWidth: 20,
      lineColor: '#494945'
    },
    yAxis: {
      visible: false
    },
    legend: {
      reversed: true,

      verticalAlign: "top"
    },
    plotOptions: {
      series: {
        stacking: 'percent'
      },
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
    series: [{
      name: 'John',
      data: [50]
    }, {
      name: 'Jane',
      data: [48],
      format: '{y}%'
    }, {
      name: 'Joe',
      data: [2]
    }]
  });
});