Set background color in chart

Question

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

I am trying to use 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 does not work, not a single change is visible.

How to set the background color?

Answer 1

I believe that you need to set the properties chart.fill and plotarea.fill.

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

If you execute console.debug(myTheme) , you can check all the properties of the theme object. I usually have to experiment a bit before I find the right ones.

Answer 2

I know this is old, but I had a situation where I was creating a pie chart and I needed to change the background color behind the pie chart. I tried this solution, but it did not work because I did not assign a topic. I create it as follows:

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

My pieString is where I combine my variables together to form a pie. In principle, I combine a number of such statements:

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

I concatenate these lines together and assign them to the pieString variable.

When I set up my schedule, I had a standard white background that does not work well for my color background, since I wanted it to blend. There are two rectangles that make up the background. You can change the back and the back to pieChart.fill = "something" , but the inside has not changed.

How I decided it for me, 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 does not work well on my gray background. After performing my function, it will be changed to transparent.

I am posting this because it took me quite a while to learn how to change this since I have a Dojo for it. I came across this message, but I did not get much help from it, because I did not do the topic.

Answer 3

 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); 

Answer 4

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 gain access to the element and manually change the attribute. This is not a very effective way to do this, but it will do the trick.