JSFiddle - React, Tailwind, and code Playground

by karin

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
   chart = new Highcharts.Chart({
     chart: {
       type: 'column',
       renderTo: 'container'
     },
     xAxis: {
       categories: [2000, 2001]
     },
     yAxis: {
       endOnTick: true,
       stackLabels: {
         enabled: true,
         format: '{total:.0f}',
         style: {
           fontWeight: 'bold',
           color: '#4f81bd'
         },
         gridLineColor: '#197F07'
       }
     },
     legend: {
       enabled: true,
       align: 'right',
       layout: 'vertical',
       x: 0,
       verticalAlign: 'bottom',
       y: 0,
       floating: false,
       backgroundColor: 'white',
       borderColor: '#CCC',
       borderWidth: 0,
       shadow: false
     },
     plotOptions: {
       column: {
         stacking: 'normal',
         pointPadding: 0,
         borderWidth: 0,
         dataLabels: {
           enabled: true,
           color: '#fff',
           reserveSpace: false,
           format: '{series.name}'

           // x: 30,
         }
       }
     },
     series: [{
       data: ["name1",[0, 2781]]
     }, {
       data: ["name2",[0, 2616]]
     }, {
       data: ["name3",[1, 4523]]
     }, {
       data: ["name4",[1, 8575]]
     }, {
       data:[ "name5",[0, 9123]]
     }, {
       data:[ "name6",[1, 1256]]
     }]

   });


 });