0

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.

Pablo Alaniz
  • 163
  • 1
  • 8

0 Answers0