nivo.rocks painting chart unproperly with line not corresponding to X-Y

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.

From the looks of it, probably the yScale.stacked property set to true, which is the default. This stacking behavior sums the values on the y-axis, which would explain why the values on your y-axis do not align with your actual values.

Storybook on stacked lines from the docs.