nvd3 library, How to customize line chart

Question

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

Extensity

Answer 1

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

Saucy

But... how did you find that ? I can't see any stroke-width class in the code, or in the documentation... – Extensity

@Extensity Using the developer tools of the browser, search through the HTML for the path elements and then use the style inspector. – Saucy

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... – Extensity

developer.mozilla.org/en-US/docs/Web/CSS/Specificity and w3.org/TR/selectors/#specificity A rule of thumb is: Make the rule more specific, so that it targets less elements. – Saucy

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; } – Sonny

@Sonny You should not need the !important, when the selector is more specific as described. – Saucy

Thanks Sirko, I added that to make sure it would overrule, but if you say it's not needed you must be right! – Sonny

Finally! This is the answer I have been hunting for. 🍻 – Atal

@Saucy 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? – Amnesty

@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. – Saucy

@Saucy I'm kind of new to this. Search for what rule? and where? How do I call it? – Amnesty