The same as the pie chart, doughnut charts are also one of the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. They are excellent at showing the relational proportions between data. Unlike the pie chart, doughnut charts has inner radius cut-off.
You just have to pass "doughnut" for the type argument. For data and options arguments, refer to the samples below.
Samples
var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'First Dataset', data: [2, 5, 3, 15, 10], backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] } ] }
var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'First Dataset', data: [2, 5, 3, 15, 10], backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] }, { label: 'Second Dataset', data: [10, 20, 12, 5, 10], backgroundColor: ["#FB8C00", "#AFB42B", "#29B6F6", "#3F51B5", "#D81B60"] } ] }
app.LoadPlugin('ChartJS') function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout('Linear', 'VCenter, FillXY') data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'First Dataset', data: [2, 5, 3, 15, 10], backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] } ] } dnt = chart.CreateChart(data, 'doughnut', 0.9, 0.5) lay.AddChild(dnt) app.AddLayout(lay) }
app.LoadPlugin('ChartJS') function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout('Linear', 'VCenter, FillXY') data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'First Dataset', data: [2, 5, 3, 15, 10], backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] }, { label: 'Second Dataset', data: [10, 20, 12, 5, 10], backgroundColor: ["#FB8C00", "#AFB42B", "#29B6F6", "#3F51B5", "#D81B60"] } ] } dnt = chart.CreateChart(data, 'doughnut', 0.9, 0.5) lay.AddChild(dnt) app.AddLayout(lay) }
app.LoadPlugin('ChartJS') function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout('Linear', 'VCenter, FillXY') data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Uploads', data: [2, 5, 3, 15, 10], backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] } ] } dnt = chart.CreateChart(data, 'doughnut', 0.9, 0.5) lay.AddChild(dnt) btn = app.CreateButton("UPDATE DATA") btn.SetOnTouch(UpdateData) lay.AddChild(btn) app.AddLayout(lay) } function UpdateData() { var newData = [ [5, 20, 20, 14, 10] ] dnt.updateData(newData) }