javascriptweb-applicationsdojoarcgis-js-apidojox.charting

Custom themes for dojox charting


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.


Solution

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