nivo.rocks 绘制图表不正确，线条不对应 XY

Question

This is the data I pass to my chart

    [
    {
        "id": "cumulative emotion",
        "color": "blue",
        "data": [
            {
                "x": 1169,
                "y": 5
            },
            {
                "x": 1170,
                "y": 10
            },
            {
                "x": 1171,
                "y": 15
            },
            {
                "x": 1172,
                "y": 17
            },
            {
                "x": 1173,
                "y": 20
            },
            {
                "x": 1174,
                "y": 22
            },
            {
                "x": 1175,
                "y": 26
            },
            {
                "x": 1176,
                "y": 28
            },
            {
                "x": 1177,
                "y": 33
            },
            {
                "x": 1178,
                "y": 36
            },
            {
                "x": 1179,
                "y": 38
            },
            {
                "x": 1180,
                "y": 40
            },
            {
                "x": 1181,
                "y": 44
            },
            {
                "x": 1182,
                "y": 49
            },
            {
                "x": 1183,
                "y": 52
            },
            {
                "x": 1184,
                "y": 54
            },
            {
                "x": 1185,
                "y": 57
            },
            {
                "x": 1186,
                "y": 59
            },
            {
                "x": 1187,
                "y": 64
            }
        ]
    },
    {
        "id": "max potential accumulated emotion",
        "color": "green",
        "data": [
            {
                "x": 1169,
                "y": 0
            },
            {
                "x": 1170,
                "y": 5
            },
            {
                "x": 1171,
                "y": 10
            },
            {
                "x": 1172,
                "y": 15
            },
            {
                "x": 1173,
                "y": 20
            },
            {
                "x": 1174,
                "y": 25
            },
            {
                "x": 1175,
                "y": 30
            },
            {
                "x": 1176,
                "y": 35
            },
            {
                "x": 1177,
                "y": 40
            },
            {
                "x": 1178,
                "y": 45
            },
            {
                "x": 1179,
                "y": 50
            },
            {
                "x": 1180,
                "y": 55
            },
            {
                "x": 1181,
                "y": 60
            },
            {
                "x": 1182,
                "y": 65
            },
            {
                "x": 1183,
                "y": 70
            },
            {
                "x": 1184,
                "y": 75
            },
            {
                "x": 1185,
                "y": 80
            },
            {
                "x": 1186,
                "y": 85
            },
            {
                "x": 1187,
                "y": 90
            }
        ]
    }

]

And this is how it ends up looking

As you can observe for some reason, the red line, is doing a sum of red line y value + orange line y value, instead of taking its own value. Even if on hovering it dispalys the correct value, graphically it isnt correct Whats the issue there?

Answer 1

It's hard to reproduce without the code you have to create the graph.

To me it seems likely that you have the yScale.stacked property as true , which is the default in the docs. This stacking behavior sums the values on the y-axis.

Storybook on stacked lines from the docs .