PolarArea Chart Customization

I am trying the following customization for the PolarArea chart and only the legend part works. Can anyone review the following and tell me why it doesn't work?

msg.ui_control = {
    type: 'polarArea',
    options: {
        legend: {
            display: true,
            position: 'top'
        },
        scales:{
            r:{
                grid: {
                    color:'white'
                    },
                ticks:{
                    display: false
                    },
                pointLabels:{
                    display: false
                    }
            }
        }
    }
}

delete msg.payload
return msg

The chartjs in use is v2.3 something but you have probably found documents for newer stuff.

To get it working use scale property as described here: Styling · Chart.js documentation

msg.ui_control = {    
    options: {
        legend: {
            display: true,
            position: 'top'
        },
        scale:{
            display:true,
            gridLines: {
                color: "#00FF00"               
            },
            ticks: {
                display: false
            }            
        }
    }
}

delete msg.payload
return msg

Thank you!

How would you implement the background color and hoverBackgroundColor element?

Don't understand the question.

Similar to gridlines, I want to modify the background colors of the regions and background color when hovering over them.

Those are properties of the dataset. You cannot reach them via ui_control message. To modify them, you'll need to create the chart from scratch using the ui_template node. (Or template node feeding ui_template).

You can find many examples here in forum where chart is created that way but I'm afraid none of them will have Polar Area Chart. But anyway - it is basically same just you'll need to follow documents to create needed structure for polar chart.

It takes kind of intermediate understanding of front-end codding.