Custom themes for dojox charting

171 views Asked by At

I am loading a webmap ID and I have 2 charts in a feature_layer popup. I would like to change the charts themes with something simple like:

colors: ["#00ff78", "#7f0043", "#8ecfb0", "#f8acac", "#cc4482"] 
colors: ["#57808f", "#506885", "#4f7878", "#558f7f", "#508567"]

Can I code that inside my .html ? My web app is available on JS Bin. Thank you, Michelle.

1

There are 1 answers

2
GibboK On BEST ANSWER

You could use the following CSS which will override the inline style for you chart (SVG) elements.

The selector says, select child x of a decedent of an svg group and change its fill color.

http://jsbin.com/lapefab/edit?html,css,output

g > path:nth-of-type(1){
  fill: #FAEBD7;
}

g > path:nth-of-type(2){
  fill: #8A2BE2;
}

g > path:nth-of-type(3){
  fill: #7FFF00;
}

I would suggest to assign IDs to you charts so you can have full control on where and how applying your styles. Example:

 #yourChart > path:nth-of-type(1){
      fill: #FAEBD7;
    }

 #yourChart > path:nth-of-type(2){
      fill: #8A2BE2;
 }

 #yourChart > path:nth-of-type(3){
      fill: #7FFF00;
 }