We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How do you change the chart's background color?

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?


5 Replies

AT Anandaraj T Syncfusion Team October 19, 2016 07:23 AM UTC

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 

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 

    //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. 


JR Jawahar Rajan June 23, 2022 04:48 PM UTC

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

DG Durga Gopalakrishnan Syncfusion Team June 24, 2022 02:05 PM UTC

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>
          border:{opacity:1},          size: { height: "350", width:"450" },});
Please let us know if you have any concerns.
Durga Gopalakrishnan.

KJ Kevin James September 5, 2022 01:22 PM UTC

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.

DG Durga Gopalakrishnan Syncfusion Team September 6, 2022 12:03 PM UTC

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.


Durga Gopalakrishnan.

Live Chat Icon For mobile
Up arrow icon