JSFiddle - React, Tailwind, and code Playground

by stuarthwoods

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Channel Mix'
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ['Amazon US', 'Amazon UK', 'eBay Fixed Price US', 'Walmart', 'Other'],
            title: {
                text: null
            },
            min: 0,
            max: 2
        },
        yAxis: {
            min: 0,
            max:100,
            title: {
                text: 'GMV (percentage)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            floating: false,
            shadow: true
        },
        series: [{
            name: 'Your Channels',
            data: [49, 11, 27, 10, 3]
        }, {
            name: 'Competing Sellers',
            data: [40, 24, 16, 13, 7]
        }],
	    scrollbar: {
            enabled:true,
			barBackgroundColor: 'silver',
			barBorderRadius: 7,
			barBorderWidth: 0,
			buttonBackgroundColor: 'gray',
			buttonBorderWidth: 0,
			buttonArrowColor: 'white',
			buttonBorderRadius: 7,
			rifleColor: 'white',
			trackBackgroundColor: 'white',
			trackBorderWidth: 1,
			trackBorderColor: 'silver',
			trackBorderRadius: 7
	    },
        colors: ['#F78900', '#7EAEE8']
    });
});