Rechart for customized dot in linechart

Question

I am following this for customized dot in line chart : https://recharts.org/en-US/examples/CustomizedDotLineChart

In my graph I have 4 lines and for each line I need different shape for datapoints.

I followed the link, it worked for svg provided in link, but I need shapes like, circle, triange, rectangle/square, diamond

Here is my code,

const CustomizedDot = (props) => {
    const { cx, cy, dataKey } = props;

    if (dataKey === 'A') {
        return (
            <svg >
                <rect  />
            </svg>
        );
    }
    if (dataKey === 'B') {
        return (
            <svg ">
                <polygon  points="0 40,40 80,80 40,40 0" />
            </svg>
        );
    }
    if (dataKey === 'C') {
        return (
            <svg >
                <circle  />
            </svg>
        );
    }
    if (dataKey === 'D') {
        return (
            <svg >
                <polygon points="50 15, 100 100, 0 100"/>
            </svg>
        );
    }
};

and linechart is generated like this

<LineChart
                data={data.map((data) => ({
                    ...data,
                    date: data.date,
                }))}
            >
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Legend />
                {(Object.keys(lineConfig) as TimeSeriesMetricKey[]).reduce(
                    (items: React.ReactElement[], key) => {
                        return [
                            ...items,
                            <Line
                                key={key}
                                dataKey={key}
                                name={lineConfig[key].legendLabel}
                                stroke={lineConfig[key].color}
                                strokeWidth={2}
                                activeDot={{r : 8}}
                                dot={<CustomizedDot />}
                            />,
                        ];
                    },
                    []
                )}
            </LineChart>

where I did something wrong that shapes not coming as per condition in SVG, it shows all are circle shape for all the lines.

Answer 1

Based on the code you provided, it seems there might be a small issue in your CustomizedDot component. It looks like you forgot to add the necessary attributes to the SVG shapes, such as cx, cy, and r for circles. Below is the updated code:

const CustomizedDot = (props) => {
    const { cx, cy, dataKey } = props;

    if (dataKey === 'A') {
        return (
            <svg>
                <rect x={cx - 4} y={cy - 4} width={8} height={8} />
            </svg>
        );
    }
    if (dataKey === 'B') {
        return (
            <svg>
                <polygon points={`${cx},${cy - 4} ${cx + 4},${cy + 4} ${cx - 4},${cy + 4}`} />
            </svg>
        );
    }
    if (dataKey === 'C') {
        return (
            <svg>
                <circle cx={cx} cy={cy} r={4} />
            </svg>
        );
    }
    if (dataKey === 'D') {
        return (
            <svg>
                <polygon points={`${cx - 2},${cy - 4} ${cx + 2},${cy - 4} ${cx},${cy + 4}`} />
            </svg>
        );
    }
};

Here, we are using the cx and cy attributes to position the shapes correctly based on the data point coordinates, and the appropriate attributes like width, height, r, and points have been added for each shape to make them display correctly.

Hope this helps!