Chart background to be same as containing div

[Jawahar Rajan]

I want the chart background to be be the same as the div it is contained in

I have tried background-color ; transparent and opacity:1 but it is till defaulting to the default white background

Any ideas for how to default the chart background to the containing div background

I want to also dynamically update the chart background based on a user selection of a theme

My chart HTML is:

      <ejs-chart #chart align='left' id='chartcontainer' [background]="backgroundForChart()" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'

                 (tooltipRender)='tooltipRender($event)'

                 [tooltip]='tooltip' (load)='load($event)' [chartArea]='chartArea' [width]='width'>

        <e-series-collection>

          <e-series [dataSource]='financialData' type='Line' xName='Dt' yName='PPS' width=2 [marker]='marker'

                    tooltipMappingName='Value'> </e-series>

        </e-series-collection>

      </ejs-chart>

notice for the Background I am calling a function "backgroundForChart"
this custom function return a theme

public backgroundForChart(): Theme {

return this._ixTheme.getActiveTheme()

}

On the first load it set it correctly but if the user changes the theme the change is not reflected in the Chart

does the chart object have a background-color property ?

[Jawahar Rajan]

I was able to resolve this by setting the background for the ejs-chart and ejs-series to transparent

[Durga Gopalakrishnan]

Hi Jawahar,

Greetings from Syncfusion.

We have prepared sample based on your requirement. We can be able to specify the background color for chart and div containing the chart. The dynamic update of background color is applied properly. Please check with below snippet and screenshot.

app.component.ts

<ejs-chart #chart [background]="background"> </ejs-chart>

app.component.html

public background: string ="yellow"; 
public mode(e: Event): void {

        var letters = '0123456789ABCDEF';

        var color = '#';

        for (var i = 0; i < 6; i++) {

          color += letters[Math.floor(Math.random() * 16)];

        }

        this.background = color;

 }

Sample : https://stackblitz.com/edit/angular-soysua

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.