Funnel Chart

Воронки конверсии. Pro · Графики и аналитика › Доли и структура

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add funnel-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { FunnelChart } from 'valyro-ui-pro';

Prop	Type	Default
`data` *	`FunnelStage[]`		Stages top to bottom; bar widths are relative to the largest value, conversion to the first and previous stage.
`color`	`string`	`'var(--ui-chart-1)'`	Any CSS color. Default `--ui-chart-1`.
`align`	`'start' \| 'center'`	`'start'`	`start`: bars line up next to the stage labels. `center`: a symmetric funnel shape. Default `start`.
`valueFormatter`	`ValueFormatter`		Formats stage values, drop-offs between stages, the summary and the data table.
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<FunnelChartLabels>`		Overrides for the built-in strings.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).

Donut Chart — Кольцевые диаграммы
Treemap — Иерархии площадями с переходом по уровням
Sankey Chart — Диаграммы потоков между этапами
Radar Chart — Лепестковые диаграммы для сравнения профилей
Line Chart — Линейные графики
Bar Chart — Столбчатые диаграммы
Area Chart — Графики с заливкой
Scatter Chart — Точечные и пузырьковые диаграммы с линией тренда
Sparkline — Мини-графики
Confidence Band Chart — Прогноз с доверительными интервалами и выбросами, точки читаются с клавиатуры
Candlestick Chart — Биржевые свечи с объёмами и скользящими средними
Heatmap — Тепловые карты