How to make a unique line thinner using NVD3


Tags: javascript,css,css3,d3.js,nvd3.js

Problem :

Good day. I have a Line Chart from NVD3 where there's 4 lines on the chart. I have it populating just fine. However, I would like one of those lines to be thinner than the rest.

When I go to the nvd3.CSS; the group class represents for all the lines so when I change the stoke-width; it does it for all. When I inspected the elements, it shows that each line does have a unique 'series class' but I can't seem to call it right to make the change for a single line. I would like the series-2 in the group to have the thinner stroke-wdith. Any sugguestion?

How do you make a single line thin with respect to its series while making the others the standard group 'stroke-width'?

.nvd3 g.nv-groups path.nv-line { // the group lines that apply to all
  stroke-width: 9px;
}
.nvd3 g.nv-groups path.nv-series-2{  // the single line i am trying to make thinner
     stroke-width: 1px;
 }


Solution :

If you want to walk the entire selection tree, it would be:

.nvd3 g.nv-groups g path.nv-line {
  stroke-width: 9px;
}

.nvd3 g.nv-groups g.nv-series-2 path.nv-line {
  stroke-width: 1px;
}

    CSS Howto..

    CSS: how to “plot” invisible text over an image?

    JQuery: how to make this variable negative before declaring it as a CSS value?

    How does CSS works under the hood? [closed]

    How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

    how can i position text to either side of an image in html5

    How do I change the alignment of my search box?

    How to show red border at Invalid Input Box after clicking Submit button with angularjs

    How to align item to the very bottom within flexible box layout column?

    How do I make a line break between divs inside a box?

    Trying to show two different images depending on two media queries

    How to process which button is selected in an HTML form?

    How to adapt website to user's Screen Resolution?

    How to make an image hover over another?

    Inner div has borders - how to override with a class on an outer div?

    how to add classes to the dropdown menu in the TinyMCE table editor

    How to capitalize first letter with JSTL/CSS?

    How to php echo content into
    classes dynamicaly [closed]

    How to make divs float on both ends of another div?

    How to set height and width of video element in percent

    How to resize div with CSS by the border

    Using Bootstrap, how can I put divs in different rows depending on the breakpoint?

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    how to make the title bar fixed

    How to create a Twitter Bootstrap Textarea

    How to replace direct image calling with sprites, in JavaScript?

    How to delay one transition but not the other?

    How to overlap a border in CSS in order to create tabs?

    How to make menu to slide right on click using HTML and CSS?

    how to encode .css file?

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]