Add more space (padding) into NVD3 line chart max and min

1
votes

Let's take the example below:
krispo.github.io/angular-nvd3/#/lineChart

enter image description here

I want to add more space (kind of padding) between the min/max of the line chart and the x-axis/top.

There is this an option called yDomain:

Defines the whole Y scale's domain. Using this will disable calculating the domain based on the data.

The bold part means if I set the min to be -100, if my chart goes below that level, I won't see it anymore. Or, if the min of my chart is actually -50, then -100 would be too much.

So basically I want the min and the max of the Y-Axis to be 10% of the (respectively) min and max of the chart.

1
nvd3.jsng2-nvd3
Did you try setting marginTop? - jeznag
There's no such thing as marginTop in the nvd3 options.. - David
.margin({top: 100}) - jeznag
No, margin is not what I want. Margin adds space outside the chart. I want to add more spaces between the min and the x-axis and as well as the max and the top of the chart - David
In fact, I want an equivalent of padData, but vertically. - David

1 Answers

3
votes

Found the solution. It was just math. :/

We need to get the y-min/y-max first:

const min = Math.min(...data.map(d => d.y));
const max = Math.max(...data.map(d => d.y));

And then (if we want 15% margins):

{
    ...
    yDomain: [min - (max - min) * 0.15, max + (max - min) * 0.15]
    ...
}