Back

UpdateBackgroundColor

Updates the background color of a chart.

myChart.updateBackgroundColor(newColors)

Parameter
An array of color strings array.

Samples

Change Background Color

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: [20, 50, 30, 15, 75],
                    backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
                }
            ]
        }

        options = {
            legend: {
                position: 'right'
            }
        }
        
        pieChart = chart.CreateChart(data, 'pie', 0.9, 0.5, options)
        lay.AddChild(pieChart)

        btn = app.CreateButton("Update Data", 1)
        btn.SetMargins(0, 0.1, 0, 0)
        lay.AddChild(btn)
        btn.SetOnTouch(updateColors)
        
    app.AddLayout(lay)
}

function updateColors()
{
    var newColors = [ 
        ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"]
    ]

    pieChart.updateBackgroundColor(newColors)
}
Copy Run

Change Background Color - More Datasets

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [{
                data: [20, 10, 30, 50, 76],
                backgroundColor: ["#e91e63", "#e91e63", "#e91e63", "#e91e63", "#e91e63"],
                borderWidth: 4
            }, { 
                data: [50, 50, 30, 15, 30],
                backgroundColor: ["#9c27b0", "#9c27b0", "#9c27b0", "#9c27b0", "#9c27b0"],
                borderWidth: 4
            }]
        }

        options = {
            legend: {
                position: 'bottom'
            }
        }
        
        doughnutChart = chart.CreateChart(data, 'doughnut', 0.9, 0.5, options)
        lay.AddChild(doughnutChart)

        btn = app.CreateButton("Update Data", 1)
        btn.SetMargins(0, 0.1, 0, 0)
        lay.AddChild(btn)
        btn.SetOnTouch(updateColors)
        
    app.AddLayout(lay)
}

function updateColors()
{
    var newColors = [ 
        ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"], 
        ["#e91e63", "#009688", "#9c27b0", "#f44336", "#9c27b0"]
    ]

    doughnutChart.updateBackgroundColor(newColors)
}
Copy Run