EJs-Chart not taking css variable color in Canvas mode

[Manoj]

Hi Team,

we are getting background as black when we are rendering chart in canvas mode and have give background as css variable. though the variable is pointing to white. working fine when enableCanvas is false.

Please find below code

     background='var(--element-base-1)'

[enableCanvas]="true" 

<ejs-chart #chartComponent [id]="WidgetElementId"   [enableCanvas]="true" align='center' [primaryXAxis]='widget.PrimaryXAxis'

                [primaryYAxis]='widget.PrimaryYAxis' [legendSettings]='widget.LegendSettings' [tooltip]='widget.Tooltip'

                [title]='widget.ChartName' [chartArea]='widget.ChartArea' [border]='widget.Border'

                width='{{widget.Width}}' height='{{widget.Height}}' [palettes]='widget.Colorpalette'

                background='var(--element-base-1)' [isResponsive]="true">

                <e-series-collection>

                    <e-series *ngFor="let trace of widget.Traces" [dataSource]='trace.Chart.Data'

                        type='{{trace.Chart.ChartTypeName}}' xName='{{trace.Chart.XAxisData}}'

                        yName='{{trace.Chart.YAxisData}}' name='{{trace.DataPoint.Description}}'

                        [marker]='trace.Chart.Marker'></e-series>

                </e-series-collection>

            </ejs-chart>

[Durga Gopalakrishnan]

Hi Manoj, 

Greetings from Syncfusion. 

We have considered this as bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 3^rd August 2021. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 

 

Feedback Link : https://www.syncfusion.com/feedback/27254/ 

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Manoj, 

  

We have noted that, by default assigning color using css variable is not applied for canvas element itself. We have posted the question in forum regarding this scenario. We have attached the tested sample in both canvas and svg mode.  

  

Canvas : https://www.w3schools.com/code/tryit.asp?filename=GSWU1UCQ3KQQ 

SVG : https://www.w3schools.com/code/tryit.asp?filename=GSWWUMX521YR 

  

We will let you know once we find the solution for the issue.  

  

Regards, 

Durga G