8

I'm using nvd3 to draw some stats in my app. I would like to increase the thickness of the line in my charts. How can it be possible ?

Thanks

Sirko
  • 72,589
  • 19
  • 149
  • 183
psv
  • 3,147
  • 5
  • 32
  • 67

1 Answers1

18

Search for the class, that is responsible for the current stroke-width of your lines. Then insert a rule, that is slightly more specific and change the value for stroke-width there.

In this example from the nvd3 examples, the stroke-width is set by a rule like this:

.nvd3 .nv-groups path.nv-line

So we create a matching rule, which is slightly more specific, e.g.:

.nvd3 g.nv-groups path.nv-line

and attach a new value for stroke-width with it:

.nvd3 g.nv-groups path.nv-line {
  stroke-width: 5px;
}
Sirko
  • 72,589
  • 19
  • 149
  • 183
  • 1
    But... how did you find that ? I can't see any stroke-width class in the code, or in the documentation... – psv Jul 24 '14 at 09:35
  • @psv Using the developer tools of the browser, search through the HTML for the path elements and then use the style inspector. – Sirko Jul 24 '14 at 09:39
  • 1
    Okay, and how do you know that we just have to add "g" to the class when we want to override it ? I still not understand that... – psv Jul 24 '14 at 09:45
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity and http://www.w3.org/TR/selectors/#specificity A rule of thumb is: Make the rule more specific, so that it targets less elements. – Sirko Jul 24 '14 at 10:06
  • Very useful. Following the same, I discovered: ``.nvd3 g.nv-groups .nv-point { stroke-opacity: 1!important; stroke-width: 2px!important; fill-opacity: 1!important; }`` – PatrickT Jan 16 '15 at 21:29
  • @PatrickT You should not need the `!important`, when the selector is more specific as described. – Sirko Jan 16 '15 at 21:33
  • Thanks Sirko, I added that to make sure it would overrule, but if you say it's not needed you must be right! – PatrickT Jan 16 '15 at 21:35
  • Finally! This is the answer I have been hunting for. – Wray Bowling Feb 17 '15 at 16:30
  • @Sirko I see the css class containing the plots in the page inspector, but I can't find anything of the sort of `.nvd3 .nv-groups path.nv-line` on any CSS file in my site. I have an angular controller with the options for the plots, is there any way I can modify the width there? – alonso s Oct 03 '17 at 18:46
  • @alonsos As said in the answer: search for the rule, that currently sets the value you want to change. The rule may be different for you, but there should be one. Then make a rule that is slightly more specific and override the value. – Sirko Oct 03 '17 at 20:17
  • @Sirko I'm kind of new to this. Search for what rule? and where? How do I call it? – alonso s Oct 05 '17 at 19:47