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',
        rows: [  //'Winter 2007-2008','Winter 2008-2009','Winter 2009-2010'
             ['x','Winter 2007-2008','Winter 2008-2009','Winter 2009-2010'],
             ['2013-01-01',12,30,3],
             ['2013-01-02',123,200,22],
             ['2013-01-03',21,100,54],
             ['2013-01-04',32,400,23],
             ['2013-01-05',12,150,12],
             ['2013-01-06',34,250,15]
        ],
        color: function (color, d) {
            // d will be 'id' when called for legends
            var colors = {
                'Winter 2007-2008': 'red',
                'Winter 2008-2009':'green',
                'Winter 2009-2010':'blue'
            };
            if(typeof d === 'object') {
                return colors[d.id];
            }else {
                return colors[d];
            }
            //return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});