Home Docs

Chart

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
 nuget package, as described in the Optional steps of the Getting started page.

Usage

API

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

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.


Or you can review / edit this page on GitHub.


Or you can review / edit this component on GitHub.

  • On this page