JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

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

CSS

.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
    shape-rendering: auto;
}

JavaScript

// --------------- Overrides to get rounded corner is bar charts ------------------

c3.chart.internal.fn.additionalConfig = {
    bar_radiusAll: false,
    bar_radius: 5,
    tooltip_format_color: undefined,
    slider_show: false,
    slider_position: 100,
    gauge_angle: 150,        // default gauge arc angle
    gauge_needle_size: 8     // default gauge base circle diameter size
};

c3.chart.internal.fn.redrawArc = function (duration, durationForExit, withTransform) {
    var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main, CLASS = $$.CLASS,
        mainArc;
    mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
        .data($$.arcData.bind($$));
    mainArc.enter().append('path')
        .attr("class", $$.classArc.bind($$))
        .style("fill", function (d) { return $$.color(d.data); })
        .style("cursor", function (d) { return config.interaction_enabled && config.data_selection_isselectable(d) ? "pointer" : null; })
        .style("opacity", 0)
        .each(function (d) {
            if ($$.isGaugeType(d.data)) {
                d.startAngle = d.endAngle = -1 * (Math.PI / 2);
            }
            this._current = d;
        });
    mainArc
        .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
        .style("opacity", function (d) { return d === this._current ? 0 : 1; })
        .on('mouseover', config.interaction_enabled ? function (d) {
            var updated, arcData;
            if ($$.transiting) { // skip while transiting
                return;
            }
            updated = $$.updateAngle(d);
            arcData = $$.convertToArcData(updated);
            // transitions
            $$.expandArc(updated.data.id);
            $$.api.focus(updated.data.id);
            $$.toggleFocusLegend(updated.data.id, true);
            $$.config.data_onmouseover(arcData, this);
        } : null)
        .on('mousemove', config.interaction_enabled ? function...