How to set custom width of bar in NDV3 Discreate bar chart
Asked Answered
S

2

9

Am trying to build vertical bar chart using nvd3 charts.

Problem : If chart has single record, bar width reaches 3/4 of the chart width.

Question : How to change width of the bars in Discrete bar chart?

Have attached chart please guide me..

enter image description here

Shaun answered 13/3, 2013 at 10:18 Comment(0)
E
9

If you look at the source here. You'll see that the width of the rectangle is calculated based on the number of items using rangeBand. There doesn't appear to be a way to set the width of the rectangle though the library's API.

If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that would return an empty string if the value was zero, but that assumes zero is not a valid number in your data set.

Expulsion answered 1/5, 2013 at 21:21 Comment(3)
It's a nice solution @WolfgangCodes! But I can't figure why someone want a chart with only one data.Carbarn
@WellingtonZanelli, I'm afraid only Mohan can answer that one.Expulsion
sometimes, you are drilling down different level of a hierarchical data and leaf or intermeidate level could have only one item. In that case, chart ended up like thisDrover
P
0

Use the follwing code to set the width

dispatch: {
    renderEnd: function (e) {
        d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
    }
}

or you can use

groupSpacing : 0.57,
Pongee answered 9/4, 2018 at 7:38 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.