I want to add annotations to my ResponsiveLine chart. Is it possible to do it? I only could add them to Bar charts. I am using the Nivo geo Library for React.
Do you have any idea about doing that?
This is my current component:
function Graph({ items, metric }) {
if (!items.length) return <EmptyData />
return (
<ResponsiveLine
data={items.filter((x) => x.active)}
margin={{ top: 10, right: 50, bottom: 30, left: 50 }}
xScale={{
type: 'time',
format: '%V',
useUTC: false,
precision: 'day',
}}
curve="catmullRom"
axisTop={null}
pointSize={4}
pointColor="#ffffff"
pointBorderWidth={1}
pointBorderColor={{ from: 'serieColor', modifiers: [] }}
colors={items.filter((x) => x.active).map(({ color }) => color)}
enableArea
useMesh
enableGridX={false}
axisLeft={{
tickValues: 6,
format: (y) => {
return formatMetric(y, metric)
},
}}
axisBottom={{
format: '%b',
tickValues: 'every month',
}}
xFormat="time:%y-%m-%d"
defs={[
linearGradientDef('grad', [
{ offset: 0, color: 'inherit' },
{ offset: 100, color: 'inherit', opacity: 0 },
]),
]}
fill={[{ match: '*', id: 'grad' }]}
theme={{
grid: {
line: {
stroke: 'rgba(0,0,0,0.05)',
strokeWidth: 1,
},
},
}}
enableSlices="x"
sliceTooltip={Tooltip}
layers={[
'grid',
'markers',
'axes',
'areas',
'crosshair',
'lines',
'points',
'slices',
'mesh',
'legends',
]}
/>
)
}
I appreciate any help you can give me.
Pablo.