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.
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;
}