JSFiddle - React, Tailwind, and code Playground

by Danielle Parkinson

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            width: 1040,
            height: 380,
            color:'#fff'
           
        },
        xAxis: {
       
            categories: ['Jan 2015', 'Feb 2015', 'Mar 2015', 'Apr 2015', 'May 2015', 'Jun 2015', 'Jul 2015', 'Aug 2015', 'Sep 2015', 'Oct 2015', 'Nov 2015', 'Dec 2015']},
        yAxis: {
            min: 0,
            
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            },
            },
            legend: {
            		layout: 'horizontal',
                borderWidth: 0,
                itemStyle: {
                    fontWeight: 'normal'
                }
            },
            
     
        series: [{
        		color: '#282b69',
            name: 'Branch Unit',
            data: [5, 3, 4, 5, 2, 4, 3, 5, 4,]
        }, {
        		color: '#de2a26',
            name: 'Branch Overall',
            data: [2, 2, 3, 4, 3, 4, 4, 2, 7,]
        }, {
            color: '#2c79be',
            name: 'Branch Overall Target',
            data: [3, 4, 4, 2, 5, 4, 3, 2, 6,]
         }]
    });
});