JSFiddle - React, Tailwind, and code Playground

by JongMin Han

HTML

<script src="http://gopeter.de/misc/c3/c3.js"></script>
<link rel="stylesheet" href="http://gopeter.de/misc/c3/c3.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>

JavaScript

var chart = c3.generate({
    bindto:'#chart',
    data: {
        columns: [
            ['data1', -30, 200, 200, 400, -150, 250],
            ['data2', 130, 100, -100, 200, -150, 50],
            ['data3', -230, 200, 200, -300, 250, 250]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2']
        ]
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

setTimeout(function () {
    chart.groups([['data1', 'data2', 'data3']])
}, 2000);

setTimeout(function () {
    chart = c3.generate({
    	data: {
            columns: [
                ['data1', 30, 20, 50, 40, 60, 50],
                ['data2', 200, 130, 90, 240, 130, 220],
                ['data3', 300, 200, 160, 400, 250, 250],
                ['data4', 200, 130, 90, 240, 130, 220],
                ['data5', 130, 120, 150, 140, 160, 150],
                ['data6', 90, 70, 20, 50, 60, 120],
            ],
            type: 'bar',
            types: {
                data3: 'spline',
                data4: 'line',
                data6: 'area',
            },
            groups: [
                ['data1','data2']
            ]
        }
    });
}, 4000);