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.

ForceAnimation (whole page)

Usage

Smooth line with area fill

<BitChart Type="BitChartType.Line" Data="Filled()" Options="_legendBottom" />
@code {
    private readonly BitChartOptions _legendBottom = new()
    {
        Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }
    };
    
    private BitChartData Filled() => new()
    {
        Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
        Datasets =
        {
            new BitChartDataset { Label = "Visitors", Data = new() { 120, 190, 160, 250, 220, 300, 280 },
                BorderColor = "#36a2eb", Tension = 0.4, Fill = BitChartFillMode.Origin }
        }
    };
}

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.

Visitors

Straight lines

<BitChart Type="BitChartType.Line" Data="MonthlySales()" Options="_legendBottom" />
@code {
    private readonly BitChartOptions _legendBottom = new()
    {
        Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }
    };
    
    private BitChartData MonthlySales() => new()
    {
        Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
        Datasets =
        {
            new BitChartDataset { Label = "2025", Data = new() { 65, 59, 80, 81, 56, 55, 72 },
                BorderColor = "#36a2eb", BackgroundColor = "#36a2eb", Tension = 0.4, Fill = BitChartFillMode.None },
            new BitChartDataset { Label = "2026", Data = new() { 28, 48, 40, 60, 86, 92, 78 },
                BorderColor = "#ff6384", BackgroundColor = "#ff6384", Tension = 0.4, Fill = BitChartFillMode.None }
        }
    };
}

Two series without smoothing (tension 0).

2025

2026

Stepped line

<BitChart Type="BitChartType.Line" Data="Stepped()" Options="_legendBottom" />
@code {
    private readonly BitChartOptions _legendBottom = new()
    {
        Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }
    };
    
    private BitChartData Stepped() => new()
    {
        Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
        Datasets =
        {
            new BitChartDataset { Label = "Plan", Data = new() { 10, 10, 25, 25, 40, 40, 55 },
                BorderColor = "#4bc0c0", Stepped = BitChartSteppedLine.Before }
        }
    };
}

A stepped line interpolates between points as steps (Stepped = BitChartSteppedLine.Before).

Plan

Dashed border with custom points

<BitChart Type="BitChartType.Line" Data="Dashed()" Options="_legendBottom" />
@code {
    private readonly BitChartOptions _legendBottom = new()
    {
        Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }
    };
    
    private BitChartData Dashed() => new()
    {
        Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
        Datasets =
        {
            new BitChartDataset { Label = "Forecast", Data = new() { 30, 42, null, 55, 48, 67, 70 },
                BorderColor = "#9966ff", BorderDash = new() { 6, 4 }, PointStyle = BitChartPointStyle.Star,
                PointRadius = 6, SpanGaps = true }
        }
    };
}

A dashed border (BorderDash), star point markers and gap handling (SpanGaps) for a null value.

Forecast

Logarithmic Y axis

<BitChart Type="BitChartType.Line" Data="Log()" Options="_logOptions" />
@code {
    private readonly BitChartOptions _logOptions = new()
    {
        Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Logarithmic } }
    };
    
    private BitChartData Log() => new()
    {
        Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
        Datasets =
        {
            new BitChartDataset { Label = "Growth", Data = new() { 1, 10, 100, 1000, 5000, 20000, 80000 },
                BorderColor = "#ff6384", Tension = 0.2 }
        }
    };
}

A logarithmic value axis handles data that spans several orders of magnitude.

Growth

Per-segment styling

<BitChart Type="BitChartType.Line" Data="Segmented()" Options="_legendBottom" />
@code {
    private readonly BitChartOptions _legendBottom = new()
    {
        Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }
    };
    
    private BitChartData Segmented() => new()
    {
        Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
        Datasets =
        {
            new BitChartDataset
            {
                Label = "Flow",
                Data = new() { 40, 55, 48, 70, 62, 80, 72 },
                BorderColor = "#36a2eb",
                BorderWidth = 3,
                Segment = new BitChartLineSegmentStyle
                {
                    BorderColor = ctx => ctx.EndValue < ctx.StartValue ? "#ff6384" : "#2ecc71",
                    BorderDash = ctx => ctx.StartIndex >= 4 ? new double[] { 6, 4 } : null
                }
            }
        }
    };
}

Each line segment is styled from its own context: up = green, down = red, projection dashed.

Flow

Monotone smoothing

<BitChart Type="BitChartType.Line" Data="Monotone()" Options="_legendBottom" />
@code {
    private readonly BitChartOptions _legendBottom = new()
    {
        Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }
    };
    
    private BitChartData Monotone() => new()
    {
        Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" },
        Datasets =
        {
            new BitChartDataset { Label = "Cardinal (tension)", Data = new() { 10, 12, 60, 62, 30, 32, 70 },
                BorderColor = "#c9cbcf", Tension = 0.5, PointRadius = 3, PointBackgroundColor = "#c9cbcf" },
            new BitChartDataset { Label = "Monotone", Data = new() { 10, 12, 60, 62, 30, 32, 70 },
                BorderColor = "#36a2eb", CubicInterpolationMode = BitChartCubicInterpolationMode.Monotone,
                PointRadius = 3, PointBackgroundColor = "#36a2eb" }
        }
    };
}

Monotone cubic interpolation smooths the line without overshooting the data points.

Cardinal (tension)

Monotone

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.

Line chart with 2 data series.
Series	Jan	Feb	Mar	Apr	May	Jun	Jul
2025	65	59	80	81	56	55	72
2026	28	48	40	60	86	92	78

Line chart with 2 data series.
Series	Jan	Feb	Mar	Apr	May	Jun	Jul
Cardinal (tension)	10	12	60	62	30	32	70
Monotone	10	12	60	62	30	32	70