JSFiddle - React, Tailwind, and code Playground

by Manuel Guilbault

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="chart"></div>

CSS

.c3-xgrid-line.dashed-line line,
.c3-ygrid-line.dashed-line line
{
  stroke-dasharray: 5,5;
}

.video-1, .video-1 line {
  stroke: #1f77b4;
  opacity: 0.7;
}

.video-2, .video-2 line {
  stroke: #ff7f0e;
  opacity: 0.7;
}

JavaScript

var chart = c3.generate({
    bindto: '#chart',
    data: {
    	x: 'x',
      columns: [['x']]
    },
    point: {
        show: false
    },
    axis: {
    	x: {
        type: 'timeseries',
        tick: {
          format: '%e %b'
        }
      },
      y: {
      	tick: {
          format: d3.format(",")
        },
      	label: {
      		text: 'Views',
          position: 'outer-top'
        }
      }
    }
});
setTimeout(function() {
	chart.axis.max({ 'y': 10000 });
	chart.ygrids([{ value: 10000, text: 'Objective', position: 'start', class: 'dashed-line' }]);
  chart.groups([['video-1', 'video-2']]);
  chart.data.names({
    'video-1': 'Video #1',
    'video-2': 'Video #2'
  });
  chart.load({
    columns: [
      ['x', '2009-01-01', '2009-01-02', '2009-01-03', '2009-01-04', '2009-01-05'],
      ['video-1', 0, 200, 1000, 1500, 5000],
      ['video-2', 0, 0, 0, 500, 2000]
    ],
    types: {
      'video-1': 'area-spline',
      'video-2': 'area-spline'
    }
  });
  chart.xgrids([
  	{ value: '2009-01-02', text: 'Video #1 published', position: 'end', class: 'dashed-line video-1' },
    { value: '2009-01-04', text: 'Video #2 published', position: 'end', class: 'dashed-line video-2' }
  ]);
}, 1000);