javascript - Recharts LineChart dots only for certain data points - Stack Overflow

admin管理员组

文章数量:1316974

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

Share Improve this question Follow asked Apr 19, 2017 at 9:49 StefanStefan 1,73044 gold badges2020 silver badges3434 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

本文标签： javascriptRecharts LineChart dots only for certain data pointsStack Overflow