line: Area fill is going below the x axis when there is no plotted value that meets the lowest point on the y axis

Describe/explain the bug

This is on the latest chrome browser Not having a plot of 0 in the data set for the y axis causes the markers to shift and not scale, Int he example the 0 now would render below the x axis which has caused the fill to draw down to that point rather than stopping at the x axis.

render code

import React from 'react';
import { ResponsiveLine } from '@nivo/line';
 // ...a react function that returns...

    <ResponsiveLine
      {...chartProps}
      data={data}
      curve={smooth ? 'natural' : 'linear'}
      lineWidth={3}
      enableArea={area}
      areaOpacity={0.5}
      data-testid="lineChart-ResponsiveLine"
    />

Data structure being passed

const chartProps = 
{"top":10,"right":40,"bottom":70,"left":40},"labelTextColor":"#000000","borderWidth":0,"enableDots":true,"enableDotLabel":true,"dotSize":8,"dotColor":"#000000","dotBorderWidth":0,"theme":{"labels":{"text":{"fontSize":9}},"legends":{"text":{"fontSize":9}},"axis":{"legend":{"text":{"fontSize":10,"fill":"#000000"}},"ticks":{"line":{"fill":"#CCC"},"text":{"fontSize":8,"fill":"#000000"}}},"grid":{"line":{"stroke":"#80808040","strokeWidth":0.5}}},"enableGridX":true,"enableGridY":true,"labelSkipWidth":10,"yScale":{"type":"linear","min":"auto","max":"auto"},"markers":[{"axis":"y","value":0,"lineStyle":{"stroke":"#80808040","strokeWidth":2}}],"axisBottom":{"orient":"bottom","tickRotation":-25,"tickSize":5,"tickPadding":10,"legend":"Date/Time - Hour of Day","legendOffset":65,"legendPosition":"middle"},"axisLeft":{"orient":"left","tickSize":5,"tickPadding":10,"tickRotation":0},"legends":[],"colors":{"scheme":"paired"},"animate":false,"isInteractive":true,"motionStiffness":90,"motionDamping":15};

const data = [{"id":"Date/Time - Hour of Day","data":[{"x":"0","y":100,"origClassName":"0"},{"x":"1","y":100,"origClassName":"1"},{"x":"2","y":100,"origClassName":"2"},{"x":"3","y":100,"origClassName":"3"},{"x":"4","y":100,"origClassName":"4"},{"x":"5","y":100,"origClassName":"5"},{"x":"6","y":81.76,"origClassName":"6"},{"x":"7","y":80.95,"origClassName":"7"},{"x":"8","y":85.72,"origClassName":"8"},{"x":"9","y":89.5,"origClassName":"9"},{"x":"10","y":89.92,"origClassName":"10"},{"x":"11","y":90.36,"origClassName":"11"},{"x":"12","y":84.23,"origClassName":"12"},{"x":"13","y":75.53,"origClassName":"13"},{"x":"14","y":80.12,"origClassName":"14"},{"x":"15","y":78.2,"origClassName":"15"},{"x":"16","y":74.68,"origClassName":"16"},{"x":"17","y":80.47,"origClassName":"17"},{"x":"18","y":65.95,"origClassName":"18"},{"x":"19","y":49,"origClassName":"19"},{"x":"20","y":47.47,"origClassName":"20"},{"x":"21","y":36.84,"origClassName":"21"},{"x":"22","y":28.78,"origClassName":"22"},{"x":"23","y":20,"origClassName":"23"}]}];

[fubhy]

This is not a bug, you need to set the areaBaselineValue prop to the right value (e.g. 20 in the example you showed).

The typescript definition for this prop is currently incorrectly named due to a typo. Here’s a fix: https://github.com/plouc/nivo/pull/961

[carloscastelano]

@cdwyer-cognito, did you find any solution to fix it? There is a workaround: just set “areaBaselineValue” to the min visible value of your yScale.