JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var chart = c3.generate({
    padding: {
        top: 40,
        right: 100,
        bottom: 40,
        left: 100,
    },    
    data: {
        x: 'x',
        columns: [
            ['x',
            new Date('2013-01-01T00:30'),
            new Date('2013-01-01T01:30'),
            new Date('2013-01-01T02:30'),
            new Date('2013-01-01T03:30')],
            ['data1', 30, 200, 100, 400]
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%H:%M',
                values: [
                    new Date('2013-01-01T00:00'), 
                    new Date('2013-01-01T01:00'), 
                    new Date('2013-01-01T02:00'),
                    new Date('2013-01-01T03:00'),
                    new Date('2013-01-01T04:00')
                ],
                rotate: -90
            },
            height: 50
        }
    }
});