Minimal Doughnut Chart With JavaScript And SVG – donut-chart.js

Preview:

Description:

donut-chart.js is a small and easy JavaScript library which utilize SVG to draw dynamic doughnut/ring charts on the web app.

Supports all modern web browsers which support SVG element.

How to use it:

Create an HTML element on which you want to draw the doughnut chart.

<div id="mychart"></div>

Place the JavaScript file ‘donut-chart.js’ at the bottom of the webpage.

<script src="donut-chart.js"></script>

Initialize the doughnut chart and define the data set in the JavaScript as these:

var myChart = new DonutChart(document.getElementById("mychart"), {
    items: [
      { label: "A", value: .2 },
      { label: "B", value: .1 },
      { label: "C", value: .5 },
    ]
})

Config the doughnut chart with the following options.

var myChart = new DonutChart(document.getElementById("mychart"), {
    r: 60,
    stroke: 16,
    scale: 100,
    items: [
      { label: "A", value: .2 },
      { label: "B", value: .1 },
      { label: "C", value: .5 },
    ]
})

Apply your own CSS styles to the doughnut chart.

.chart-item-bg { stroke: #ddd }
.chart-item-0 { stroke: #dd0000 }
.chart-item-1 { stroke: #00cc00 }
.chart-item-2 { stroke: #0000ff }

Sometimes you might need to update the data set.

myChart.update({
  items: [
    { label: "D", value: .4 },
    { label: "E", value: .3 },
  ]
})