Line

Bar

Area

Pie & Doughnut

Polar area

Radar

Scatter & Bubble

Mixed

Multi-axis

Scales

Time

Titles

Legend

Tooltips

Interaction

Data labels

Annotations

Trendlines

Animations

Scriptable

Zoom & Pan

Live data

Localization

Export

\n**Smooth line with area fill**: ```razor ``` ```csharp 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 } } }; ``` \n**Dashed border with custom points**: ```razor ``` ```csharp 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 } } }; ``` \n**Logarithmic Y axis**: ```razor ``` ```csharp 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 } } }; ``` \n**Per-segment styling**: ```razor ``` ```csharp 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 } } } }; ``` \n**Sparkline**: ```razor @foreach (var tile in _tiles) {

@tile.Caption

@tile.Value

} ``` ```csharp // Sparkline hides the axes, grid, legend and title; turning off MaintainAspectRatio lets the // chart take the tile's own height instead of one derived from its width. private readonly BitChartOptions _sparkline = new() { Sparkline = true, MaintainAspectRatio = false, Layout = new BitChartLayoutOptions { Padding = 2 } }; private sealed record SparklineTile(string Caption, string Value, BitChartType Type, BitChartData Data); private readonly List _tiles = [ new("Sessions", "12,480", BitChartType.Line, Spark("#36a2eb", true, 30, 34, 31, 40, 44, 41, 52, 58, 55, 64)), new("Signups", "934", BitChartType.Bar, Spark("#4bc0c0", false, 12, 18, 15, 22, 19, 26, 24, 31, 28, 35)), new("Errors", "17", BitChartType.Line, Spark("#ff6384", true, 22, 19, 24, 16, 14, 18, 11, 9, 12, 7)) ]; private static BitChartData Spark(string color, bool line, params double?[] values) => new() { // A category axis spans the labels, so a sparkline still needs one per value - blank, since the // tile shows no axis - or every point lands on the same x. Labels = [.. values.Select(_ => "")], Datasets = { new BitChartDataset { Data = [.. values], BorderColor = color, BackgroundColor = color, PointRadius = 0, BorderWidth = 2, Tension = 0.35, Fill = line ? BitChartFillMode.Origin : BitChartFillMode.None, FillColor = line ? BitChartColorUtil.WithAlpha(color, 0.18) : null, BorderRadius = 2 } } }; ```

\n**Grouped**: ```razor ``` ```csharp private readonly BitChartOptions _bottom = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; private BitChartData Revenue() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Product A", Data = new() { 12, 19, 14, 22, 18, 25, 20 }, BackgroundColor = "#36a2eb" }, new BitChartDataset { Label = "Product B", Data = new() { 8, 11, 17, 9, 14, 12, 19 }, BackgroundColor = "#ff9f40" }, new BitChartDataset { Label = "Product C", Data = new() { 5, 7, 9, 12, 8, 10, 14 }, BackgroundColor = "#4bc0c0" } } }; ``` \n**Stacked**: ```razor ``` ```csharp private readonly BitChartOptions _stacked = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Category, Stacked = true }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Stacked = true, BeginAtZero = true } } }; // Revenue() returns 3 datasets (Product A/B/C) over Jan..Jul. ``` \n**Horizontal**: ```razor ``` ```csharp private readonly BitChartOptions _horizontal = new() { IndexAxis = BitChartIndexAxis.Y, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } } }; private BitChartData PerColor() => new() { Labels = { "Red", "Blue", "Teal", "Orange", "Purple" }, Datasets = { new BitChartDataset { Label = "Votes", Data = new() { 12, 19, 7, 15, 9 }, BackgroundColors = new() { "#ff6384", "#36a2eb", "#4bc0c0", "#ff9f40", "#9966ff" }, BorderRadius = 6 } } }; ``` \n**Floating bars**: ```razor ``` ```csharp private readonly BitChartOptions _noLegend = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } } }; private BitChartData Floating() => new() { Labels = { "Mon", "Tue", "Wed", "Thu", "Fri" }, Datasets = { new BitChartDataset { Label = "Temp range (°C)", BackgroundColor = "#ff9f40", BorderRadius = 4, RangeData = new() { (8, 16), (10, 19), (7, 14), (11, 21), (9, 18) } } } }; ``` \n**100% stacked**: ```razor ``` ```csharp private readonly BitChartOptions _stacked100 = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Category, Stacked = true }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Stacked = true, Stacked100 = true, Ticks = new BitChartTickOptions { Suffix = "%" } } } }; // Revenue() returns 3 datasets (Product A/B/C) over Jan..Jul. ``` \n**Pattern fills**: ```razor ``` ```csharp private readonly BitChartOptions _bottom = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; private BitChartData Patterned() => new() { Labels = { "Alpha", "Beta", "Gamma", "Delta" }, Datasets = { new BitChartDataset { Label = "A", Data = new() { 40, 55, 35, 60 }, BorderColor = "#36a2eb", BorderWidth = 1, BackgroundPattern = new BitChartFillPattern(BitChartPatternStyle.DiagonalUp, "#36a2eb", "rgba(54,162,235,0.12)") }, new BitChartDataset { Label = "B", Data = new() { 28, 42, 50, 33 }, BorderColor = "#ff6384", BorderWidth = 1, BackgroundPattern = new BitChartFillPattern(BitChartPatternStyle.Dots, "#ff6384", "rgba(255,99,132,0.10)") } } }; ``` \n**Stacked groups**: ```razor ``` ```csharp private readonly BitChartOptions _stackedGroups = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Category, Stacked = true }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Stacked = true, BeginAtZero = true } } }; private BitChartData StackedGroups() => new() { Labels = { "Q1", "Q2", "Q3", "Q4" }, Datasets = { new BitChartDataset { Label = "2025 · New", Stack = "2025", Data = new() { 20, 28, 24, 32 }, BackgroundColor = "#36a2eb" }, new BitChartDataset { Label = "2025 · Renew", Stack = "2025", Data = new() { 12, 16, 14, 18 }, BackgroundColor = "#9cd0f5" }, new BitChartDataset { Label = "2026 · New", Stack = "2026", Data = new() { 26, 30, 29, 38 }, BackgroundColor = "#ff6384" }, new BitChartDataset { Label = "2026 · Renew", Stack = "2026", Data = new() { 15, 18, 17, 22 }, BackgroundColor = "#ffb1c1" } } }; ``` \n**Minimum length and a custom base**: ```razor ``` ```csharp private readonly BitChartOptions _target = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Title = new BitChartScaleTitleOptions { Display = true, Text = "Units" } } } }; private BitChartData AgainstTarget() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Units vs target", Data = new() { 118, 96, 100.2, 131, 88, 104, 112 }, Base = 100, // bars grow from the target instead of zero MinBarLength = 6, // a value that is almost on target still shows BorderRadius = 3, BackgroundColorFn = ctx => ctx.Value >= 100 ? "#2ecc71" : "#ff6384" } } }; ``` \n**Overlaid series and skipped gaps**: ```razor ``` ```csharp private BitChartData Overlay() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { // Grouped = false steps out of the side-by-side layout and keeps the whole band. new BitChartDataset { Label = "Budget", Grouped = false, Data = new() { 20, 22, 24, 26, 28, 30, 32 }, BackgroundColor = "rgba(120,130,145,0.25)" }, new BitChartDataset { Label = "Team A", SkipNull = true, Data = new() { 12, 19, 14, 22, 18, 25, 20 }, BackgroundColor = "#36a2eb", BorderRadius = 3 }, // The nulls leave no gap: Team A widens over those categories. new BitChartDataset { Label = "Team B", SkipNull = true, Data = new() { 8, null, 17, null, 14, 12, 19 }, BackgroundColor = "#ff9f40", BorderRadius = 3 } } }; ``` \n**Error bars**: ```razor ``` ```csharp private BitChartData Measured() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Response time (ms)", Data = new() { 120, 138, 131, 156, 149, 162, 158 }, BackgroundColor = "rgba(54,162,235,0.55)", BorderColor = "#36a2eb", BorderRadius = 4, // A number is a symmetric interval; BitChartErrorBar(minus, plus) is asymmetric; // null leaves that value without a whisker. ErrorData = [12, 9, 15, new BitChartErrorBar(6, 24), 11, null, 8], ErrorBarColor = "#1f2733" } } }; ``` \n**Waterfall**: ```razor ``` ```csharp // Each step is a signed change, except the two totals which are drawn from the axis. private static readonly (string Label, double Step, bool IsTotal)[] Steps = [ ("Opening", 120, true), ("New", 46, false), ("Upsell", 18, false), ("Churn", -32, false), ("Discounts", -11, false), ("Expansion", 24, false), ("Closing", 0, true) ]; private readonly BitChartOptions _waterfall = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, Tooltip = new BitChartTooltipOptions { Callbacks = new BitChartTooltipCallbacks { Label = item => { var (label, step, isTotal) = Steps[item.DataIndex]; return isTotal ? $"{label}: {WaterfallTotalAt(item.DataIndex):N0}" : $"{label}: {step:+#,##0;-#,##0;0}"; } } } } }; // The running total once the given step has been applied. private static double WaterfallTotalAt(int index) { double total = 0; for (int i = 0; i <= index; i++) total += Steps[i].Step; return total; } private BitChartData Waterfall() { // RangeData floats each bar between the running total before and after its step. var ranges = new List<(double Low, double High)?>(); double running = 0; foreach (var (_, step, isTotal) in Steps) { if (isTotal) { running += step; ranges.Add((0, running)); continue; } double next = running + step; ranges.Add((Math.Min(running, next), Math.Max(running, next))); running = next; } return new BitChartData { Labels = Steps.Select(s => s.Label).ToList(), Datasets = { new BitChartDataset { Label = "MRR", RangeData = ranges, BorderRadius = 3, BackgroundColorFn = ctx => { var (_, step, isTotal) = Steps[ctx.DataIndex]; return isTotal ? "#6b7785" : step >= 0 ? "#2ecc71" : "#ff6384"; } } } }; } ```

\n**Stacked area**: ```razor ``` ```csharp private readonly BitChartOptions _stacked = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Category }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Stacked = true, BeginAtZero = true } } }; private BitChartData Stacked() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Organic", Data = new() { 30, 40, 35, 50, 45, 60, 55 }, BorderColor = "#36a2eb", Fill = BitChartFillMode.Stack }, new BitChartDataset { Label = "Paid", Data = new() { 20, 25, 30, 28, 35, 30, 40 }, BorderColor = "#ff6384", Fill = BitChartFillMode.Stack }, new BitChartDataset { Label = "Referral", Data = new() { 10, 12, 15, 18, 14, 20, 22 }, BorderColor = "#4bc0c0", Fill = BitChartFillMode.Stack } } }; ``` \n**Range (fill between datasets)**: ```razor ``` ```csharp private readonly BitChartOptions _legendBottom = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; private BitChartData Range() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Max", Data = new() { 28, 32, 30, 36, 40, 44, 42 }, BorderColor = "#ff9f40", Fill = BitChartFillMode.Dataset, FillTargetIndex = 1, FillColor = "rgba(255,159,64,0.18)" }, new BitChartDataset { Label = "Min", Data = new() { 14, 16, 15, 20, 24, 26, 23 }, BorderColor = "#36a2eb", Fill = BitChartFillMode.None } } }; ``` \n**Fill boundaries**: ```razor ``` ```csharp private readonly BitChartOptions _legendBottom = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; private BitChartData Boundaries() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Origin", Data = new() { 10, -20, 30, -10, 25, -5, 15 }, BorderColor = "#36a2eb", Fill = BitChartFillMode.Origin, FillColor = "rgba(54,162,235,0.15)", Tension = 0.3 }, new BitChartDataset { Label = "Start (top)", Data = new() { 40, 35, 45, 38, 50, 44, 55 }, BorderColor = "#ff6384", Fill = BitChartFillMode.Start, FillColor = "rgba(255,99,132,0.12)", Tension = 0.3 } } }; ```

\n**Pie**: ```razor ``` ```csharp private readonly BitChartOptions _right = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Right } } }; private BitChartData Traffic() => new() { Labels = { "Direct", "Organic", "Referral", "Social", "Email" }, Datasets = { new BitChartDataset { Label = "Sessions", Data = new() { 300, 500, 180, 240, 120 } } } }; ``` \n**Half doughnut (gauge)**: ```razor ``` ```csharp private readonly BitChartOptions _gauge = new() { CutoutPercentage = 65, CircumferenceDegrees = 180, RotationDegrees = -90, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; private BitChartData Gauge() => new() { Labels = { "Used", "Free" }, Datasets = { new BitChartDataset { Data = new() { 68, 32 }, BackgroundColors = new() { "#ff6384", "#e6e9ef" } } } }; ``` \n**Multi-ring**: ```razor ``` ```csharp private readonly BitChartOptions _right = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Right } } }; private BitChartData MultiRing() => new() { Labels = { "Mobile", "Desktop", "Tablet" }, Datasets = { new BitChartDataset { Label = "2025", Data = new() { 55, 35, 10 } }, new BitChartDataset { Label = "2026", Data = new() { 62, 28, 10 } } } }; ``` \n**Center text (KPI)**: ```razor ``` ```csharp private readonly BitChartOptions _centerText = new() { CutoutPercentage = 68, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Right }, Custom = { new BitChartCenterTextPlugin("1,340", "sessions") } } }; // Traffic(): Direct/Organic/Referral/Social/Email = 300/500/180/240/120 ``` \n**Spacing, offset and hover**: ```razor ``` ```csharp private readonly BitChartOptions _exploded = new() { CutoutPercentage = 45, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Right } } }; private BitChartData Exploded() => new() { Labels = { "Direct", "Organic", "Referral", "Social", "Email" }, Datasets = { new BitChartDataset { Label = "Sessions", Data = new() { 300, 500, 180, 240, 120 }, SpacingArc = 6, // gap between neighbouring slices Offset = 4, // every slice sits slightly off center HoverOffset = 14, // the hovered one pops out further HoverBackgroundColor = "#1f2733" } } }; ``` \n**Rounded arcs and ring weights**: ```razor ``` ```csharp private readonly BitChartOptions _rounded = new() { CutoutPercentage = 35, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Right } } }; private BitChartData Weighted() => new() { Labels = { "Mobile", "Desktop", "Tablet" }, Datasets = { // Weight 2 vs 1: the outer ring gets two thirds of the available radius. new BitChartDataset { Label = "2026", Data = new() { 62, 28, 10 }, BorderRadius = 8, SpacingArc = 4, Weight = 2 }, new BitChartDataset { Label = "2025", Data = new() { 55, 35, 10 }, BorderRadius = 8, SpacingArc = 4, Weight = 1 } } }; ```

\n**Scatter**: ```razor ``` ```csharp private readonly BitChartOptions _bottom = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom, Labels = new BitChartLegendLabelOptions { UsePointStyle = true } } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Linear, Grace = 0.1 }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Grace = 0.1 } } }; private BitChartData ScatterData() => new() { Datasets = { new BitChartDataset { Label = "Group A", BackgroundColor = "#36a2eb", Points = new() { new(-8, 5), new(-5, 8), new(-3, 2), new(-1, 6), new(0, 9), new(2, 4), new(4, 11), new(6, 7), new(9, 13) } }, new BitChartDataset { Label = "Group B", BackgroundColor = "#ff6384", PointStyle = BitChartPointStyle.Triangle, PointRadius = 5, Points = new() { new(-7, -3), new(-4, -1), new(-2, -6), new(1, -2), new(3, -7), new(5, -1), new(7, -5), new(10, 0) } } } }; ``` \n**Bubble**: ```razor ``` ```csharp private readonly BitChartOptions _bottom = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom, Labels = new BitChartLegendLabelOptions { UsePointStyle = true } } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Linear, Grace = 0.1 }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Grace = 0.1 } } }; private BitChartData BubbleData() => new() { Datasets = { new BitChartDataset { Label = "Markets", BackgroundColor = BitChartColorUtil.WithAlpha("#4bc0c0", 0.5), BorderColor = "#4bc0c0", // BitChartDataPoint(x, y, r) - r drives the bubble radius Points = new() { new(10, 20, 14), new(15, 10, 8), new(20, 30, 22), new(25, 18, 10), new(30, 25, 30), new(35, 12, 6) } } } }; ```

\n**Rainfall + temperature**: ```razor @* No top-level Type: each dataset declares its own (Bar/Line). *@ ``` ```csharp private readonly BitChartOptions _combo = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Position = BitChartPosition.Left, BeginAtZero = true, Title = new BitChartScaleTitleOptions { Display = true, Text = "Rainfall (mm)" } }, ["y2"] = new BitChartScaleOptions { Id = "y2", Type = BitChartScaleType.Linear, Position = BitChartPosition.Right, BeginAtZero = true, Title = new BitChartScaleTitleOptions { Display = true, Text = "Temp (°C)" }, Grid = new BitChartGridOptions { DrawOnChartArea = false }, Ticks = new BitChartTickOptions { Suffix = "°" } } } }; private BitChartData TempAndRainfall() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Rainfall (mm)", Type = BitChartType.Bar, Data = new() { 60, 48, 80, 35, 55, 20, 15 }, BackgroundColor = "rgba(54,162,235,0.5)", BorderColor = "#36a2eb", YAxisID = "y", Order = 1 }, new BitChartDataset { Label = "Temp (°C)", Type = BitChartType.Line, Data = new() { 7, 9, 12, 16, 20, 24, 27 }, BorderColor = "#ff6384", BackgroundColor = "#ff6384", Tension = 0.4, YAxisID = "y2", Order = 0 } } }; ``` \n**Two x-axes**: ```razor ``` ```csharp private readonly BitChartOptions _dualX = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom, Labels = new BitChartLegendLabelOptions { UsePointStyle = true } } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Linear, Position = BitChartPosition.Bottom, Title = new BitChartScaleTitleOptions { Display = true, Text = "Wavelength (nm)" } }, ["x2"] = new BitChartScaleOptions { Id = "x2", Type = BitChartScaleType.Linear, Position = BitChartPosition.Top, Title = new BitChartScaleTitleOptions { Display = true, Text = "Frequency (THz)" }, Grid = new BitChartGridOptions { DrawOnChartArea = false } }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Grace = 0.1 } } }; private BitChartData DualX() => new() { Datasets = { new BitChartDataset { Label = "Visible", BackgroundColor = "#36a2eb", XAxisID = "x", PointRadius = 6, Points = new() { new(450, 20), new(520, 45), new(580, 60), new(640, 38), new(700, 25) } }, new BitChartDataset { Label = "Frequency band", BackgroundColor = "#ff6384", XAxisID = "x2", PointStyle = BitChartPointStyle.Triangle, PointRadius = 6, Points = new() { new(430, 30), new(500, 55), new(600, 40), new(660, 50) } } } }; ```

\n**Fixed min / max**: ```razor ``` ```csharp private readonly BitChartOptions _minMax = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Min = 0, Max = 100 } } }; private BitChartData Series() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Value", Data = new() { 35, 52, 48, 70, 60, 78, 66 }, BorderColor = "#36a2eb", BackgroundColor = "#36a2eb", Tension = 0.3 } } }; ``` \n**Explicit step size**: ```razor ``` ```csharp private readonly BitChartOptions _step = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, BeginAtZero = true, Ticks = new BitChartTickOptions { StepSize = 25 } } } }; // Series(): Jan..Jul = 35/52/48/70/60/78/66 ``` \n**Logarithmic**: ```razor ``` ```csharp private readonly BitChartOptions _log = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Logarithmic } } }; private BitChartData LogData() => 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", BackgroundColor = "#ff6384", Tension = 0.2 } } }; ``` \n**Reversed Y axis**: ```razor ``` ```csharp private readonly BitChartOptions _reverse = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Reverse = true, Min = 1, Max = 10 } } }; private BitChartData Rank() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Rank", Data = new() { 8, 6, 7, 3, 4, 2, 1 }, BorderColor = "#9966ff", BackgroundColor = "#9966ff", Tension = 0.3 } } }; ``` \n**Axes at the zero line**: ```razor ``` ```csharp private readonly BitChartOptions _center = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Linear, Position = BitChartPosition.Center }, ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, Position = BitChartPosition.Center } } }; private BitChartData Quadrants() { var rnd = new Random(11); var pts = new List(); for (int i = 0; i < 40; i++) pts.Add(new BitChartDataPoint(Math.Round(rnd.NextDouble() * 20 - 10, 2), Math.Round(rnd.NextDouble() * 20 - 10, 2))); return new BitChartData { Datasets = { new BitChartDataset { Label = "Samples", Points = pts, BackgroundColor = "#9966ff", PointRadius = 5 } } }; } ```

\n**Interactive legend controls**: ```razor @* Bind controls to legend options; the chart recomputes on each change. *@ Point style Reverse ``` ```csharp private BitChartPosition _position = BitChartPosition.Top; private BitChartAlign _align = BitChartAlign.Center; private bool _usePointStyle; private bool _reverse; private BitChartOptions Live() => new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = _position, Align = _align, Reverse = _reverse, Labels = new BitChartLegendLabelOptions { UsePointStyle = _usePointStyle } } } }; private BitChartData MultiSeries() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Alpha", Data = new() { 65, 59, 80, 81, 56, 55, 72 }, BorderColor = "#36a2eb", BackgroundColor = "#36a2eb", Tension = 0.3 }, new BitChartDataset { Label = "Beta", Data = new() { 28, 48, 40, 60, 86, 92, 78 }, BorderColor = "#ff6384", BackgroundColor = "#ff6384", Tension = 0.3 }, new BitChartDataset { Label = "Gamma", Data = new() { 40, 35, 60, 45, 70, 50, 65 }, BorderColor = "#4bc0c0", BackgroundColor = "#4bc0c0", Tension = 0.3 } } }; ``` \n**Legend title**: ```razor ``` ```csharp private readonly BitChartOptions _titled = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom, Title = "Product lines" } } }; // Revenue(): 3 datasets (Product A/B/C) over Jan..Jul ``` \n**Capping a long legend**: ```razor ``` ```csharp private readonly BitChartOptions _capped = new() { Plugins = new BitChartPluginOptions { // Past 120px the legend scrolls instead of pushing the plot out of the way. Legend = new BitChartLegendOptions { Position = BitChartPosition.Right, MaxHeight = 120 } } }; private BitChartData ManySeries() { var data = new BitChartData { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" } }; for (int i = 0; i < 12; i++) { var values = Enumerable.Range(0, 7) .Select(x => (double?)Math.Round(30 + i * 4 + Math.Sin((x + i) / 1.4) * 12, 1)) .ToList(); data.Datasets.Add(new BitChartDataset { Label = $"Region {i + 1}", Data = values, PointRadius = 0 }); } return data; } ```

\n**Title & footer callbacks**: ```razor ``` ```csharp private readonly BitChartOptions _footer = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom }, Tooltip = new BitChartTooltipOptions { Mode = BitChartInteractionMode.Index, Callbacks = new BitChartTooltipCallbacks { Title = items => items.Count > 0 ? $"Month: {items[0].Label}" : null, Footer = items => $"Total: {items.Sum(i => i.Value):N0}" } } } }; // Revenue(): 3 datasets (Product A/B/C) over Jan..Jul ``` \n**Currency labels**: ```razor ``` ```csharp private readonly BitChartOptions _currency = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom }, Tooltip = new BitChartTooltipOptions { Mode = BitChartInteractionMode.Index, Callbacks = new BitChartTooltipCallbacks { Label = item => $"{item.DatasetLabel}: {item.Value:C0}" } } } }; private BitChartData TwoSeries() => new() { Labels = { "Q1", "Q2", "Q3", "Q4" }, Datasets = { new BitChartDataset { Label = "Revenue", Data = new() { 1200, 1500, 1700, 2100 }, BorderColor = "#36a2eb", BackgroundColor = "#36a2eb", Tension = 0.4 }, new BitChartDataset { Label = "Costs", Data = new() { 800, 950, 1100, 1300 }, BorderColor = "#ff6384", BackgroundColor = "#ff6384", Tension = 0.4 } } }; ``` \n**After-body note**: ```razor ``` ```csharp private readonly BitChartOptions _afterBody = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom }, Tooltip = new BitChartTooltipOptions { Mode = BitChartInteractionMode.Index, Callbacks = new BitChartTooltipCallbacks { AfterBody = items => { if (items.Count < 2) return null; double diff = items[0].Value - items[1].Value; return $"Margin: {diff:N0}"; } } } } }; // TwoSeries(): Revenue & Costs over Q1..Q4 ``` \n**Styled box**: ```razor ``` ```csharp private readonly BitChartOptions _styled = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom }, Tooltip = new BitChartTooltipOptions { Mode = BitChartInteractionMode.Index, BackgroundColor = "#ffffff", TitleColor = "#1f2733", BodyColor = "#3a4452", FooterColor = "#1f2733", BorderColor = "#e0e4ea", BorderWidth = 1, TitleAlign = BitChartAlign.Center, Callbacks = new BitChartTooltipCallbacks { Footer = items => $"{items.Count} series" } } } }; // Revenue(): 3 datasets (Product A/B/C) over Jan..Jul ``` \n**Point-style swatches**: ```razor ``` ```csharp private readonly BitChartOptions _pointStyle = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom, Labels = new BitChartLegendLabelOptions { UsePointStyle = true } }, Tooltip = new BitChartTooltipOptions { Mode = BitChartInteractionMode.Index, UsePointStyle = true } } }; private BitChartData Markers() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Triangles", Data = new() { 20, 35, 28, 45, 38, 52, 44 }, BorderColor = "#4bc0c0", PointBackgroundColor = "#4bc0c0", PointStyle = BitChartPointStyle.Triangle, PointRadius = 5, Tension = 0.3 }, new BitChartDataset { Label = "Diamonds", Data = new() { 12, 22, 18, 30, 26, 38, 32 }, BorderColor = "#ff9f40", PointBackgroundColor = "#ff9f40", PointStyle = BitChartPointStyle.RectRot, PointRadius = 5, Tension = 0.3 } } }; ``` \n**Wrapping a longer note**: ```razor ``` ```csharp private readonly BitChartOptions _wrapped = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, Tooltip = new BitChartTooltipOptions { // A width is what lets the box wrap; without one every row stays on a single line. MaxWidth = 240, Callbacks = new BitChartTooltipCallbacks { AfterBody = items => items.Count == 0 ? null : $"The index blends affordability, transit coverage and air quality, " + $"rebased so the median country reads 70. {items[0].Label} is " + $"{(items[0].Value >= 70 ? "above" : "below")} that median." } } } }; ```

\n**Hover anywhere**: ```razor ``` ```csharp // Intersect is false by default, so no extra configuration is needed. private readonly BitChartOptions _default = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; private BitChartData Series() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Requests", Data = new() { 120, 190, 160, 250, 220, 300, 280 }, BorderColor = "#36a2eb", PointRadius = 0, Tension = 0.3 }, new BitChartDataset { Label = "Errors", Data = new() { 12, 9, 20, 14, 18, 11, 8 }, BorderColor = "#ff6384", PointRadius = 0, Tension = 0.3 } } }; ``` \n**Require an intersection**: ```razor ``` ```csharp private readonly BitChartOptions _intersect = new() { Interaction = new BitChartInteractionOptions { Intersect = true }, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; ``` \n**Interaction modes**: ```razor ``` ```csharp private BitChartInteractionMode _mode = BitChartInteractionMode.Index; private BitChartOptions ModeOptions() => new() { Interaction = new BitChartInteractionOptions { Mode = _mode }, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; ``` \n**Empty state**: ```razor Clear the data ``` ```csharp private bool _hasData = true; private void ToggleEmpty() => _hasData = !_hasData; private BitChartData EmptyDemoData() => _hasData ? Revenue() : new BitChartData(); ``` \n**Linked charts**: ```razor

@(_linked ?? "Hover either chart")

``` ```csharp private string? _linked; private readonly BitChartOptions _linkedOptions = new() { Interaction = new BitChartInteractionOptions { Mode = BitChartInteractionMode.Index }, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; // Both charts report through here; a null context means the pointer has left. private void Link(BitChartTooltipContext? context) => _linked = context is null ? null : $"{context.Title}: " + string.Join(", ", context.Points.Select(p => $"{p.Label} {p.FormattedValue}")); ```

\n**Values on the bars**: ```razor ``` ```csharp private readonly BitChartOptions _outside = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, DataLabels = new BitChartDataLabelOptions { Display = true, Anchor = BitChartAlign.End, Align = BitChartAlign.End, Font = new BitChartFont { Weight = "bold" } } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Display = false, Grace = 0.15 } } }; private BitChartData Sales() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Units", Data = new() { 12, 19, 14, 22, 18, 25, 20 }, BackgroundColor = "#36a2eb", BorderRadius = 6 } } }; ``` \n**Inside the bars**: ```razor ``` ```csharp private readonly BitChartOptions _inside = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, DataLabels = new BitChartDataLabelOptions { Display = true, Anchor = BitChartAlign.End, Align = BitChartAlign.Start, Color = "#fff", BackgroundColor = "rgba(0,0,0,0.35)", Padding = 3, Font = new BitChartFont { Weight = "bold" } } } }; ``` \n**Formatted labels on a line**: ```razor ``` ```csharp private readonly BitChartOptions _line = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, DataLabels = new BitChartDataLabelOptions { Display = true, Offset = 6, Formatter = v => $"{v:N0} k", DisplayFn = (v, _, _) => v > 250 } } }; private BitChartData Traffic() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Visits", Data = new() { 120, 190, 260, 250, 320, 300, 280 }, BorderColor = "#4bc0c0", Tension = 0.35, PointRadius = 4 } } }; ``` \n**Percentages in a doughnut**: ```razor ``` ```csharp private readonly BitChartOptions _doughnut = new() { CutoutPercentage = 55, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Right }, DataLabels = new BitChartDataLabelOptions { Display = true, Anchor = BitChartAlign.Center, Color = "#fff", Font = new BitChartFont { Weight = "bold" }, FormatterCtx = (v, _, _) => $"{v / 1340d * 100:N0}%" } } }; ```

\n**Threshold lines**: ```razor ``` ```csharp private BitChartOptions _lines = default!; protected override void OnInitialized() { _lines = new BitChartOptions { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, Custom = { new BitChartAnnotationPlugin( new BitChartAnnotation { Orientation = BitChartLineOrientation.Horizontal, Value = 80, Color = "#2ecc71", Dash = new() { 6, 4 }, Label = "Target" }, new BitChartAnnotation { Kind = BitChartAnnotationKind.Box, YMin = 0, YMax = 30, Color = "#ff6384", FillColor = "rgba(255,99,132,0.10)", LineWidth = 0, Label = "Low", DrawBehindDatasets = true } ) } } }; } private BitChartData Series() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Score", Data = new() { 20, 45, 60, 35, 75, 90, 70 }, BorderColor = "#36a2eb", Tension = 0.4 } } }; ``` \n**Box + vertical marker**: ```razor ``` ```csharp private BitChartOptions _box = default!; protected override void OnInitialized() { _box = new BitChartOptions { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, Custom = { new BitChartAnnotationPlugin( new BitChartAnnotation { Kind = BitChartAnnotationKind.Box, XIsIndex = true, XMin = 2, XMax = 4, Color = "#9966ff", FillColor = "rgba(153,102,255,0.12)", LineWidth = 1, DrawBehindDatasets = true }, new BitChartAnnotation { Orientation = BitChartLineOrientation.Vertical, XIsIndex = true, Value = 3, Color = "#ff9f40", LineWidth = 2, Label = "Launch" } ) } } }; } private BitChartData Bars() => new() { Labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" }, Datasets = { new BitChartDataset { Label = "Sales", Data = new() { 30, 42, 55, 70, 64, 48, 52 }, BackgroundColor = "#36a2eb" } } }; ``` \n**Ellipse, polygon and point**: ```razor ``` ```csharp _shapes = new BitChartOptions { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, Custom = { new BitChartAnnotationPlugin( // An ellipse takes the same bounds a box does, and is inscribed in them. new BitChartAnnotation { Kind = BitChartAnnotationKind.Ellipse, XIsIndex = true, XMin = 4, XMax = 6, YMin = 65, YMax = 100, Color = "#2ecc71", FillColor = "rgba(46,204,113,0.12)", Label = "Best run" }, // A polygon is centered on one coordinate, sized in pixels, and points up by default. new BitChartAnnotation { Kind = BitChartAnnotationKind.Polygon, XIsIndex = true, XMin = 3, Value = 35, Sides = 3, Radius = 12, Color = "#ff6384", Label = "Dip" }, new BitChartAnnotation { Kind = BitChartAnnotationKind.Point, XIsIndex = true, XMin = 1, Value = 45, Radius = 7, Color = "#9966ff" } ) } } }; ```

\n**Linear regression**: ```razor ``` ```csharp private readonly BitChartOptions _linear = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom }, Custom = { new BitChartTrendlinePlugin(new BitChartTrendline { DatasetIndex = 0 }) } } }; private BitChartData Noisy() => new() { Labels = { "W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10", "W11", "W12" }, Datasets = { new BitChartDataset { Label = "Tickets closed", Data = new() { 18, 26, 21, 33, 28, 39, 31, 44, 38, 51, 46, 57 }, BackgroundColor = "rgba(54,162,235,0.55)", BorderColor = "#36a2eb", BorderRadius = 4 } } }; ``` \n**Projected across the plot**: ```razor ``` ```csharp private readonly BitChartOptions _extended = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom }, Custom = { new BitChartTrendlinePlugin(new BitChartTrendline { DatasetIndex = 0, Extend = true, // run the fit out to both edges of the plot Color = "#ff6384", Label = "trend" }) } } }; ``` \n**Moving average and the mean**: ```razor ``` ```csharp private readonly BitChartOptions _averages = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom }, Custom = { new BitChartTrendlinePlugin( new BitChartTrendline { DatasetIndex = 0, Kind = BitChartTrendlineKind.MovingAverage, Period = 4, Color = "#9966ff", Dash = null, // solid, so it reads as the smoothed series Label = "4-week average" }, new BitChartTrendline { DatasetIndex = 0, Kind = BitChartTrendlineKind.Average, Color = "#c9cbcf", LineWidth = 1.5 }) } } }; private BitChartData Seasonal() => new() { Labels = { "W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10", "W11", "W12" }, Datasets = { new BitChartDataset { Label = "Orders", Data = new() { 42, 61, 38, 70, 45, 78, 52, 84, 49, 90, 58, 96 }, BorderColor = "#4bc0c0", BackgroundColor = "#4bc0c0", PointRadius = 3 } } }; ```

\n**Bars**: ```razor

Duration @_duration ms Easing 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 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**Decimated line (zoom + pan)**: ```razor ``` ```csharp private const int _count = 5000; private const int _samples = 250; private BitChartData _data = default!; private readonly BitChartOptions _options = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, // LTTB downsampling keeps thousands of points smooth. Decimation = new BitChartDecimationOptions { Enabled = true, Samples = _samples, Threshold = 400 }, Tooltip = new BitChartTooltipOptions { Enabled = false } }, Zoom = new BitChartZoomOptions { Enabled = true, Mode = BitChartZoomMode.X }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Time } } }; protected override void OnInitialized() => _data = BuildLargeSeries(_count); ``` \n**Drag-to-zoom box**: ```razor ``` ```csharp // DragZoom + Wheel = false: drag a rectangle to zoom into it. private readonly BitChartOptions _drag = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Zoom = new BitChartZoomOptions { Enabled = true, Mode = BitChartZoomMode.XY, DragZoom = true, Wheel = false } }; // Scatter(): 400-point random cloud (see "Zoom both axes" card) ``` \n**Category-axis zoom**: ```razor ``` ```csharp private readonly BitChartOptions _catZoom = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } }, Zoom = new BitChartZoomOptions { Enabled = true, Mode = BitChartZoomMode.X } }; private BitChartData ManyBars() { var rnd = new Random(11); var labels = Enumerable.Range(1, 40).Select(i => $"D{i}").ToList(); var data = Enumerable.Range(0, 40).Select(_ => (double?)Math.Round(rnd.NextDouble() * 80 + 20, 0)).ToList(); return new BitChartData { Labels = labels, Datasets = { new BitChartDataset { Label = "Daily", Data = data, BackgroundColor = "#4bc0c0" } } }; } ``` \n**Overview and detail**: ```razor First quarter Whole series

Showing @_window

@* The overview strip: the same series with nothing but the line. *@ ``` ```csharp private BitChart? _brush; private BitChartData _brushData = default!; private string _window = "the whole series"; private readonly BitChartOptions _brushOptions = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false }, Decimation = new BitChartDecimationOptions { Enabled = true, Samples = 250, Threshold = 400 } }, Zoom = new BitChartZoomOptions { Enabled = true, Mode = BitChartZoomMode.X }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Time } } }; private readonly BitChartOptions _overview = new() { Sparkline = true, MaintainAspectRatio = false, Plugins = new BitChartPluginOptions { Decimation = new BitChartDecimationOptions { Enabled = true, Samples = 250, Threshold = 400 }, Tooltip = new BitChartTooltipOptions { Enabled = false } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Time } } }; // Zooms the detail chart to a fraction of the full series. private void ShowWindow(double from, double to) { var points = _brushData.Datasets[0].Points!; double min = points[0].X, span = points[^1].X - min; _brush!.ZoomTo("x", min + span * from, min + span * to); } // OnZoomChange fires after every wheel, drag and ZoomTo, so the readout always matches the view. private void ReadWindow() { // No range means nothing is zoomed - a reset leaves the readout claiming the old window otherwise. if (_brush?.GetAxisRange("x") is not { } range) { _window = "the whole series"; return; } _window = $"{DateTime.FromOADate(range.Min):MMM d, HH:mm} to {DateTime.FromOADate(range.Max):MMM d, HH:mm}"; } ```

\n**Streaming updates**: ```razor @(_timer is null ? "Start" : "Stop") Add one reading ``` ```csharp private const int WindowSize = 40; private BitChart? _live; private System.Timers.Timer? _timer; // One data object, appended to in place - Refresh() is what makes the chart re-read it. private readonly BitChartData _stream = new() { Datasets = { new BitChartDataset { Label = "Throughput", BorderColor = "#36a2eb", FillColor = "rgba(54,162,235,0.15)", Fill = BitChartFillMode.Origin, PointRadius = 0, Tension = 0.3 } } }; // A live feed redraws several times a second, so the entry animation is turned off. private readonly BitChartOptions _streamOptions = new() { Animation = new BitChartAnimationOptions { Animate = false }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Type = BitChartScaleType.Linear, BeginAtZero = true, SuggestedMax = 100 } }, Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Display = false } } }; private void Toggle() { if (_timer is not null) { Stop(); return; } _timer = new System.Timers.Timer(700) { AutoReset = true }; _timer.Elapsed += async (_, _) => await InvokeAsync(AddReading); _timer.Start(); } private void AddReading() { Append(); // append one value, drop the oldest _live?.Refresh(); // rebuild the scene from the data as it now stands StateHasChanged(); } ``` \n**Showing and hiding series from code**: ```razor @for (int i = 0; i < _revenue.Datasets.Count; i++) { var index = i; @_revenue.Datasets[index].Label } Show all ``` ```csharp private BitChart? _visibility; private readonly BitChartData _revenue = Revenue(); private readonly BitChartOptions _visibilityOptions = new() { Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; // The same state the legend drives: // chart.ToggleDataset(i) / SetDatasetVisible(i, visible) / IsDatasetVisible(i) // chart.ToggleDataIndex(i) for one pie/doughnut/polar-area slice // chart.ResetVisibility() to bring everything back ```

\n**Culture-aware numbers**: ```razor ``` ```csharp private string _culture = "de-DE"; private BitChartOptions CultureOptions() => new() { Culture = CultureInfo.GetCultureInfo(_culture), Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; ``` \n**Currency ticks**: ```razor ``` ```csharp private readonly BitChartOptions _currency = new() { Culture = CultureInfo.GetCultureInfo("en-US"), Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Ticks = new BitChartTickOptions { Format = "C0" } } } }; ``` \n**Localized dates**: ```razor ``` ```csharp private string _dateCulture = "fr-FR"; // The culture drives the month and day names on a time axis as well as the numbers. private BitChartOptions DateOptions() => new() { Culture = CultureInfo.GetCultureInfo(_dateCulture), Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Time } } }; ``` \n**Non-Latin labels**: ```razor ``` ```csharp private readonly BitChartOptions _wide = new() { Culture = CultureInfo.GetCultureInfo("ja-JP"), Plugins = new BitChartPluginOptions { Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["y"] = new BitChartScaleOptions { Id = "y", Title = new BitChartScaleTitleOptions { Display = true, Text = "売上高（百万円）" } } } }; private BitChartData Japanese() => new() { Labels = { "東京都", "大阪府", "愛知県", "福岡県", "北海道", "京都府" }, Datasets = { new BitChartDataset { Label = "今年度", Data = new() { 320, 245, 198, 162, 140, 121 }, BackgroundColor = "#36a2eb", BorderRadius = 4 } } }; ``` \n**Right-to-left**: ```razor ``` ```csharp private readonly BitChartOptions _rtl = new() { Plugins = new BitChartPluginOptions { Title = new BitChartTitleOptions { Display = true, Text = "فروش فصلی" }, Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } }, Scales = { ["x"] = new BitChartScaleOptions { Id = "x", Type = BitChartScaleType.Category, Reverse = true } } }; private BitChartData Persian() => new() { Labels = { "بهار", "تابستان", "پاییز", "زمستان" }, Datasets = { new BitChartDataset { Label = "درآمد", Data = new() { 120, 190, 160, 250 }, BackgroundColor = "#4bc0c0", BorderRadius = 4 }, new BitChartDataset { Label = "هزینه", Data = new() { 80, 120, 110, 150 }, BackgroundColor = "#ff9f40", BorderRadius = 4 } } }; ```

\n**Download the chart**: ```razor Download SVG Download PNG Download CSV ``` ```csharp private BitChart? _chart; private readonly BitChartOptions _options = new() { Plugins = new BitChartPluginOptions { Title = new BitChartTitleOptions { Display = true, Text = "Revenue by product" }, Legend = new BitChartLegendOptions { Position = BitChartPosition.Bottom } } }; private Task ExportSvg() => _chart!.ExportSvgAsync("revenue.svg"); // scale 2 renders at twice the on-screen size, which stays crisp on high-density displays. private Task ExportPng() => _chart!.ExportPngAsync("revenue.png", scale: 2); private Task ExportCsv() => _chart!.ExportCsvAsync("revenue.csv"); ``` \n**The CSV without downloading it**: ```razor Show the CSV @if (_csv is not null) {

@_csv

} ``` ```csharp private BitChart? _csvChart; private string? _csv; private void ShowCsv() => _csv = _csvChart!.ToCsv(); ``` \n**The picture without downloading it**: ```razor Render to a data URL Show the SVG markup @if (_dataUrl is not null) { A snapshot of the chart

} @if (_markup is not null) {

@_markup

} ``` ```csharp private BitChart? _imageChart; private string? _dataUrl; private string? _markup; // scale 1 matches the on-screen size; pass 2 for a high-density snapshot. private async Task ShowImage() => _dataUrl = await _imageChart!.ToBase64ImageAsync(scale: 1); // The theme tokens the chart references are resolved into the markup, so it stands alone. private async Task ShowMarkup() => _markup = await _imageChart!.ToSvgStringAsync(); ```