JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

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

JavaScript

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 20, 50, 40, 60, 50],
            ['data2', 200, 130, 90, 240, 130, 220]
        ],
        type: 'bar',
        colors: {
            data1: '#5283bf',
            data2: '#8AD2B3'
        },
        color: function (color, d) {
            // d will be 'id' when called for legends
            return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
        }
    },
    bar: {
        space: 0.8,
        width: {
            ratio: 0.1 
        }
    }
});