Вертикальный чарт

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

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

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

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

import { VerticalChart } 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 <VerticalChart label='Sales' data={data} />;
}

Результат

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

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

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

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

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

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

Пропсы

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