JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>

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

CSS

#container {
	max-width: 800px;
	min-width: 380px;
	margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'variwide'
    },

    title: {
        text: 'Verdeling DBCs type per specialist'
    },

    xAxis: {
        type: 'category',
        min: 0,
        max: 1,
        scrollbar: {
          enabled: true,
          showFull: false
        }
    },
    
    yAxis: {
    	max: 100,
    },

    legend: {
        enabled: true,
        reversed: true
    },
 plotOptions: {
        variwide: {
            stacking: undefined,}},
    series: [ {
        name: 'Series C',
        data: [
            ['A', 10, 150],
            ['B', 25, 120],
            ['C', 5, 20],
        ],
        tooltip: {
            pointFormat: 'Type C: <b>{point.y}%</b><br>' +
                 'Total # DBCs: <b> {point.z} </b><br>'
        },
       // colorByPoint: true
    },{
        name: 'Series B',
        data: [
            ['A', 39.8, 150],
            ['B', 33, 120],
            ['C', 6, 20],
        ],
        tooltip: {
            pointFormat: 'Type B: <b>{point.y}%</b><br>' +
                 'Totaal # DBCs: <b> {point.z} </b><br>'
        },
       // colorByPoint: true
    },{
        name: 'Series A',
        data: [
            ['A', 50.2, 150],
            ['B', 42, 120],
            ['C', 89, 20],

        ],
        tooltip: {
            pointFormat: '{point.series.name}: <b>{point.y}%</b><br>' +
                'Total # DBCs: <b> {point.z} </b><br>'
        },
       // colorByPoint: true
    }]
});