How to change nvd3 chart fill & stroke colors through CSS

Question

I am trying to adjust the colors of nvd3 charts through CSS in SugarCRM. The pie chart colors are declared a bit differently than the other nvd3 charts so I am stuck on how to change them through CSS. Below is a snippet of the html of an nvd3 bar chart with the working CSS. Then there is a snippet of the html of an nvd3 pie chart.

Bar chart html:

<g class="nv-group nv-series-0" fill="#1f77b4" stroke="#1f77b4" style="stroke-opacity: 1; fill-opacity: 1;">

CSS to adjust the color of the bar chart:

         .nv-group.nv-series-0 {
            fill: #2A6EBB;
            stroke: #2A6EBB;
        }

Pie chart html:

< g class="nv-slice nv-series-0">
<path d="M1.055492460015125e-14,-172.375A172.375,172.375 0 1,1 -97.2397105173445,142.32912324434182L0,0Z" style="fill: rgb(31, 119, 180); stroke: rgb(255, 255, 255); stroke-width: 3px; stroke-opacity: 1;">

The colors of the pie chart are declared inside the style attribute in a path tag so I am not sure how to change them through CSS. Any help would be appreciated!

Have you checked this [question ?](http://stackoverflow.com/questions/16191542/how-to-customize-color-in-pie-chart-of-nvd3) — shabeer90, Mar 27 '15 at 16:23
@shabeer90 Thanks, I have. Unfortunately this is in SugarCRM so I do not have access to the function and need to make the adjustment through CSS. — ktomkosk, Mar 27 '15 at 19:59

score 0 · Answer 1 · answered Jul 26 '15 at 20:06

<g stroke="#98df8a" fill="#98df8a" class="nv-slice">

Check it on nvd3 website the color(fill) is in g element.

anyways here is css for your html

g.nv-slice > path{
    fill: #2A6EBB;
    stroke: #2A6EBB;
}

if you want to select n'th element

g.nv-slice:nth-child(n) > path{
    fill: #2A6EBB;
    stroke: #2A6EBB;
}

How to change nvd3 chart fill & stroke colors through CSS

1 Answers1