JSFiddle - React, Tailwind, and code Playground

by knowi

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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    plotOptions: {
        series: {
            centerInCategory: true
        }
    },
    legend: {
        verticalAlign: 'top'
    },
    series: [{
        name: "Forecast",
        color: '#89D4F5',
        data: [43, 74, -26, -35, 88, 34, -45, -35, 43]
    },{
        name: "Actual",
        color: '#BCD759',
        data: [-20, 21, 43, -15, -22, 74, 60, -12, -53]
     },{
        name: "Test",
        color: '#FFBF00',
        data: [20, -21, -34, 51, 22, -47, -6, 21, 35]
    }]
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    plotOptions: {
        series: {
            centerInCategory: true
        }
    },
    legend: {
        verticalAlign: 'top'
    },
    series: [{
        name: "Forecast",
        color: '#89D4F5',
        data: [43, 74, -26, -35, 88, 34, -45, -35, 43]
    },{
        name: "Actual",
        color: '#BCD759',
        data: [-20, 21, 43, -15, -22, 74, 60, -12, -53]
     },{
        name: "Delta",
        color: '#FFBF00',
        data: [-63, -53, 69, 20, -110, 40, 105, 23, -96]
    }]
});