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", "Balfour Beatty Plc Placements"],
    ["Fit", 187],
    ["Not Fit", 0],
    ["Restrictions", 139],
    
];

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'
});