JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>
JavaScript
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2012-12-28', '2012-12-29', '2012-12-30', '2012-12-31'],
['data1', 100, 230, 300, 330],
['data2', 250, 190, 230, 200],
['data3', 120, 90, 130, 180],
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d',
}
}
}
});
var date = new Date ("2013-01-01");
setInterval(function () {
chart.flow({
columns: [
['x', new Date (date)],
['data1', 200 + (Math.random() * 300)],
['data2', 200 + (Math.random() * 300)],
['data3', 200 + (Math.random() * 300)],
],
duration: 750,
});
date.setDate(date.getDate() + 1);
}, 2000);