Recharts LineChart dots only for certain data points

Question

I would like to use the LineChart of Recharts to show a data set with up to 200 points. However, I would like to show the dots/tooltip/activeDot only for 5 of those data points on small screens because 200 points wouldn't be clickable anymore on smartphones.

How can I achieve that?

Answer 1

In order to only show certain dots you can refer to the CustomizedDotLineChart example in Recharts documentation.

You can see that the CustomizedDot component receives a payload prop, which contains the data item at that point. By adding a property such as visible (in your example, you can set the visible value depending on the viewport width, updating it on resize events), you can do:

const CustomizedDot = (props) => {
  const { cx, cy, stroke, payload, value } = props;

  if (payload.visible) {
    return (
      <svg x={cx - 4} y={cy - 4} width={8} height={8} fill="white">
        <g transform="translate(4 4)">
          <circle r="4" fill="black" />
          <circle r="2" fill="white" />
        </g>
      </svg>
    );
  }

  return null;
};