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: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, -250],
        ],
        type: 'bar'
    }
});

// get the original translate function
var originalTranslate = chart.internal.getTranslate;
chart.internal.getTranslate = function (target) {
    // if we are drawing the x axis
    if (target === 'x')
        // use the y scale to get the y position
        return "translate(" + 0 + "," + this.y(0) + ")"
        else
            // otherwise just call the original function
            return originalTranslate.apply(this, [ target ]);
}
// redraw
chart.flush();