JSFiddle - React, Tailwind, and code Playground

by woozyking

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>

CSS

#chart{
    width: 150px;
    height: 150px
}

JavaScript

var chart = c3.generate({
    data: {
        columns: [
            [ 'data', 52]
        ],
        type: 'gauge',
    },
    // Needed because the default formatter 
    // rounds values.
    gauge: {
        label: {
            format: function(value) {
                return value.toFixed(2) + '%'; 
            }
        }
    },
    color: {
        pattern: ['#FF0000', '#F6C600', '#60B044'],
        threshold: {
            values: [30, 60, 90]
        }
    }
});