Как сделать разрыв у text в API Recharts

Question

Есть график за год и его text где отображается в виде чисел + млн, выглядит читабельно, все хорошо.

Но есть график за 3 года

И это выглядит ужасно. По документации у меня есть функция CustomizedLabel. В value попадает список данных в виде чисел.

  const CustomizedLabel = ({ x, y, value }) => {
    return (
      <text x={x} y={y} dy={-10} fill="#fff" fontSize={14}>
        {value.toString().slice(0, 3) + ' млн'}
      </text>
    );
  };

Соответственно функция попадает в Line

<Line type="linear" dataKey="revenue" stroke="#fff" label={<CustomizedLabel />}/>

Я не нашел в документации как сделать разрыв. Мне нельзя сокращать месяца и уменьшать шрифт, точки должны идти за каждый месяц а его текст в виде числа + млн должен идти с разрывом 7 шагов, чтобы все было читабельно.

Answer 1

Добавим в компонент новые параметры: step - шаг вывода значений и zeroInclude - показывать первый элемент или нет.

<Line 
  type="linear" 
  dataKey="revenue" 
  stroke="#fff" 
  label={<CustomizedLabel step={3} zeroInclude={true} />}
/>

и модифицируем компонент кастомизации вывода под наши потребности:

const CustomizedLabel: FunctionComponent<any> = (props: any) => {
  const { x, y, value, index, step, zeroInclude } = props;
  let flag = false;
  // Рассчитываем флаг
  if (zeroInclude && index === 0) {
    flag = true;
  } else {
    flag = (index + 1) % step === 0;
  }
  // Если флаг true выводим
  return (
    <text x={x} y={y}  dy={-10} fill="#fff" fontSize={14}>
      {flag ? value.toString().slice(0, 3) + ' млн' : null}
    </text>
  );
};

В компонент в props приходит индекс элемента, поэтому можно смело его использовать для определения номера.
В компоненте рассчитываем флаг отображения текста.

Как и обычный компонент реакта, вы можете дополнять функционал как хотите.

БЛОГ НА HUSL

Как сделать разрыв у text в API Recharts

Ответы (1 шт):