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?

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?

• javascript
• recharts

• hey, did you end up solving this issue? – rony l Commented Dec 27, 2018 at 22:49

2 Answers 2

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

You can see that the CustomizedDot ponent 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;
};

Based on the Recharts API, I believe the parameter you are looking for is the payload parameter, which is part of the Tooltip ponent. Pass an object that contains only the data points that you want to be clickable.

Link for reference: http://recharts/#/en-US/api/Tooltip