Skip to content
BlazorUI

Extras

Chart

Bit.BlazorUI.Extras

A native Blazor charting component rendered entirely with SVG. The API closely mirrors Chart.js: configure it with a BitChartType plus BitChartData and BitChartOptions (or a single BitChartConfig). It supports line, bar, area, pie, doughnut, polar area, radar, scatter, bubble and mixed charts, with scales, legends, tooltips, annotations, animations, scriptable options and zoom/pan.

Notes

To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Smooth line with area fill

A line chart plots data points on a line, often to show a trend. Here it is smoothed (tension 0.4) and filled to the origin.
120140160180200220240260280300JanFebMarAprMayJunJul
Visitors
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Visitors120190160250220300280

Straight lines

Two series without smoothing (tension 0).
2030405060708090100JanFebMarAprMayJunJul
2025
2026
Line chart with 2 data series.
SeriesJanFebMarAprMayJunJul
202565598081565572
202628484060869278

Stepped line

A stepped line interpolates between points as steps (Stepped = BitChartSteppedLine.Before).
10152025303540455055JanFebMarAprMayJunJul
Plan
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Plan10102525404055

Dashed border with custom points

A dashed border (BorderDash), star point markers and gap handling (SpanGaps) for a null value.
303540455055606570JanFebMarAprMayJunJul
Forecast
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Forecast304255486770

Logarithmic Y axis

A logarithmic value axis handles data that spans several orders of magnitude.
Growth
1101001,00010,000JanFebMarAprMayJunJul
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Growth110100100050002000080000

Per-segment styling

Each line segment is styled from its own context: up = green, down = red, projection dashed.
404550556065707580JanFebMarAprMayJunJul
Flow
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Flow40554870628072

Monotone smoothing

Monotone cubic interpolation smooths the line without overshooting the data points.
10152025303540455055606570JanFebMarAprMayJunJul
Cardinal (tension)
Monotone
Line chart with 2 data series.
SeriesJanFebMarAprMayJunJul
Cardinal (tension)10126062303270
Monotone10126062303270

API

Every parameter, public member, sub-class and enum this component exposes.

BitChart parameters

Name Type Default value Description
Config BitChartConfig? null Full configuration (type + data + options). Takes precedence over Type/Data/Options when set.
Type BitChartType BitChartType.Line The chart type: Line, Bar, Radar, Pie, Doughnut, PolarArea, Bubble or Scatter.
Data BitChartData? null The chart data: labels and datasets.
Options BitChartOptions? null The chart options: scales, plugins (title, legend, tooltip), interaction, animation and zoom.
Width string 100% CSS width of the chart container.
Height string? null Optional CSS height of the chart container. When null the height follows the aspect ratio.
Class string? null Custom CSS class applied to the root element of the chart.
Style string? null Custom CSS style applied to the root element of the chart.
AriaLabel string? null Accessible label for the chart. When null a summary is generated from the title and datasets.
GenerateTable bool true Renders a visually-hidden data table for screen readers.
RespectReducedMotion bool true When true, animations are disabled for users who requested reduced motion (prefers-reduced-motion: reduce). Set to false to always animate regardless of the OS setting.
TooltipTemplate RenderFragment<BitChartTooltipContext>? null Optional custom tooltip template. When set it replaces the default tooltip body.
OnElementClick EventCallback<(int DatasetIndex, int DataIndex)> Callback raised when a data element (point, bar, arc, ...) is clicked.

BitChartConfig properties

A complete chart configuration bundling the type, data and options.

Name Type Default value Description
Type BitChartType BitChartType.Line The chart type.
Data BitChartData new() The labels and datasets.
Options BitChartOptions new() The scales, plugins, interaction, animation and zoom options.

BitChartData properties

The chart data, mirroring Chart.js data: labels + datasets.

Name Type Default value Description
Labels List<string> new() The category labels shared by the datasets (used by cartesian, radar, pie and polar charts).
Datasets List<BitChartDataset> new() The datasets to render. Each dataset carries either a list of values (Data) or points (Points).

BitChartDataset properties

A single dataset, mirroring Chart.js dataset configuration.

Name Type Default value Description
Label string? null Dataset label shown in legends and tooltips.
Data List<double?> new() Per-index values (line, bar, radar, pie, doughnut, polarArea).
Points List<BitChartDataPoint>? null Point data (x, y[, r]) for scatter/bubble charts. When set, takes precedence over Data.
Type BitChartType? null Optional per-dataset type override, used to build mixed charts.
BackgroundColor string? null The fill color of the dataset (bars, arcs, points and area fills).
BorderColor string? null The line/border color of the dataset.
Fill BitChartFillMode BitChartFillMode.None Area fill mode for line/radar datasets (None, Origin, Start, End, Stack, Dataset, Value).
Tension double 0 Bezier curve tension for line datasets (0 = straight lines).

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.