C3.js donut chart

Donut chart with the C3.js adapter

by nimishgoel056

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<link rel="stylesheet" href="http://c3js.org/css/c3-b03125fa.css">
<div id="chart" style="width: 165px; height: 165px"></div>

CSS

.c3-chart-arc text {
    fill: #333;
    font-size: 15px;
}
.c3-chart-arc path {
    stroke: white;
    stroke-width: 2px;
}

JavaScript

var loc = d3.locale({
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["R$", ""],
  "dateTime": "%a %b %e %X %Y",
  "date": "%m/%d/%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  "shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  "shortMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
});
var fmtPercent = loc.numberFormat('.1%');
var fmtNumber = loc.numberFormat('d');

var chart = c3.generate({
    padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    },
    data: {
        columns: [
            ['Vermelho', 7],
            ['Amarelo', 12],
            ['Verde', 83],
        ],
        colors: {
            Vermelho: '#ef6544',
            Amarelo: '#FFE500',
            Verde: '#8CE08C'
        },
        type : 'donut'
    },
    donut: {
        title: "Infrações",
        label: {
        	threshold: 0.03,
            format: function (value, ratio, id) {
                return d3.format('%')(ratio);
            }
        },
        width: 40
    },
    tooltip: {
        format: {
            value: function (value, ratio, id) {
                return value + ' (' + d3.format('%')(ratio) + ')';
            }
        }
    },
    legend: {
        show: false
    }
    
});