JSFiddle - React, Tailwind, and code Playground

by AnnaGerber

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>
<div id="chart2"></div>

JavaScript

var columns = [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 130, 220, 0, 200, 250, 450],
            ['data4', 250, 320, 210, 240, 215, 225],
            ['data5', 430, 500, 400, 280, 290, 350],
            ['data6', 100, 120, 310, 340, 415, 225]
];
var groups = [['data1', 'data2', 'data3', 'data4', 'data5', 'data6']];
var colors = {
        pattern: ['#1789CF', '#5bc0de', '#5cb85c', '#F5B312','#E35E1C','#9e61c8']
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        type: 'area-spline',
        columns: columns,
        groups: groups
    }, 
    color: colors
});
var chart2 = c3.generate({
    bindto:'#chart2',
    data: {
        type: 'area',
        columns: columns,
        groups: groups
    }, 
    color: colors
});