Need to draw a custom axis on the line chart

[zahangirbd]

We are using this package for drawing a line chart in our mobile application. But we need to draw a custom axis on the line chart to indicate some bands of the data. For example:

I don't see any option to create custom xAxis here. Is it available? Or Do you have any plan to incorporate? If it is not in the plan, I can modify the code to add that.

[DenneulinThomas]

Hello, you can add decorators to your graph. The decorator should render a SVG Line. But you have to compute on your own the position.

/**
     * Render the target line if exists.
     *
     * @return {JSX.Element}
     */
    const renderDecorator = (): JSX.Element => {
        return <Svg>
            {targetLine && <>
                <Line x1={targetLine} y1={10} x2={targetLine} y2={280} stroke={"blue"} strokeWidth={1}/>
            </>}
        </Svg>;
    };

    return (
        <LineChart fromZero={false}
                   decorator={renderDecorator}
                   withInnerLines={false}
                   width={width}
                   height={300}
        />
    );

[bytemtek]

Hello, you can add decorators to your graph. The decorator should render a SVG Line. But you have to compute on your own the position.

/**
     * Render the target line if exists.
     *
     * @return {JSX.Element}
     */
    const renderDecorator = (): JSX.Element => {
        return <Svg>
            {targetLine && <>
                <Line x1={targetLine} y1={10} x2={targetLine} y2={280} stroke={"blue"} strokeWidth={1}/>
            </>}
        </Svg>;
    };

    return (
        <LineChart fromZero={false}
                   decorator={renderDecorator}
                   withInnerLines={false}
                   width={width}
                   height={300}
        />
    );

Hello,

Can you give an example for compute position ?

[DenneulinThomas]

It depend from what you want to compute the position. In my case I has to draw a line between two given points.

You can access a point position into the renderDotContent function :

<LineChart fromZero={false}
                   withDots
                   renderDotContent={(value) => {
                          //Here you can get position of each rendered dot, (value.index for dot index, value.x for dot x position)
                         //So you can compute your custom line position from any dot position.
                   }}
                   decorator={renderDecorator}
                   withInnerLines={false}
                   width={width}
                   height={300}
        />

[bytemtek]

It depend from what you want to compute the position. In my case I has to draw a line between two given points.

You can access a point position into the renderDotContent function :

<LineChart fromZero={false}
                   withDots
                   renderDotContent={(value) => {
                          //Here you can get position of each rendered dot, (value.index for dot index, value.x for dot x position)
                         //So you can compute your custom line position from any dot position.
                   }}
                   decorator={renderDecorator}
                   withInnerLines={false}
                   width={width}
                   height={300}
        />

I wanna do stock price chart and I need draw horizontal lines for some price levels.

[DenneulinThomas]

So with the render dot content function, you can have your lowest and highest point from the dataset. You can now compute the position of your custom horizontal line.