0

I am not clear that how to override nvd3 CSS and apply it to the different line charts.

In Html, there are two div for line plots.

<div id="offsetDiv">
      <div id="plot1" class='with-3d-shadow with-transitions'>
      <svg></svg>
</div>

<div id="offsetDiv">
    <div id="plot1" class='with-3d-shadow with-transitions'>
      <svg></svg>
</div>

In a CSS file, I can modify the value of opacity to apply. Also, I want to have different value to apply another plot.

.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
  fill-opacity: 0.5;
  stroke-opacity: 1;
}

.something-new-class-name {
  fill-opacity: 0;
  stroke-opacity: 0;
}

I tried to put new class name in div, but it doesn't work. Please point out what is wrong.

Thanks,

Karl
  • 329
  • 6
  • 20

1 Answers1

0

Try using chart id, the folowing works for me. 

#growthChart .nv-series-7 .nv-point {
fill-opacity: 0;
stroke-opacity: 1;}

Also check that your css is loaded in the very end, after the nvd3 css, and then check in dev tools if your css is applied or not.

zaini
  • 57
  • 9
  • thanks but it does affect two plots. the question is affecting different opacity to two charts in a single page. @zaini – Karl Jul 27 '15 at 19:59
  • I am guessing now, how about using plot1 and plot2 as ids instead of using plot1 for both divs. And then using ids to apply different css. – zaini Jul 28 '15 at 07:56