# Chart
## Description
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.
## 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. |
## Sub Classes
### 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). |
## Examples
\n**Smooth line with area fill**:
```razor
\n**Grouped**:
```razor
\n**Stacked area**:
```razor
\n**Pie**:
```razor
\n**Polar area**:
```razor
\n**Two players**:
```razor
\n**Scatter**:
```razor
\n**Bar + line**:
```razor
\n**Rainfall + temperature**:
```razor
@* No top-level Type: each dataset declares its own (Bar/Line). *@
\n**Fixed min / max**:
```razor
\n**Daily series (auto unit)**:
```razor
();
double v = 100;
for (int i = 0; i < 60; i++)
{
v += rnd.NextDouble() * 20 - 9;
pts.Add(new BitChartDataPoint(start.AddDays(i).ToOADate(), Math.Round(v, 1)));
}
return new BitChartData
{
Datasets = { new BitChartDataset { Label = "Price", BorderColor = "#36a2eb", Tension = 0.3, Points = pts, PointRadius = 0 } }
};
}
```
\n**Forced month unit + custom format**:
```razor
\n**Interactive legend controls**:
```razor
@* Bind controls to legend options; the chart recomputes on each change. *@
...Top/Bottom/Left/Right...
...Start/Center/End...
\n**Title & footer callbacks**:
```razor
\n**Threshold lines**:
```razor
\n**Bars**:
```razor
Duration @_duration ms
Easing
ease-out
ease-in-out
spring
linear
Stagger @_stagger ms/el
Randomize data
```
```csharp
private int _duration = 800;
private string _easing = "cubic-bezier(.34,1.56,.64,1)";
private int _stagger = 60;
private BitChartData _data = Build();
private readonly Random _rnd = new();
// Animation maps to CSS transitions in the browser.
private BitChartOptions Opts() => new()
{
Animation = new BitChartAnimationOptions { Duration = _duration, Easing = _easing, DelayBetween = _stagger },
Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }
};
private static BitChartData Build() => new()
{
Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
Datasets =
{
new BitChartDataset { Label = "Value", Data = new() { 40, 65, 50, 80, 60, 72, 55 },
BackgroundColor = "#36a2eb", BorderRadius = 6 }
}
};
private void Randomize()
{
var d = _data.Datasets[0].Data;
for (int i = 0; i < d.Count; i++) d[i] = _rnd.Next(20, 100);
_data = new BitChartData { Labels = _data.Labels, Datasets = { _data.Datasets[0] } };
}
```
\n**Line draw-on**:
```razor
Duration @_duration ms
Easing
ease-out
ease-in-out
spring
linear
Stagger @_stagger ms/el
Randomize data
```
```csharp
private int _duration = 800;
private string _easing = "cubic-bezier(.34,1.56,.64,1)";
private int _stagger = 60;
private BitChartData _data = Build();
private readonly Random _rnd = new();
private BitChartOptions Opts() => new()
{
Animation = new BitChartAnimationOptions { Duration = _duration, Easing = _easing, DelayBetween = _stagger },
Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }
};
private static BitChartData Build() => new()
{
Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
Datasets =
{
new BitChartDataset { Label = "Trend", Data = new() { 40, 65, 50, 80, 60, 72, 55 },
BorderColor = "#9966ff", Tension = 0.4, PointRadius = 4, PointBackgroundColor = "#9966ff" }
}
};
private void Randomize()
{
var d = _data.Datasets[0].Data;
for (int i = 0; i < d.Count; i++) d[i] = _rnd.Next(20, 100);
_data = new BitChartData { Labels = _data.Labels, Datasets = { _data.Datasets[0] } };
}
```
\n**Color by sign**:
```razor
\n**Decimated line (zoom + pan)**:
```razor