reactjschartsnivo-react

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


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

enter image description here


Solution

  • 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.