Custom legend in line chart is not rendering.

[scio-cypher]

Legend in axisBottom prop of Line Chart seems to accept ReactNode but whenever I try to provide with

tag, the content doesn't renders.

Here's code of how I'm doing it.

<ResponsiveLine data={lineData} margin={{ top: 10, right: 20, bottom: 100, left: 60 }} colors={({ id }) => lineColors[id] || "black"} xScale={{ type: 'point' }} yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: false, reverse: false }} enableSlices="x" axisTop={null} axisRight={null} axisBottom={{ tickSize: 9, tickPadding: 2, tickRotation: 0, legend: 'transportation', legendOffset: 36, legendPosition: 'middle', truncateTickAt: 0 }} axisLeft={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: <div>Legend text</div>, //This ain't working legendOffset: -40, legendPosition: 'middle', truncateTickAt: 0 }} curve="natural" pointSize={7} pointColor={{ theme: 'labels.text.fill' }} pointBorderWidth={7} pointBorderColor={{ from: 'serieColor' }} pointLabel="data.yFormatted" pointLabelYOffset={-12} enableGridX={true} enableGridY={true} enablePoints={true} enablePointLabel={true} enableArea={false} lineWidth={2} legends={[]} isInteractive={true} tooltip={() => {}} enableCrosshair={true} crosshairType="cross" enableTouchCrosshair={true} useMesh={true} sliceTooltip={renderTooltip} layers={["areas", "axes", "crosshair", "grid", "legends", "lines", "markers", "mesh", "points", "slices"]} />

You can see in the axisLeft prop I'm trying to pass my element to legend key, but it doesn't renders anything.

Thank you in advanced!

[annshiv]

Nivo Line charts do not support passing a ReactNode to the legend property directly; it only supports string. Use a plain string for the legend.

[plouc]

@annshiv is right, it only supports a string as the implementation can be either SVG or canvas.
On a side note, please format your code when submitting issues, thank you.