I'm trying to switch from a ResponsiveLine
to a ResponsiveLineCanvas
using Javascript library Nivo version 0.80.0 and React 18.2.0, but markers are just not shown.
Not sure what I am missing, so I created an example to reproduce the issue
https://codesandbox.io/embed/fast-leftpad-q6ypqr?fontsize=14&hidenavigation=1&theme=dark
It is sufficient to switch from ResponsiveLineCanvas
to ResponsiveLine
and the marker get shown.
From the docs I cannot guess if the feature is unsupported in ResponsiveLineCanvas
. So, am I missing any configuration?
import React, { useEffect, useState } from "react";
import { ResponsiveLineCanvas } from "@nivo/line";
import { ResponsiveLine } from "@nivo/line";
const commonProperties = {
width: 900,
height: 400,
margin: { top: 20, right: 20, bottom: 60, left: 80 },
animate: true,
enableSlices: "x"
};
const App = () => (
<div style={{ height: 600 }}>
<ResponsiveLineCanvas
{...commonProperties}
data={[
{
id: "Id of serie",
data: [
{ x: 0, y: 0.2 },
{ x: 1, y: 0.3 },
{ x: 2, y: 0.5 },
{ x: 3, y: 0.4 },
{ x: 4, y: 0.3 },
{ x: 5, y: 0.5 },
{ x: 6, y: 0.3 },
{ x: 7, y: 0.1 }
]
}
]}
markers={[
{
axis: "x",
value: 2,
lineStyle: { stroke: "#6aa84f", strokeWidth: 3, opacity: 0.95 },
legend: "Budget line"
}
]}
layers={[
"grid",
"axes",
"areas",
"lines",
"points",
"slices",
"mesh",
"legends",
"markers"
]}
enableGridX={false}
colors={["rgb(97, 205, 187)", "rgb(244, 117, 96)"]}
xScale={{
type: "linear"
}}
yScale={{
type: "linear",
stacked: false,
min: 0,
max: 1
}}
enableArea={true}
areaOpacity={1}
enableSlices={false}
useMesh={true}
crosshairType="cross"
/>
</div>
);
export default App;
Looking at the source code, it's clear that support for
markers
has not been implemented in theLineCanvas
andResponsiveLineCanvas
components. There is no mention ofmarkers
anywhere in the component source. Themarkers
prop is not included in the destructuring assignment so that prop will be ignored and have no effect.As for the
layers
prop, this Canvas version goes through a bunch ofif
statements to check for known layer types."marker"
is not one of these types. There is noelse
statement that lets you know if a provided layer was invalid, it just doesn't do anything.The supported values of the
layers
prop, per the source code, are:"grid"
"axes"
"areas"
"lines"
"points"
"mesh"
"legends"
On the other hand, the SVG-based
Line
andResponsiveLine
components do use themarkers
prop and supportlayers=["markers"]
. You can see here how themarkers
prop is passed off to aCartesianMarkers
component from the@nivo/core
package and the resulting element is stored in thelayerById
dictionary.