search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.11k stars 1.03k forks source link

Nivo/line, stack line does not match the values in the graph. #2613

Closed JhsK closed 3 months ago

JhsK commented 3 months ago

A stack line graph was implemented using nivo/line, and even if the value of the data put in the graph is normally entered, the graph does not fit the numerical value.

For example, even if I set a value of 2739, the graph seems to be drawn to 27390. The weird thing is that only one of the 3 line graphs seems to be treated strangely.

I share it so that you can check it in the codesandbox below. You can check the graph of the x-axis other, norway in the example graph.

In a shared environment, you have configured it based on the example code of the nivo official document.

codesandbox - example

tkonopka commented 3 months ago

Hi @jhsK. Your codesandbox has a yScale configured with stacked: true and that makes the y axis show cumulative values, so a data value 2739 may well appear drawn much higher, in your case near 27390. Your other lines also follow this behaviour (to see this in the codesandbox, remove the entry labelled "other" - the lines will then not be squished at the bottom and it will become clearer that all the lines are treated consistently). You may want to consider setting stacked: false to draw lines on a regular yScale. HTH

plouc commented 3 months ago

Thank you for the explanation @tkonopka.

JhsK commented 3 months ago

@tkonopka Thank you so much, I didn't understand the stack option and was using it!