Add a simple target line parallel to x-axis, in Nivo @nivo/ResponsiveLine

Question

Trying to get this grey line parallel to x-axis as a marker of target (at of y-axis 67%).

score 2 · Accepted Answer · answered Mar 19 '21 at 17:27

2

you may put a markers props like:

markers={[
    {
        axis: 'y',
        value: 520,
        legend: 'TEST',
        lineStyle: {
            stroke: 'red',
        },
        textStyle: {
            fill: 'red',
        },
    },
]}

the value determine the marker location, you can calculate based on data you passed.

answered Mar 19 '21 at 17:27

Iury Vieira

46
5

This workes for me. Sorry for super later acknowledgement, but this is exactly what I was looking for. Thanks – Nikhil Anand Apr 07 '21 at 14:48
What happens when there is no 520 yet? Is there a way for the graph to show the y axis up to 520? – DoubleM Aug 16 '23 at 01:22

Add a simple target line parallel to x-axis, in Nivo @nivo/ResponsiveLine

1 Answers1