set background color in chart

Question

I am using a theme, but i want to set background color around the chart to white or transparent or something.

I am trying this code:

  var myTheme =  dojox.charting.themes.PlotKit.orange;

  myTheme.fill= "white";

  chart10.setTheme(myTheme);


chart10.addPlot("default", {
    type: "Pie", 
    labelOffset: -30,
    radius: 150,
    startAngle: 45,
    font: "normal normal 10pt Tahoma",
    fontColor: "black",
    labelWiring: "grey",
    labelStyle: "columns",
    htmlLabels: true,
    plotarea: { fill: "#000" }
});

But this code didn't works, none alteration is visible.

How can i set the color background ?

enter image description here

score 8 · Accepted Answer · answered Jan 24 '12 at 13:10

I believe you have to set both the chart.fill and plotarea.fill properties.

  myTheme.chart.fill= "white";
  myTheme.plotarea.fill = "white";

If you do console.debug(myTheme) you can inspect all the properties of the theme object. I usually have to experiment a little before I find the right ones.

score 1 · Answer 2 · answered Jul 24 '14 at 17:28

I know this is old, but I had a situation where I was creating a pie chart and needed to change the background color behind the pie chart. I tried this solution, but it didn't work because I wasn't assigning a theme. I am creating it this way:

var pieChart = new Chart("myDIV");
pieChart.addPlot("default", {type: "Pie"});
pieChart.addSeries("Series A", pieString);

My pieString is where I am combining my variables together to form the pie. Basically, I concatenate a series of statements like this:

{y:200, tooltip: "layer", color:"red", text: "myText"}

I join those strings together and assign it to my pieString variable.

When I set up my chart, I got a standard white background behind it, which doesn't work well for my colored background since I wanted it to blend. There are two rectangles that make up the background. You can change the larger and furthest back one through pieChart.fill = "something", but the inner one didn't change.

The way I solved this for me is like this.

function ClearChartBackground() {
    var sumDivRects = document.getElementById("chartDIV").getElementsByTagName("svg")[0].getElementsByTagName("rect"); //so I am getting the rectangles that are part of my chart div

    var firstRect = sumDivRects[0];
    var secondRect = sumDivRects[1];
    firstRect.attributes.item(1).value = "0";
    secondRect.attributes.item(1).value = "0";
    //this drills down to the 'fill-opacity' attribute that can then be changed to make it transparent


}

As you can see in my photo, the original background was white, which doesn't work well on my gray background. After running my function, it is changed to transparent.

I am posting this because it took me a pretty long time to find out how to change this since I am having Dojo render it for me. I came across this post, but I didn't get much help from it since I wasn't doing a theme.

This is my bad clip showing the difference

score 0 · Answer 3 · answered Dec 28 '16 at 13:33

0

dojox.charting.themes.Claro.chart.fill = "#F1F1F0"
dojox.charting.themes.Claro.plotarea.fill = "#F1F1F0"
dojox.charting.themes.Claro.chart.stroke = "#F1F1F0"

// Set the theme
chart.setTheme(dojox.charting.themes.Claro);

answered Dec 28 '16 at 13:33

Santanu Roy

1

score -2 · Answer 4 · answered May 06 '16 at 16:18

Using Jquery, you can do something like this:

$("#chartNode svg rect:eq(0)").attr("fill", "0");
$("#chartNode svg rect:eq(0)").attr("fill-opacity", "0");

So, basically you are accessing the element and changing the attribute manually. It is not very efficient way to do with, but it will do the trick.

set background color in chart

4 Answers4