NVD3.js MultiChart with area (stackedArea) series drawn below the x-axis obscures labels

1
votes

Hello I'm using the current nvd3.js multichart from GitHub master branch. A certain combination of values is causing my chart to draw the area series below the x-axis, causing the series to obscure the x-axis labels when the chart is zoomed in.

enter image description here

When zoomed in it looks like this.

enter image description here

This example is here https://github.com/mlawry/nvd3/blob/master/examples/multiChart4.html Just place the file "multiChart4.html" in the "examples" folder of an nvd3 Git repository and open it in any Web browser.

The funny thing is this doesn't always happen, only with certain values. Can anyone point me in the right direction to fix this problem?

1
javascriptnvd3.js

1 Answers

1
votes

Turns out the problem is quite simply that the minimum value for the area series (yellow) is not zero (reading the chart it is 7860). Since stackedArea.js uses forceY to add 0 to the y values:

// If the user has not specified forceY, make sure 0 is included in the domain
// Otherwise, use user-specified values for forceY
if (scatter.forceY().length == 0) {
    scatter.forceY().push(0);
}

It means we must also add 0 when setting yScale2 in multiChart.js (yScale2 is the scale applied to series drawn on the right y-axis). Currently this is not done so things do not match up, and the yellow series gets drawn below the x-axis because it is trying to start drawing from 0, which is below 7860.

My fix is to use extraValue2BarStacked to include 0 in yScale2, see the new multiChart.js. Of course, the same should be done for yScale1.

if (dataBars1.length || dataStack1.length) {
    // Existence of bar or stackedArea automatically requires y-axis to show 0 value.
    extraValue1BarStacked.push({x:0, y:0});
}

...

if (dataBars2.length || dataStack2.length) {
    // Existence of bar or stackedArea automatically requires y-axis to show 0 value.
    extraValue2BarStacked.push({x:0, y:0});
}