Горизонтальный чарт

Общая информация

Горизонтальный чарт - один из самых простых чартов из библиотеки surf-charts, предназначенный для отображения небольшого количества простой по структуре информации в виде горизонтальных столбцов с наименованиями полей слева от них и значениями, выраженными в размере столбцов и надписях в тултипе, а также линией значений снизу.

Пример вертикального чарта

Пример снизу отображает дефолтное поведение чарта только с необходимыми пропсами.

import { HorizontalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 1200 },
  { label: 'February', value: 800 },
  { label: 'March', value: 1500 },
  { label: 'April', value: 1100 },
  { label: 'May', value: 1400 }
];
 
function App() {
  return <HorizontalChart label='Sales' data={data} />;
}

Результат

Работа с динамическими данными

Чарты часто нуждаются в обработке динамических данных, например, когда данные поступают с сервера. Компонент HorizontalChart предназначен для гибкой обработки различных сценариев работы с данными:

• Неполные данные: Если количество данных меньше, чем maxBars, будут отображаться только доступные данные, не оставляя пустых мест.
• Избыток данных: Если количество данных превышает указанное значение maxBars, будут отображены только первые несколько пунктов данных в соответствии со значением maxBars.

Полную информацию об асинхронных данных можно прочесть здесь.

Кастомизация

Компонент HorizontalChart предоставляет определённое количество пропсов для кастомизации. Свойства приведены в таблице ниже.

Пропсы

Часто задаваемые вопросы