Зоны с накоплением показывают неправильные ярлыки оси Y?

Question

http://recharts.org/en-US/examples/StackedAreaChart

Этот пример показывает, и я также сделал указатели, что значения значений не соответствуют ярлыку почему это происходит? Есть ли объяснение и как это исправить?

Answer 1

Вы можете настроить всплывающую подсказку, используя content prop .

Компонент, переданный туда, получает те же реквизиты, что и Tooltip Rechart, поэтому вам нужно только переопределить необходимые и обойти остальных. Если вы не хотите изменять визуальную часть всплывающей подсказки, вы можете вернуть еще один Tooltip в конце.

// Do not pass the `content` since it causes a recursive rendering
const CumulativeTooltip = ({ content, payload, ...props }) => {
  const values = payload.map(({ value }) => value);
  const cumulativePayload = payload.reduce((result, item, index) => result.concat({
    ...item,
    value: values.slice(0, index + 1).reduce((sum, v) => sum + v, 0)
  }), []);

  return (<Tooltip {...props} payload={cumulativePayload} />);
}

// ... later in chart

<Tooltip content={<CumulativeTooltip/>}/>

Детская площадка