JSFiddle - React, Tailwind, and code Playground

by danmana

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<table><tr><td>
<div id="container1-small" style="height: 300px"></div>
<div id="container2-small" style="height: 300px"></div>
<div id="container3-small" style="height: 300px"></div>
    </td><td>
<div id="container1" style="height: 300px"></div>
<div id="container2" style="height: 300px"></div>
<div id="container3" style="height: 300px"></div>
    </td></tr></table>

CSS

table {
    width : 100%;
}

td {
    width:50%;
}

JavaScript

var data = [1, 0, 0, 1, 1, 0, 1],
    i, seriesLarge = [], series;
for (i = 0; i < 150; i++) {
    seriesLarge.push({
        color: '#789AB7',
        data: data
    });
}

series = seriesLarge.slice(0,3);

var cfg = {
    chart: {
        defaultSeriesType: 'column',
        borderWidth: 1
    },
    xAxis: {
        allowDecimals: false
    },
    yAxis: {
        allowDecimals: false,
        endOnTick: true
    },
    plotOptions: {
        shadow: false,
        series:{            states: {
                hover: {
                    color: '#cccccc'
                }
            }
},
        column: {
            shadow: false,
            stacking: 'normal'
        }
    },
    legend: false
};

new Highcharts.Chart($.extend(true, {}, cfg, {
    title: {
        text: 'White border (small)'
    },
    chart: {
        renderTo: 'container1-small'
    },
    series:series
}));
new Highcharts.Chart($.extend(true, {}, cfg, {
    title: {
        text: 'White border (large)'
    },
    chart: {
        renderTo: 'container1'
    },
    series:seriesLarge
}));
new Highcharts.Chart($.extend(true, {}, cfg, {
    title: {
        text: 'Gray border (small)'
    },
    chart: {
        renderTo: 'container2-small'
    },
    plotOptions: {
        column: {
            borderColor: '#ddd'
        }
    },
    series : series
}));
new Highcharts.Chart($.extend(true, {}, cfg, {
    title: {
        text: 'Gray border (large)'
    },
    chart: {
        renderTo: 'container2'
    },
    plotOptions: {
        column: {
            borderColor: '#ddd'
        }
    },
    series : seriesLarge
}));
new Highcharts.Chart($.extend(true, {}, cfg, {
    title: {
        text: 'No border (small)'
    },
    chart: {
        renderTo: 'container3-small'
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    }
    ,series : series
}));new Highcharts.Chart($.extend(true, {}, cfg, {
    title: {
        text: 'No border (large)'
    },
    chart:...