backgroundColor: String

Sets the background color of entire Chart Area. Values can be “HTML Color Name”, “hex code” or “rgba values”

Default: “white”
Example: “yellow”, “#F5DEB3”..
Notes
  • You can remove background color by setting it to null.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 backgroundColor: "#F5DEB3"
 .
 . 
});
chart.render();
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

16 Comments

  2. Sunil Urs says:

    Mythique,

    You are probably using an older version of CanvasJS – that bug has been fixed. Please download the latest version and it should work fine.

    • Sunil Urs says:

      It is not available directly as part of the API but you can do the same in two steps.

      1. Set backgroundColor property of chart to null or empty string “”
      2. Set background-image of chart container using CSS.

      • raju says:

        Hi Sunil garu .. in this pieChart first time its loading the percent value .. and when i do second it will not updating could you please tell me the solutions… if you want check this i will give credentials ……..

        webdata1 = parseInt((parseInt(webdata[0].ContentCount) / totalCount) * 100);

        var webdata2=0;
        webdata2 = parseInt((parseInt(webdata[1].ContentCount) / totalCount) * 100);
        $(‘#demo-pie-2’).attr(‘data-percent’, webdata2);
        window.chart2=webdata2;
        $(‘#WTa2’).text(webdata[1].WebSite);
        $(‘#WTa2’).attr(“href”, ‘@Url.Action(“ContextIndex”,”Context”)?ContentDetail=’ + window.searchterm + ‘&LastViewType=’ + window.Lastview + ‘&websitetype=’ + window.Websitetype + ‘&IsTrackedTerm=’ + window.Istrackedterm + ‘&SubsearchContent=’ + Subsearchterm + ‘&getRssFeedLinkid=’ + webdata[1].RssFeedLinkID);
        $(‘#WTa2’).attr(“Title”,webdata[1].WebSite);

        $(‘#demo-pie-2’).pieChart({
        barColor: ‘#FACB07’,
        trackColor: ‘#eee’,
        lineCap: ‘butt’,
        lineWidth: 12,
        onStep: function () {
        $(this.element).find(‘.pie-value’).text(Math.round(window.chart2));
        }
        });

  5. manimaran.S says:

    In pie chart, i cant able to override background color,,,its showing black color only…,i tried below propery
    backgroundColor: “#F5DEB3”..any solution to add custom background color for pie chart…

    • Vishwas R says:

      Debasish,
      Yes , it supports transparent background. You can achieve this by setting backgroundColor: “transparent”.

  8. raju says:

    I think you are not getting my feeling … ok i will send website with credentials once you will check please for me then you will get an idea …

    divewebapp.azurewebsites.net

    name: Sekhar
    pwd: 123

    problem : Web Trafic graps : if u check you will get an idea

  9. Shania Twain says:

    Hi, is there any way of colouring the chart area in different colours? I would like to colour above 0 on the y axis in one colour and below 0 in another. Thanks. PS superb library, thanks!

If you have any questions, please feel free to ask in our forums. Ask Question