JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<!--https://stackoverflow.com/questions/30183206/show-color-thresholds-in-c3-js-gauge_-->
<div id="chart"></div>

JavaScript

var chart = c3.generate({
    data: {
        columns: [
            [ 'data', 55 ]
        ],
        type: 'gauge',
    },
    color: {
        pattern: ['#FF0000', '#F6C600', '#60B044'],
        threshold: {
            values: [30, 60, 90]
        }
    },
    tooltip: {
    	show: false
    }
});

var ticksValues = Array.apply(null, {length: 100}).map(Number.call, Number);

var ticks = d3.select('.c3-chart-arcs')
        .append('g')
        .classed('ticks', true)
        .selectAll("line")
        .data(ticksValues).enter()
        .append("line")
        .attr("x1", 0)
        .attr("x2", 0)
        .attr("y1", -chart.internal.radius+8)
        .attr("y2", -chart.internal.radius)
        .attr("transform", function (d) {
            var min = chart.internal.config.gauge_min,
                max = chart.internal.config.gauge_max,
                ratio = d / (max - min),
                rotate = (ratio * 180) - 90;
            return "rotate(" + rotate + ")";
        })
        .attr('data-reached', function(d){ 
            var val = chart.internal.data.targets[0].values[0].value;
            return d < val ? 'yes' : 'no';
        });