Back

PolarAreaChart

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.

pol = cht.CreateChart(data, "polarArea", width, height, options);

You just have to pass "polarArea" for the type argument. For data and options arguments, refer to the samples below.

Samples

One Dataset


var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
        {
            label: 'First Dataset',
            data: [2, 5, 3, 15, 10],
            backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
        }
    ]
}
Copy Run

More Dataset


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"]
        }
    ]
}
Copy Run

PolarAreaChart - One Dataset

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)
}
Copy Run

PolarAreaChart - More Datasets

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)
}
Copy Run

PolarAreaChart - Update Data

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)
}
Copy Run