@styloviz/charts

v1.0.2

Published

11 days ago

Composable chart components — line, bar, area and more — for analytics dashboards.

0High
0Medium
0Low

rshossain

angular tailwind ui-kit styloviz charts

@styloviz/charts

Composable chart components — line, bar, area and more — for analytics dashboards.

Part of the Styloviz UI Kit — a premium Angular 21 & 22 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/core @styloviz/charts

Requires @angular/core and @angular/common 21 or 22 (peer range >=21.0.0 <23.0.0). Also needs @styloviz/core — listed above so no extra step is required on npm (on pnpm/yarn, list it yourself). Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Styles (required)

Styloviz components are Tailwind CSS 4 utilities. If the project does not use Tailwind yet, add it and its PostCSS plugin (the Angular CLI reads .postcssrc.json from the project root):

npm i -D tailwindcss @tailwindcss/postcss postcss
echo '{ "plugins": { "@tailwindcss/postcss": {} } }' > .postcssrc.json

Then, in your global stylesheet (usually src/styles.css), import the kit's tokens and let Tailwind scan the installed packages — it skips node_modules otherwise:

@import "tailwindcss";
@import "@styloviz/core/styles/styloviz.css";
@source "../node_modules/@styloviz";
@source "../node_modules/@styloviz-pro";   /* Pro only */

The stylesheet ships in @styloviz/core — add it to your install if it is not there already. Dark mode is class-based (class="dark" on <html>). Rebrand by redeclaring a token after the import: @theme { --color-primary-600: #0f766e; }.

Usage

import { SvBarChartComponent } from '@styloviz/charts';

@Component({
  standalone: true,
  imports: [SvBarChartComponent],
  template: `
    <sv-bar-chart [categories]="categories" [datasets]="datasets" orientation="vertical" />
  `,
})
export class DemoComponent {}

Components

17 components. Each links to its API reference below.

| Selector | Class | Inputs | Outputs | Docs page | | --- | --- | --- | --- | --- | | sv-axis-label-template-chart | SvAxisLabelTemplateChartComponent | 10 | 3 | Other Types | | sv-bar-chart | SvBarChartComponent | 13 | 2 | Bar Chart | | sv-column-drilldown-chart | SvColumnDrilldownChartComponent | 13 | 1 | Bar Chart | | sv-cylindrical-column-chart | SvCylindricalColumnChartComponent | 12 | 1 | Bar Chart | | sv-datetime-category-chart | SvDateTimeCategoryChartComponent | 11 | 3 | Date-Time Category | | sv-default-pie-chart | SvDefaultPieChartComponent | 11 | 2 | Pie Chart | | sv-gradient-bar-chart | SvGradientBarChartComponent | 12 | 1 | Bar Chart | | sv-line-chart | SvLineChartComponent | 13 | 1 | Line Chart | | sv-live-stream-chart | SvLiveStreamChartComponent | 12 | 2 | Live Charts | | sv-live-update-chart | SvLiveUpdateChartComponent | 9 | 1 | Live Charts | | sv-performance-chart | SvPerformanceChartComponent | 9 | 1 | Other Types | | sv-radar-chart | SvRadarChartComponent | 14 | 3 | Radar / Spider Chart | | sv-range-column-chart | SvRangeColumnChartComponent | 12 | 1 | Bar Chart | | sv-scatter-chart | SvScatterChartComponent | 19 | 5 | Scatter Plot | | sv-strip-line-chart | SvStripLineChartComponent | 12 | 1 | Line Chart | | sv-trend-line-chart | SvTrendLineChartComponent | 12 | 1 | Line Chart | | sv-waterfall-chart | SvWaterfallChartComponent | 13 | 3 | Waterfall Chart |

Free ↔ Pro twin map

@styloviz/charts is the free tier; @styloviz-pro/charts is Pro. 17 charts ship in both, and 33 are Pro-only. The last column is what the Pro twin's API adds (+) or lacks (−) relative to the free one; (name) is an output.

| Free — @styloviz/charts | Pro — @styloviz-pro/charts | Pro vs Free | | --- | --- | --- | | sv-axis-label-template-chartSvAxisLabelTemplateChartComponent | sv-axis-label-template-chart-proSvAxisLabelTemplateChartProComponent | same API | | sv-bar-chartSvBarChartComponent | sv-bar-chart-proSvBarChartProComponent | same API | | — | sv-box-plot-chartSvBoxPlotChartComponent | — | | — | sv-bubble-chartSvBubbleChartComponent | — | | — | sv-bullet-chartSvBulletChartComponent | — | | — | sv-candlestick-chartSvCandlestickChartComponent | — | | — | sv-choropleth-mapSvChoroplethMapComponent | — | | — | sv-click-add-point-chartSvClickAddPointChartComponent | — | | sv-column-drilldown-chartSvColumnDrilldownChartComponent | sv-column-drilldown-chart-proSvColumnDrilldownChartProComponent | same API | | — | sv-column-placement-chartSvColumnPlacementChartComponent | — | | sv-cylindrical-column-chartSvCylindricalColumnChartComponent | sv-cylindrical-column-chart-proSvCylindricalColumnChartProComponent | same API | | sv-datetime-category-chartSvDateTimeCategoryChartComponent | sv-datetime-category-chart-proSvDateTimeCategoryChartProComponent | same API | | sv-default-pie-chartSvDefaultPieChartComponent | sv-default-pie-chart-proSvDefaultPieChartProComponent | same API | | — | sv-donut-chartSvDonutChartComponent | — | | — | sv-funnel-chartSvFunnelChartComponent | — | | — | sv-gauge-chartSvGaugeChartComponent | — | | sv-gradient-bar-chartSvGradientBarChartComponent | sv-gradient-bar-chart-proSvGradientBarChartProComponent | same API | | — | sv-gradient-donut-chartSvGradientDonutChartComponent | — | | — | sv-heatmap-chartSvHeatmapChartComponent | — | | — | sv-histogram-chartSvHistogramChartComponent | — | | sv-line-chartSvLineChartComponent | sv-line-chart-proSvLineChartProComponent | +zoomable +minZoomPoints +(zoomRangeChange) | | — | sv-live-sort-chartSvLiveSortChartComponent | — | | — | sv-live-spline-chartSvLiveSplineChartComponent | — | | — | sv-live-stock-chartSvLiveStockChartComponent | — | | sv-live-stream-chartSvLiveStreamChartComponent | sv-live-stream-chart-proSvLiveStreamChartProComponent | same API | | sv-live-update-chartSvLiveUpdateChartComponent | sv-live-update-chart-proSvLiveUpdateChartProComponent | same API | | — | sv-multi-axis-chartSvMultiAxisChartComponent | — | | — | sv-multi-level-label-chartSvMultiLevelLabelChartComponent | — | | — | sv-negative-stack-chartSvNegativeStackChartComponent | — | | sv-performance-chartSvPerformanceChartComponent | sv-performance-chart-proSvPerformanceChartProComponent | same API | | — | sv-pie-legend-template-chartSvPieLegendTemplateChartComponent | — | | — | sv-pie-radius-chartSvPieRadiusChartComponent | — | | — | sv-pin-mapSvPinMapComponent | — | | — | sv-polar-chartSvPolarChartComponent | — | | — | sv-pyramid-chartSvPyramidChartComponent | — | | sv-radar-chartSvRadarChartComponent | sv-radar-chart-proSvRadarChartProComponent | same API | | — | sv-radial-bar-chartSvRadialBarChartComponent | — | | — | sv-range-bar-chartSvRangeBarChartComponent | — | | sv-range-column-chartSvRangeColumnChartComponent | sv-range-column-chart-proSvRangeColumnChartProComponent | same API | | — | sv-sankey-chartSvSankeyChartComponent | — | | sv-scatter-chartSvScatterChartComponent | sv-scatter-chart-proSvScatterChartProComponent | same API | | — | sv-smart-labels-pie-chartSvSmartLabelsPieChartComponent | — | | — | sv-stacked-bar-chartSvStackedBarChartComponent | — | | — | sv-stacked-bar-percent-chartSvStackedBarPercentChartComponent | — | | — | sv-stacked-column-chartSvStackedColumnChartComponent | — | | — | sv-stacked-column-percent-chartSvStackedColumnPercentChartComponent | — | | sv-strip-line-chartSvStripLineChartComponent | sv-strip-line-chart-proSvStripLineChartProComponent | same API | | — | sv-treemap-chartSvTreemapChartComponent | — | | sv-trend-line-chartSvTrendLineChartComponent | sv-trend-line-chart-proSvTrendLineChartProComponent | same API | | sv-waterfall-chartSvWaterfallChartComponent | sv-waterfall-chart-proSvWaterfallChartProComponent | same API |

Exports

Everything @styloviz/charts exports from its entry point — 70 symbols.

Components (17): SvAxisLabelTemplateChartComponent, SvBarChartComponent, SvColumnDrilldownChartComponent, SvCylindricalColumnChartComponent, SvDateTimeCategoryChartComponent, SvDefaultPieChartComponent, SvGradientBarChartComponent, SvLineChartComponent, SvLiveStreamChartComponent, SvLiveUpdateChartComponent, SvPerformanceChartComponent, SvRadarChartComponent, SvRangeColumnChartComponent, SvScatterChartComponent, SvStripLineChartComponent, SvTrendLineChartComponent, SvWaterfallChartComponent

Functions & constants (14): DEFAULT_COLORS, DEMO_LIVE_SOURCES, DEMO_RADAR_AXES, DEMO_RADAR_SERIES, DEMO_SCATTER_SERIES, formatChartValue, formatPercent, gridTicks, gridTicksSymmetric, niceMax, rectPath, resolveColor, roundedTopRectPath, STACK_COLORS

Types (39): BarChartDataset, BarChartOptions, BarChartOrientation, BarChartVariant, ComputedBar, ComputedRangeBar, ComputedStackSegment, DefaultPieChartOptions, DrilldownDataset, DrilldownLevel, DrilldownState, LineChartAnnotation, LineChartMarkerShape, LineChartOptions, LineChartSeries, LineChartType, LineChartZone, PieChartBaseOptions, PieSlice, RadarAxis, RadarPointEvent, RadarSeries, RangeChartDataset, ScatterBinEvent, ScatterBinShare, ScatterPoint, ScatterPointEvent, ScatterRenderMode, ScatterSeries, StripBand, StripLineChartOptions, StripOrientation, StripSeries, TooltipItem, TrendLineChartOptions, TrendLineDefinition, TrendLineSeries, TrendType, WaterfallPoint

API reference

`sv-axis-label-template-chart`

import { SvAxisLabelTemplateChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-axis-label-template-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group"
Data table: none in this component
Keyboard: has focusable controls or marks
Docs, demos & accessibility notes: https://styloviz.dev/docs/other-charts

<sv-axis-label-template-chart [categories]="categories" [datasets]="datasets" />

Inputs

Outputs

| Output | 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-bar-chart`

import { SvBarChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-bar-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group" — override its accessible name with ariaLabel
Data table: yes — the plotted values as a screen-reader table
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/bar-chart

<sv-bar-chart [categories]="categories" [datasets]="datasets" orientation="vertical" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. | | barSelect | { category: string; series: string; value: number } | Emitted when a bar is clicked — for drill-down or selection. |

`sv-column-drilldown-chart`

import { SvColumnDrilldownChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-column-drilldown-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group" — override its accessible name with ariaLabel
Data table: none in this component
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/bar-chart

<sv-column-drilldown-chart [categories]="categories" [datasets]="datasets" />

Inputs

| Input | 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[] | [] | Top-level category labels on the X-axis; a drilled-into level shows its own categories instead. | | datasets | DrilldownDataset[] | [] | Top-level series. A series whose drilldown map has an entry for a category makes that column clickable, switching the chart to the sub-level. | | valuePolicy | SvValuePolicy | 'clamp' | What to do with a column this chart cannot draw — a negative value, NaN, Infinity — at whichever level is showing. Such a column used to be hidden outright (and a drillable one became unreachable), and one NaN blanked the axis. - clamp (default) — draw a marked stub at the baseline and disclose the real value under the plot. - reject — refuse the level and show the error state. omit is not available: a column's position is its category index. For data that genuinely goes below zero, use <sv-negative-stack-chart>. | | title | string | '' | Heading shown above the chart (omitted when empty); also used in the generated accessible name. | | rootTitle | string | 'Root' | Label of the first breadcrumb, which stands for the top level and stays visible while drilled down. | | height | number | 320 | Chart height in px. | | options | BarChartOptions | {} | Rendering options: showGrid, showLabels, showLegend, showValues, barGap (default 0.35), barRadius (default 6) and animationDuration. | | customClass | string | '' | Additional CSS classes on the root element. | | ariaLabel | string | '' | Accessible-name override; otherwise a structure summary is generated. |

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-cylindrical-column-chart`

import { SvCylindricalColumnChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-cylindrical-column-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: none in this component
Keyboard: nothing in it takes focus
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/bar-chart

<sv-cylindrical-column-chart [categories]="categories" [datasets]="datasets" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-datetime-category-chart`

import { SvDateTimeCategoryChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-datetime-category-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group"
Data table: none in this component
Keyboard: has focusable controls or marks
Docs, demos & accessibility notes: https://styloviz.dev/docs/datetime-chart

<sv-datetime-category-chart [categories]="days" [series]="series" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. | | categoryHover | DateTimeCategoryEvent | Emitted when a category is hovered or keyboard-focused. | | categorySelect | DateTimeCategoryEvent | Emitted when a category is clicked or activated via keyboard (Enter/Space). |

`sv-default-pie-chart`

import { SvDefaultPieChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-default-pie-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group" — override its accessible name with ariaLabel
Data table: yes — the plotted values as a screen-reader table
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/pie-chart

<sv-default-pie-chart [slices]="slices" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. | | sliceSelect | PieSlice | Emitted when a slice (arc or legend entry) is clicked. |

`sv-gradient-bar-chart`

import { SvGradientBarChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-gradient-bar-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: yes — the plotted values as a screen-reader table
Keyboard: nothing in it takes focus
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/bar-chart

<sv-gradient-bar-chart [categories]="categories" [datasets]="datasets" />

Inputs

| Input | 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[] | [] | Category labels on the Y-axis, one per bar group. | | datasets | BarChartDataset[] | [] | One or more series, drawn side by side as horizontal gradient bars; set gradientColors: [start, end] on a series to override the gradient derived from its color. | | valuePolicy | SvValuePolicy | 'clamp' | What to do with a bar this chart cannot draw — a negative value, NaN, Infinity. This is a zero-based bar chart: height is (value / axisMax) * plotSize, and an SVG rect refuses a negative height outright, so such a bar does not look wrong, it is simply absent. - clamp (default) — draw it at the baseline, mark it there, and disclose its real value under the plot. - reject — refuse the dataset and show the error state. omit is not available: a bar's position is its index within its group, so dropping one value would shift every later bar of that series out from under its own category label. For data that genuinely goes below zero, use <sv-negative-stack-chart>. | | title | string | '' | Heading shown above the chart (omitted when empty); also used in the generated accessible name. | | height | number | 360 | Chart height in px. | | options | BarChartOptions | {} | Rendering options: showGrid (default false), showLabels, showLegend, showValues (default true), barGap (default 0.3), barRadius (default 4), gradientDirection (default 'horizontal') and animationDuration. | | customClass | string | '' | Additional CSS classes on the root element. | | ariaLabel | string | '' | Accessible-name override; otherwise a structure summary is generated. |

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-line-chart`

import { SvLineChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-line-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: yes — the plotted values as a screen-reader table
Keyboard: nothing in it takes focus
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/line-chart

<sv-line-chart [categories]="categories" [series]="series" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-live-stream-chart`

import { SvLiveStreamChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-live-stream-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry, offline
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: none in this component
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/live-charts

<sv-live-stream-chart [series]="series" />

Inputs

| Input | 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. | | demoFeed | boolean | false | Generate the stream's points internally, with Math.random(). For demos and screenshots only. This used to be the only behaviour, so a chart wired to a real feed drew invented numbers alongside the real ones. | | connection | SvConnectionState | 'idle' | State of the socket / EventSource behind push(). A stream that stops moving looks the same whether the source went quiet or the connection dropped, so the chart cannot infer this — only the host knows. idle renders nothing; anything else replaces the LIVE badge with the state. | | reconnectable | boolean | false | Offer a Reconnect button while connection is reconnecting or closed. Off by default: most hosts retry on their own, and a second manual trigger opens a second socket. | | title | string | 'Live Data Stream' | Chart title, rendered in the header and used in the default accessible name. | | subtitle | string | '' | Secondary line shown under the title; hidden when empty. | | series | LiveStreamSeries[] | [ { label: 'Sensor A', color: PALETTE[0… | The streamed lines, one per entry — label for the legend and accessible name, optional color (falls back to the palette). push() values map to these by index; an empty array shows the empty state. | | options | LiveStreamChartOptions | {} | Height, visible window size, point interval, smoothing, grid/legend/area toggles and fixed Y range — see LiveStreamChartOptions. | | ariaLabel | string | '' | Accessible-name override for the chart image. |

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. | | reconnect | void | The user asked to re-open the feed. |

`sv-live-update-chart`

import { SvLiveUpdateChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-live-update-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: none in this component
Keyboard: has focusable controls or marks
Docs, demos & accessibility notes: https://styloviz.dev/docs/live-charts

<sv-live-update-chart [categories]="categories" [sources]="sources" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-performance-chart`

import { SvPerformanceChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-performance-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img"
Data table: none in this component
Keyboard: nothing in it takes focus
Docs, demos & accessibility notes: https://styloviz.dev/docs/other-charts

<sv-performance-chart [data]="readings" />

Inputs

| Input | 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

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-radar-chart`

import { SvRadarChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-radar-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group" — override its accessible name with ariaLabel
Data table: yes — the plotted values as a screen-reader table
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/radar-chart

<sv-radar-chart [series]="series" [axes]="axes" />

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | loading | boolean | false | True while the series is 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 no-data state. | | filtered | boolean | false | True when the emptiness is caused by a filter rather than an empty set. | | axes | readonly RadarAxis[] | [] | The radial axes (one spoke per axis label). | | series | readonly RadarSeries[] | [] | Series to plot; each value array aligns with axes. | | size | number | 300 | Chart diameter in pixels. | | levels | number | 5 | Number of concentric grid levels. | | maxValue | number | 100 | Global maximum used to normalise values (per-axis max overrides). | | showDots | boolean | true | Show point markers at each value. | | filled | boolean | true | Fill the series area (vs stroke-only). | | title | string | '' | Chart title. | | ariaLabel | string | '' | Accessible name override for the chart. Falls back to a generated summary. | | customClass | string | '' | Extra CSS classes applied to the root wrapper. |

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. | | pointHover | RadarPointEvent | Emitted when a vertex is hovered or keyboard-focused. | | pointSelect | RadarPointEvent | Emitted when a vertex is clicked or activated via keyboard (Enter/Space). |

`sv-range-column-chart`

import { SvRangeColumnChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-range-column-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: none in this component
Keyboard: nothing in it takes focus
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/bar-chart

<sv-range-column-chart [categories]="categories" [datasets]="datasets" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-scatter-chart`

import { SvScatterChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-scatter-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group" — override its accessible name with ariaLabel
Data table: yes — the plotted values as a screen-reader table
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/scatter-chart

<sv-scatter-chart [series]="series" />

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | loading | boolean | false | True while the series is 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 no-data state. | | filtered | boolean | false | True when the emptiness is caused by a filter rather than an empty set. | | series | readonly ScatterSeries[] | [] | Point series: each with a name, color and (x, y) points. | | width | number | 480 | Chart width in pixels. | | height | number | 300 | Chart height in pixels. | | dotSize | number | 6 | Point radius in pixels. | | showGrid | boolean | true | Show background grid lines. | | xLabel | string | 'X Axis' | X-axis label. | | yLabel | string | 'Y Axis' | Y-axis label. | | title | string | '' | Chart title. | | ariaLabel | string | '' | Accessible name override for the chart. Falls back to a generated summary. | | customClass | string | '' | Extra CSS classes applied to the root wrapper. | | renderMode | ScatterRenderMode | 'auto' | What the plot draws. | | binThreshold | number | 2000 | Point count at which renderMode: 'auto' switches to density bins. | | canvasThreshold | number | 1200 | Point count above which the points path paints to a canvas instead of emitting one SVG node per datum. | | binRadius | number | 9 | Circumradius of one density hexagon, in pixels. | | maxPoints | number | 0 | Hard cap on how many points are drawn. 0 means no cap. |

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. | | pointHover | ScatterPointEvent | Emitted when a point is hovered or keyboard-focused. | | pointSelect | ScatterPointEvent | Emitted when a point is clicked or activated via keyboard (Enter/Space). | | binHover | ScatterBinEvent | Emitted when a density bin is hovered or keyboard-focused. | | binSelect | ScatterBinEvent | Emitted when a density bin is clicked or activated via keyboard. |

`sv-strip-line-chart`

import { SvStripLineChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-strip-line-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: none in this component
Keyboard: nothing in it takes focus
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/line-chart

<sv-strip-line-chart [categories]="categories" [series]="series" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-trend-line-chart`

import { SvTrendLineChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-trend-line-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="img" — override its accessible name with ariaLabel
Data table: none in this component
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/line-chart

<sv-trend-line-chart [categories]="categories" [series]="series" />

Inputs

Outputs

| Output | Type | Description | | --- | --- | --- | | retry | void | The host should re-run the failed load. |

`sv-waterfall-chart`

import { SvWaterfallChartComponent } from '@styloviz/charts';

Tier: Free · twin: sv-waterfall-chart-pro in @styloviz-pro/charts
Async states: loading, empty, error, retry
Name: the SVG is role="group" — override its accessible name with ariaLabel
Data table: yes — the plotted values as a screen-reader table
Keyboard: has focusable controls or marks
Caveats: stated in text under the plot, not only drawn
Docs, demos & accessibility notes: https://styloviz.dev/docs/waterfall-chart

<sv-waterfall-chart [data]="data" />

Inputs

| Input | 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. | | data | WaterfallPoint[] | [] | The waterfall series, in the order it should be read. Order is the meaning here, not a presentation choice (audit item CH-18-I3). Each bar starts where the previous one ended, so moving a step changes every running total after it: [+100, −50, ×2] and [+100, ×2, −50] end at 100 and 150 from the same three facts. This component therefore never sorts — not by label, not by magnitude, not to put totals last. What you pass is what is read, and a series assembled from an unordered source (a Map, an object's keys, a Promise.all result) has to be put in order by the caller before it gets here. | | valuePolicy | SvValuePolicy | 'clamp' | What to do with a step this chart cannot draw — one whose value is absent, NaN or Infinity. A negative is not one of these: a waterfall is built out of falls as much as rises. - clamp (default) — the step moves the running total by nothing, is marked in the plot, and is named under it. Every later bar keeps its position. - reject — refuse the series and show the error state. omit is not available: a bar's position is its place in a sequence, so dropping one silently rewrites the arithmetic of every bar after it. render is not available either — there is no honest way to draw a step of unknown size. | | totalTolerance | number | 0 | How far a stated subtotal / total may sit from the figure its steps add up to before the chart reports a discrepancy, in data units. 0 (the default) means they must agree, subject to a floating-point band that scales with the numbers involved — see FLOAT_NOISE. Raise it when the source rounds: a ledger kept in cents but charted in millions reconciles to within 0.000005, and that is a rounding artefact rather than a hole. | | title | string | '' | Chart title displayed above the SVG. | | orientation | WaterfallOrientation | 'vertical' | Layout direction. | | height | number | 380 | SVG height in pixels. | | options | WaterfallChartOptions | {} | Rendering and feature options. | | customClass | string | '' | Extra CSS classes applied to the root wrapper. | | ariaLabel | string | '' | Accessible-name override for the chart. When empty, a concise summary is generated; the full series is always exposed through a visually-hidden table. |

Outputs

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

Documentation

Full API reference and live demos: https://styloviz.dev/docs

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@styloviz/charts

Installation

Styles (required)

Usage

Components

Free ↔ Pro twin map

Exports

API reference

sv-axis-label-template-chart

Inputs

Outputs

sv-bar-chart

Inputs

Outputs

sv-column-drilldown-chart

Inputs

Outputs

sv-cylindrical-column-chart

Inputs

Outputs

sv-datetime-category-chart

Inputs

Outputs

sv-default-pie-chart

Inputs

Outputs

sv-gradient-bar-chart

Inputs

Outputs

sv-line-chart

Inputs

Outputs

sv-live-stream-chart

Inputs

Outputs

sv-live-update-chart

Inputs

Outputs

sv-performance-chart

Inputs

Outputs

sv-radar-chart

Inputs

Outputs

sv-range-column-chart

Inputs

Outputs

sv-scatter-chart

Inputs

Outputs

sv-strip-line-chart

Inputs

Outputs

sv-trend-line-chart

Inputs

Outputs

sv-waterfall-chart

Inputs

Outputs

Documentation

License

`sv-axis-label-template-chart`

`sv-bar-chart`

`sv-column-drilldown-chart`

`sv-cylindrical-column-chart`

`sv-datetime-category-chart`

`sv-default-pie-chart`

`sv-gradient-bar-chart`

`sv-line-chart`

`sv-live-stream-chart`

`sv-live-update-chart`

`sv-performance-chart`

`sv-radar-chart`

`sv-range-column-chart`

`sv-scatter-chart`

`sv-strip-line-chart`

`sv-trend-line-chart`

`sv-waterfall-chart`