Nivo line chart custom mesh layer

Question

I have nivo line chart with gaps like this: Gaps are covered by passing y/value: null in november and december in data series

Tooltip displays only on data points and this is correct, but I want add tooltip at November and December with explanation why there is no data.

score 3 · Answer 1 · answered Feb 15 '22 at 15:03

The solution is to add custom layer 'mesh' which is responsible for displaying tooltips on line chart.

You have to declare custom layers in <ResponsiveLine component:

  layers={[
      'grid',
      'markers',
      'axes',
      'areas',
      'crosshair',
      'lines',
      'slices',
      'points',
      CustomMesh,
      'legends',
    ]}

Create CustomMesh component:

const CustomMesh = (layerData: any) => {
const { showTooltipAt, hideTooltip } = useTooltip();

const handleMouseEnter = (point: any) => {
  showTooltipAt(
    layerData.tooltip({ point }),
    [point.x + layerData.margin.left, point.y + layerData.margin.top],
    'top'
  );
};
const handleMouseMove = (point: any) => {
  showTooltipAt(
    layerData.tooltip({ point }),
    [point.x + layerData.margin.left, point.y + layerData.margin.top],
    'top'
  );
};
const handleMouseLeave = (point: any) => {
  hideTooltip();
};
const nullValuePoints = layerData.series.reduce((acc: any[], cur: any) => {
    cur.data.forEach(({ data, position }: any) => {
  if (data.y === null) {
    const point = {
      x: position.x,
      y: 100, //whatever you want
      data: {
        x: data.x,
      },
    };
    acc.push(point);
  }
});
    return acc;
  }, []);
return (
  <Mesh
    nodes={[...layerData.points, ...nullValuePoints]}
    width={layerData.width}
    height={layerData.height}
    onMouseEnter={handleMouseEnter}
    onMouseMove={handleMouseMove}
    onMouseLeave={handleMouseLeave}
    debug={layerData.debugMesh}
  />
);
};

When nullValuePoints are my custom points with no data

Import required packages:

import { Mesh } from '@nivo/voronoi';
import { useTooltip } from '@nivo/tooltip';

result:

Nivo line chart custom mesh layer

1 Answers1