JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script src="http://gabelerner.github.io/canvg/canvg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link rel="stylesheet" href="http://gopeter.de/misc/c3/c3.css">
<script src="http://gopeter.de/misc/c3/c3.js"></script>
<div id="chart"></div>
<button onclick="myFunction()">Save</button>
<header><h1>Canvas:</h1></header>
<canvas id="svg-canvas"></canvas>

JavaScript

var chart = {};
	
	chart = c3.generate({
	bindto: '#chart',
    data: {
        xs: {
            'data1': 'x1',
            'data2': 'x2',
        },
        columns: [
            ['x1', '2013-01-01 03:11:37', '2013-01-02 03:11:37', '2013-02-03 03:11:37', '2013-03-04 03:11:37', '2013-03-05 03:11:37', '2013-04-06 03:11:37'],
            ['x2', '2013-01-04 03:11:37', '2013-01-22 03:11:37', '2013-04-13 03:11:37', '2013-05-04 03:11:37', '2013-05-02 03:11:37', '2013-06-06 03:11:37'],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 20, 180, 240, 100, 190,230]
        ],
		
		xFormat: '%Y-%m-%d %H:%M:%S',
		
		names: {
			data1: 'Success',
			data2: 'Failure',
		 }
    },
	axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d %H:%M:%S',
				count : 5
            }			
        }
    },
	zoom: {
		enabled : true,
		rescale: true,
		extent: [1, 100]
	}
	});
	chart.show(['data2']);
	
	
	
	function myFunction() {
	var $container = $('#chart'),
        // Canvg requires trimmed content
        content = $container.html().trim(),
        canvas = document.getElementById('svg-canvas');

		// Draw svg on canvas
		canvg(canvas, content);
	
	
	
	}