JSFiddle - React, Tailwind, and code Playground

by Harsh Bhatnagar

HTML

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

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

CSS

.highcharts-root .highcharts-scrollbar{
  transform: translate(60px, 50px);
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        marginLeft: 150
    },
    title: {
        text: 'Usage Of April'
    },
    xAxis: {
        type: 'category',
        title: {
            text: null
        },
        min: 0,
        max: 4,
        scrollbar: {
            enabled: true
            width:5
        },
        tickLength: 0
    },
    yAxis: {
        min: 0,
        max: 1200
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            },
        },
        series: {
                point: {
                    events: {
                        click: function(event) {
                            console.log(this);
                            this.update({ color: 'green' }, true, false);
                            }
                    }
                }
            }
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Credits',
        data: [
            ["verifier1", 1000],
            ["verifier2", 575],
            ["verifier3", 523],
            ["verifier4", 427],
            ["verifier5", 399],
            ["verifier6", 309],
            ["verifier7", 278],
            ["verifier8", 239],
            ["verifier9", 235],
            ["verifier10", 203]
        ]
    }]
});