Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
You just have to pass "polarArea" 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"] } ] } pol = chart.CreateChart(data, 'polarArea', 0.9, 0.5) lay.AddChild(pol) 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"] } ] } options = { responsive: true, legend: { position: 'right' } } pol = chart.CreateChart(data, 'polarArea', 0.9, 0.5, options) lay.AddChild(pol) 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"] } ] } pol = chart.CreateChart(data, 'polarArea', 0.9, 0.5) lay.AddChild(pol) btn = app.CreateButton("UPDATE DATA") btn.SetOnTouch(UpdateData) lay.AddChild(btn) app.AddLayout(lay) } function UpdateData() { var newData = [ [5, 20, 20, 14, 10] ] pol.updateData(newData) }