JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

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 grad1 = 
'<linearGradient id="grad1" x1="50%" y1="0%" x2="50%" y2="100%">'+
'  <stop offset="0%" style="stop-color:rgb(196,229,255);stop-opacity:1" />'+
'  <stop offset="23%" style="stop-color:rgb(196,229,255);stop-opacity:1" />'+
'  <stop offset="100%" style="stop-color:rgb(10,149,255);stop-opacity:1" />'+
'</linearGradient>';

var grad2 = 
'<linearGradient id="grad2" x1="0%" y1="100%" x2="100%" y2="0%" >'+
'  <stop offset="0%" style="stop-color:rgb(77,0,0);stop-opacity:1" />'+
'  <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />'+
'  <stop offset="100%" style="stop-color:rgb(77,0,0);stop-opacity:0" />'+
'</linearGradient>'


var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 200, 150, 300, 200],
            ['data2', 400, 500, 250, 700, 300]
        ],
        types: {
            data1: 'area-spline',
            data2: 'area-spline'
        },
        colors: {
            data1: 'url(#grad1)',
            data2: 'url(#grad2)'
        }
    },
    color: {
         // pattern: ['url(#grad1)', '#ffff00']
    },
    oninit: function() {
        this.svg[0][0].getElementsByTagName('defs')[0].innerHTML += grad1 + grad2;
    }

});