How do you change the chart's background color?

[Cristian Scutaru]

I called $("chart").ejChart({ background: "#FFFF00", ... }) and it works. But the color is not really a plain yellow! 

It looks like another internal parameter (alpha, opacity?) is set by default to something else. 

I don't see any other background color related property in the spec. So what else should I use to get an actual plain yellow?

Thanks,

Cris

[Anandaraj T]

Hi Cristian, 

Thanks for using Syncfusion products. 

As you mentioned, opacity is applied to the chart background by default. We can customize the opacity of chart background using the opacity option in chart border. The default value of opacity is 0.3. 

Since opacity of background color should not be customized through chart border, we have logged an improvement task. This will be included in our upcoming service pack release (Essential Studio 2016 volume 3 Service Pack 1) which is expected to be rolled out by the end of October 2016. 

We have also created a support incident under your direct trac account in the following link for better follow up 

https://www.syncfusion.com/account/login 

Note: The following solution will work up to current version (Essential Studio 2016 Volume 3) and it may break from our next service pack version (Essential Studio 2016 Volume 3 Service Pack 1). 

We have prepared a simple sample to customize the opacity of background color in the following link 

JS Playground Sample link: http://jsplayground.syncfusion.com/5xvtqt03 

Please refer the following code snippet to customize chart background and opacity 

[JS] 

 

$("container").ejChart({ 

 

    //Background color of Chart 

    background: "#FFFF00", 

 

    border: { 

        //Background and border opacity of Chart. Default value is 0.3 

        opacity: 1 

    }, 

 

    //Other chart options 

}); 

Please let us know if you have any concern. 

Regards, 

Anand 

[Jawahar Rajan]

hello 
I would like to set the chart background to match the containing div background
I have tried background-color : transparent and opacity :1 but the default white background is still showing

[Durga Gopalakrishnan]

Hi Jawahar,

We have ensured your reported scenario. Chart background color is applied properly as per behavior. We have attached the sample for your reference. In the sample, we have specified background color for div and chart with border opacity as 1. 

<div id="container" style="background:dodgerblue; border: 2px solid black;height:400px;width:500px"></div>

 $("#container").ejChart(

        {

          background:'dodgerblue',

          border:{opacity:1},
          size: { height: "350", width:"450" },
});

Sample : https://jsplayground.syncfusion.com/tluucylf

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Kevin James]

To change color schemes, switch to a different theme. In Excel, click Page Layout, click the Colors button, and then pick the color scheme you want or create your own theme colors.

[Durga Gopalakrishnan]

Hi Kevin,

We have built-in themes for chart control. You can change the theme color for chart dynamically using chart theme property. Please check with the below documentation link.

UG : https://help.syncfusion.com/js/chart/appearance#built-in-themes

API : https://help.syncfusion.com/api/js/ejchart#members:theme

Please revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.