JSFiddle - React, Tailwind, and code Playground

by ayanev

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: null
    },

    xAxis: [{
          categories: ["Q1'19", "Q2'19", "Q3'19", "Q4'19"],
    },
 ],
    
    yAxis: {
        allowDecimals: false,
        min: 0,
        max: 100,
    },

    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: '#17202A',
                //format: '{y}'
            }
        }
    },

    series: [  {
   		  id: 'Promoter',
        name: 'Promoter',
        data: [65, 60, 60, 60],
        stack: 'signify',
        color: '#92D14F'
    },  {
    	  linkedTo: 'Promoter',
        name: 'Promoter',
        data: [55, 65, 65, 65],
        stack: 'competition',
        color: '#92D14F'
    }, {
        id: 'Passive',
        name: 'Passive',
        data: [25, 30, 30, 30],
        stack: 'signify',
        color: '#C0BBC6'
    },  {
    	  linkedTo: 'Passive',
        name: 'Passive',
        data: [35, 25, 25, 25],
        stack: 'competition',
        color: '#C0BBC6'
    }, {
   		  id: 'Detractor',
        name: 'Detractor',
        data: [10, 10, 10, 10],
        stack: 'signify',
        color: '#F9A9A1'
    },  {
   		  linkedTo: 'Detractor',
        name: 'Detractor',
        data: [20, 10, 10, 10],
        stack: 'competition',
        color: '#F9A9A1'
    },

    ]
});