JSFiddle - React, Tailwind, and code Playground

by imrankhan123

HTML

<script src="http://c3js.org/js/d3-3.5.0.min-3b564392.js"></script>
<script src="http://c3js.org/js/c3.min-3c814909.js"></script>
<link rel="stylesheet" href="http://c3js.org/css/c3-b03125fa.css">
<div id="chart"></div>

CSS

.c3-event-rects{
    fill-opacity: 1!important;
}
.c3-event-rect{
    fill:#ccc;
}
.c3-event-rect.c3-event-rect-0{
    fill:#F0F4C3;
}
.c3-event-rect.c3-event-rect-1{
    fill:#8BC34A;
}
.c3-event-rect.c3-event-rect-2{
    fill:#00BCD4;
}

JavaScript

c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['data', 30, 200, 100, 400, 150, 250, 40, 134, 60],
        ],
        types: {
            data: 'area'
        }
    }
});