# PolarArea Chart Customization

**URL:** <https://discourse.nodered.org/t/polararea-chart-customization/71016>\
**Category:** General\
**Tags:** node-red-dashboard, chart\
**Created:** [21 November 2022 20:36 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016 "2022-11-21T20:36:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dpatel2016](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dpatel2016/32/33730_2.png) [@dpatel2016](https://discourse.nodered.org/u/dpatel2016)\
**Post date:** [21 November 2022 20:36 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016/1 "2022-11-21T20:36:35Z")

</div>

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?

```auto
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

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 November 2022 07:30 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016/2 "2022-11-22T07:30:56Z")

</div>

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](https://www.chartjs.org/docs/2.9.4/axes/styling.html)

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

delete msg.payload
return msg

```

---

<div class="post-metadata">

**Author:** ![dpatel2016](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dpatel2016/32/33730_2.png) [@dpatel2016](https://discourse.nodered.org/u/dpatel2016)\
**Post date:** [22 November 2022 12:25 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016/3 "2022-11-22T12:25:52Z")

</div>

Thank you!

How would you implement the background color and hoverBackgroundColor element?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 November 2022 15:01 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016/4 "2022-11-22T15:01:04Z")

</div>

Don't understand the question.

---

<div class="post-metadata">

**Author:** ![dpatel2016](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dpatel2016/32/33730_2.png) [@dpatel2016](https://discourse.nodered.org/u/dpatel2016)\
**Post date:** [22 November 2022 15:50 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016/5 "2022-11-22T15:50:53Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/abcf74c4339e1db1031e97fce384afffe635bb65.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 November 2022 16:27 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016/6 "2022-11-22T16:27:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 December 2022 16:28 UTC](https://discourse.nodered.org/t/polararea-chart-customization/71016/7 "2022-12-06T16:28:28Z")

</div>

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