Style Reference Line Label

Request for documentation

I am unable to style the reference line label to match this example: http://recharts.org/#/en-US/api/ReferenceLine

It ends up looking like this:

I tried passing a ReactComponent into the label props. The result is no that no label gets displayed.

My code looked like <ReferenceLine x={firstQuadPercentile} stroke={'green'} label={<text>{'25th percentile'}</text>} />

and

<ReferenceLine x={firstQuadPercentile} stroke={'green'} label={<div>{'25th percentile'}</div>} />

Since no label gets displayed, it didn’t seem like this solution would work.

How can I style the label to match the first example shown in this request?

My recharts version : 1.0.0-alpha.2

[wewoor]

@westoncolemanl @fengshuo

The below is my custom ReferenceLabel component. you can try it.

export function ReferenceLabel(props) {
    const { 
        fill, value, textAnchor, 
        fontSize, viewBox, dy, dx,
    } = props;
    const x = viewBox.width + viewBox.x + 20;
    const y = viewBox.y - 6;
    return (
        <text 
            x={x} y={y}
            dy={dy}
            dx={dx}
            fill={fill}
            fontSize={fontSize || 10} 
            textAnchor={textAnchor}>
            {value}
        </text>
    )
}

use it

<ReferenceLine label={<ReferenceLabel  />} /> 

hope it can help you.

[xile611]

@wewoor @westoncolemanl

You can try the props position of label.

<ReferenceLine x="Page C" stroke="red" label={{ position: 'top',  value: 'Max PV PAGE', fill: 'red', fontSize: 14 }}/>