JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>

JavaScript

var full = [
    ['x', 'Tier I', 'Tier II', 'Tier III'],
    ['Apr 2015', 6, 13, 4],
    ['May 2015', 3, 3, 5],
    ['Jun 2015', 61, 0, 4],
    ['Jul 2015', 4, 0, 8]
];

var chart = c3.generate({
    data: {
        x: 'x',
        columns: full,
        type: 'bar',
    },
    bar: {
        width: {
            ratio: 0.8 // this makes bar width 50% of length between ticks
        }
    },
    axis: {
        x: {
            type: 'category' // this is needed to load string x value
        }
    },
    bindto: '#chart'
});