Other Types

Pro

What is left once bubble, funnel, multi-axis and date-time became families of their own: chart export to PNG/SVG/PDF, the high-performance renderer, and the two axis-labelling treatments.

</>sv-performance-chart-pro chartexportperformanceaxis-labels

import { SvPerformanceChartProComponent } from '@styloviz-pro/charts';

Demo & usage

Basic usage

Pro

Usage example — open the gallery for the full interactive demo.

Pro

An interactive demo for this component lives in the gallery.

Open live demo

More examples

Ten thousand points, pure SVG

Pro

Export any chart — PNG, SVG, PDF

Pro

Two label rows on one axis

Pro

When to use

Rendering a series large enough that one SVG node per point stops being viable.
Giving an axis a second row of labels — months under weeks, quarters under months.
Letting a reader take a chart away as a file.
For a named chart type, use its own family: Bubble, Funnel & Pyramid, Multiple Axis, Date-Time Category.

Async states

loading
empty
error
retry

Inputs

Name	Type	Default	Description
data	readonly number[]	[]	The series to plot — one number per point, in order. Leave it unbound and set `options.pointCount` to run the built-in benchmark against a synthetic series instead. Host data always wins over the benchmark.
title	string	'High-Volume Chart Performance'	Chart title, rendered above the plot and used as the SVG's accessible name.
height	number	320	SVG and frame height in pixels.
options	PerformanceChartOptions	{}	Benchmark point count (`pointCount`, opt-in; ignored when `data` is bound), area fill and grid toggles (both default `true`), and line draw-in `animationDuration` in ms.
customClass	string	''	Extra CSS classes applied to the root wrapper.
loading	boolean	false	True while the series is being fetched.
error	SvDataError \| string \| null	null	Load failure. A bare string is accepted; use `toSvDataError()` to normalize an `HttpErrorResponse` and get sensible retry behaviour.
emptyMessage	string	'No data to plot'	Copy for the empty state.
filtered	boolean	false	Distinguishes "no data at all" from "nothing matched the current filters".

Outputs

Event	Payload type	Description
retry	void	The host should re-run the failed load.

`<sv-performance-chart>`

Also in this family — SvPerformanceChartComponent from @styloviz/charts.

Async states

loading
empty
error
retry

Inputs

Name	Type	Default	Description
data	readonly number[]	[]	The series to plot — one number per point, in order. Leave it unbound and set `options.pointCount` to run the built-in benchmark against a synthetic series instead. Host data always wins over the benchmark.
title	string	'High-Volume Chart Performance'	Chart title, rendered above the plot and used as the SVG's accessible name.
height	number	320	SVG and frame height in pixels.
options	PerformanceChartOptions	{}	Benchmark point count (`pointCount`, opt-in; ignored when `data` is bound), area fill and grid toggles (both default `true`), and line draw-in `animationDuration` in ms.
customClass	string	''	Extra CSS classes applied to the root wrapper.
loading	boolean	false	True while the series is being fetched.
error	SvDataError \| string \| null	null	Load failure. A bare string is accepted; use `toSvDataError()` to normalize an `HttpErrorResponse` and get sensible retry behaviour.
emptyMessage	string	'No data to plot'	Copy for the empty state.
filtered	boolean	false	Distinguishes "no data at all" from "nothing matched the current filters".

Outputs

Event	Payload type	Description
retry	void	The host should re-run the failed load.

`<sv-axis-label-template-chart>`

Also in this family — SvAxisLabelTemplateChartComponent from @styloviz/charts.

Async states

loading
empty
error
retry

Inputs

Name	Type	Default	Description
loading	boolean	false	True while the series are being fetched.
error	SvDataError \| string \| null	null	Load failure. Use `toSvDataError()` from `@styloviz/core` to normalize an `HttpErrorResponse`.
emptyMessage	string	'No data to plot'	Copy for the empty state.
filtered	boolean	false	Whether a filter, not an absence of data, is why the chart is empty.
categories	AxisLabelCategory[]	[]	X-axis categories; each renders its label plus an optional icon, colour swatch and sub-label.
datasets	AxisLabelTemplateDataset[]	[]	Bar series; each `data` array is indexed by category position and drawn as grouped bars.
title	string	''	Chart title rendered above the plot; also used as the plot's accessible name.
height	number	340	Chart height in pixels.
options	AxisLabelTemplateOptions	{}	Display options: grid, legend, value labels, bar gap ratio and animation duration.
customClass	string	''	Extra CSS classes applied to the root wrapper.

Outputs

Event	Payload type	Description
retry	void	The host should re-run the failed load.
barHover	AxisLabelBarEvent	Emitted when a bar is hovered or keyboard-focused.
barSelect	AxisLabelBarEvent	Emitted when a bar is clicked or activated via keyboard (Enter/Space).

`<sv-axis-label-template-chart-pro>`

Also in this family — SvAxisLabelTemplateChartProComponent from @styloviz-pro/charts.

Async states

loading
empty
error
retry

Inputs

Name	Type	Default	Description
loading	boolean	false	True while the series are being fetched.
error	SvDataError \| string \| null	null	Load failure. Use `toSvDataError()` from `@styloviz/core` to normalize an `HttpErrorResponse`.
emptyMessage	string	'No data to plot'	Copy for the empty state.
filtered	boolean	false	Whether a filter, not an absence of data, is why the chart is empty.
categories	AxisLabelCategory[]	[]	X-axis categories; each renders its label plus an optional icon, colour swatch and sub-label.
datasets	AxisLabelTemplateDataset[]	[]	Bar series; each `data` array is indexed by category position and drawn as grouped bars.
title	string	''	Chart title rendered above the plot; also used as the plot's accessible name.
height	number	340	Chart height in pixels.
options	AxisLabelTemplateOptions	{}	Display options: grid, legend, value labels, bar gap ratio and animation duration.
customClass	string	''	Extra CSS classes applied to the root wrapper.

Outputs

Event	Payload type	Description
retry	void	The host should re-run the failed load.
barHover	AxisLabelBarEvent	Emitted when a bar is hovered or keyboard-focused.
barSelect	AxisLabelBarEvent	Emitted when a bar is clicked or activated via keyboard (Enter/Space).

`<sv-multi-level-label-chart>`

Also in this family — SvMultiLevelLabelChartComponent from @styloviz-pro/charts.

Async states

loading
empty
error
retry

Inputs

Name	Type	Default	Description
loading	boolean	false	True while the series are being fetched.
error	SvDataError \| string \| null	null	Load failure. Use `toSvDataError()` from `@styloviz/core` to normalize an `HttpErrorResponse`.
emptyMessage	string	'No data to plot'	Copy for the empty state.
filtered	boolean	false	Whether a filter, not an absence of data, is why the chart is empty.
categories	string[]	[]	Leaf-level category labels shown directly on the axis
levels	MultiLevelAxisLevel[]	[]	Additional grouping levels — level[0] groups categories, level[1] groups level[0], etc.
datasets	MultiLevelDataset[]	[]	Bar series; each `data` array is indexed by leaf category position and drawn as grouped bars.
title	string	''	Chart title rendered above the plot; also used as the plot's accessible name.
height	number	360	Chart height in pixels, including the grouped axis-label rows.
options	MultiLevelLabelOptions	{}	Display options: grid, legend, value labels, bar gap ratio and animation duration.
customClass	string	''	Extra CSS classes applied to the root wrapper.

Outputs

Event	Payload type	Description
retry	void	The host should re-run the failed load.
barHover	MultiLevelBarEvent	Emitted when a bar is hovered or keyboard-focused.
barSelect	MultiLevelBarEvent	Emitted when a bar is clicked or activated via keyboard (Enter/Space).

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

Template

Pro

Bound to the names this component actually exposes.

Host class

Pro

Drive the three async inputs from your own fetch.

This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `data`, `loading` and `error`.
Set `filtered` when a search or filter is active. It is the difference between "you have no orders" and "no orders match this filter" — telling a customer with 4,000 orders the first one reads as a bug.
Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

Export to PNG, SVG or PDF from any chart, via a directive rather than a wrapper component.
A high-throughput rendering path for very large series.
Custom axis-label templates, and a second grouping row beneath the category axis.

Best practices

Do: Reach for the export directive rather than screenshotting. It wraps any chart in the kit and produces a file with the real text in it, which a screenshot cannot.
Do: Use the high-performance renderer only once a normal chart is actually slow. It trades per-point interactivity for throughput, and paying that on a hundred points buys nothing.
Tip: Axis-label templates and multi-level labels are treatments of the bar and line families rather than charts in their own right. They are grouped here because a buyer looks for them by what they do, not by a chart name.

Accessibility

Interactive marks stay keyboard-focusable `role="button"` elements with descriptive names wherever the variant draws them.
Exported SVG and PDF carry the chart's real text, so a reader can select and search it — which is the accessibility argument for offering export at all rather than leaving people to screenshot.

Feedback on Other Types

Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.

Loads giscus.app and GitHub — nothing is fetched until you click.