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="chart1"></div>
CSS
.report {
width: 10px;
}
JavaScript
c3.chart.internal.fn.additionalConfig = {
bar_radius: 18
};
c3.chart.internal.fn.isOrderDesc = function () {
var config = this.config;
if(this.isFunction(config.data_order)) {
return false;
}else {
return config.data_order && config.data_order.toLowerCase() === 'desc';
}
};
c3.chart.internal.fn.isOrderAsc = function () {
var config = this.config;
if(this.isFunction(config.data_order)) {
return false;
}else {
return config.data_order && config.data_order.toLowerCase() === 'asc';
}
};
c3.chart.internal.fn.generateDrawBar = function (barIndices, isSub) {
var $$ = this, config = $$.config,
getPoints = $$.generateGetBarPoints(barIndices, isSub);
return function (d, i) {
// 4 points that make a bar
var points = getPoints(d, i),
groups = config.data_groups,
path = '';
// switch points if axis is rotated, not applicable for sub chart
var indexX = config.axis_rotated ? 1 : 0;
var indexY = config.axis_rotated ? 0 : 1;
if(groups && groups.length>0) {
var lastGrps = [],
bar_radius = config.bar_radius;
groups.forEach(function(group){
lastGrps.push(group[group.length-1]);
})
if(lastGrps.indexOf(d.id) > -1 && (config.data_order === null)) {
if(config.axis_rotated) {
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + (points[1][indexX]-bar_radius) + ',' + points[1][indexY] + ' ' +
'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
'L' + points[2][indexX] + ',' + (points[2][indexY]-bar_radius) + ' ' +
'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
}else {
path = 'M ' + points[0][indexX] +...