PolarArea Chart Customization

General
,
1

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
2

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
3

Thank you!

How would you implement the background color and hoverBackgroundColor element?

4

Don't understand the question.

5

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

image
image1071×618 31.2 KB

6

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.

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.