Chart.js: radar || polarArea chart -TypeError: Cannot set property 'backdropColor' of undefined

Expected Behavior

There should be a backgroundColor /backdropColor Chart.default property for the scale/ticks options.

Current Behavior

I can change the font color with fontColor only but not the background.

Chart.defaults.ticks.backgroundColor = 'transparent'
Chart.defaults.ticks.backdropColor = 'transparent'

Error:

Render Graph Error on polarArea :  TypeError: Cannot set property 'backgroundColor' of undefined
Render Graph Error on radar :  TypeError: Cannot set property 'backgroundColor' of undefined
Render Graph Error on radar :  TypeError: Cannot set property 'backdropColor' of undefined

I am trying to display a radar || polarArea chart on a page with a dark background.

Thank you!

Possible Solution

I’m looking for a way to set the background color via the global.default settings for the ticks in radar and polarArea. You can use the options, but I would always have to do this explicitly for all displays. It would be easier for me if I could do this with the global settings.

Environment

Chart.js version: “chart.js”: “^2.9.4”
Browser name and version: Chrome Version 86.0.4240.80 (Offizieller Build) (x86_64)

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 24 (11 by maintainers)

Most upvoted comments

@etimberg

Inside the shadowroot, I would make sure that there’s a div before the canvas. The sizing goes really bad when inside the shadowroot directly.

Yes there is a div before the canvas

<ha-card id="card-cjv4hls21" class="type-custom-chart-card">
    <div class="card-header" style="padding-bottom: 0px !important;">
           <ha-icon icon="mdi:nutrition" style="position: relative; top: -4px; padding: 0px 12px 0px 4px;"></ha-icon>
           <span><!---->Makro Nährstoffe<!----></span>
    </div>
    <div id="content-cjv4hls21" style="height: 240px; width: 100%;">
          <canvas id="chart-cjv4hls21" height="240" width="352" 
                        style="user-select: none; display: block; 
                        box-sizing: border-box; width: 352px; height: 240px;">
          </canvas>
    </div>
</ha-card>

zibous on Oct 30, 2020