Skip to content
BlazorUI

Extras

Chart

Bit.BlazorUI.ExtrasGraphPlot

BitChart renders native SVG computed in C# - no canvas or JavaScript engine - so it works in prerendering and static SSR. A Chart.js-like API (BitChartType + BitChartData + BitChartOptions, or one BitChartConfig) draws line, bar, area, pie, doughnut, polar area, radar, scatter, bubble, mixed and sparkline charts, styled by the bit theme and public --bit-Chart-* CSS variables, with keyboard and screen-reader support and SVG/PNG/CSV export.

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.
The chart's styles ship in the Extras stylesheet (_content/Bit.BlazorUI.Extras/styles/bit.blazorui.extras.css), so make sure it is linked alongside the core stylesheet.
Like every other animated component, the chart honors the reduced motion preference of the OS/browser (prefers-reduced-motion): its entry animations are left out and each chart is drawn straight in its final state. If nothing on this page is animating, either turn the reduce motion setting off, use the ForceAnimation parameter, or turn on the ForceAnimation toggle at the top of this 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 smoothed with Tension = 0.4 and filled to the origin.
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Visitors120190160250220300280

Straight lines

Tension = 0 draws straight segments between the points, showing exactly what was measured.
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 2 data series.
SeriesJanFebMarAprMayJunJul
202565598081565572
202628484060869278

Stepped line

Stepped holds each value until the next one instead of sloping, for quantities that change at a moment. Before steps at the new point, After at the old one and Middle halfway.
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Plan10102525404055

Dashed border with custom points

BorderDash sets the dash pattern and PointStyle picks one of ten marker shapes. A null value breaks the line by default; SpanGaps bridges it, as here.
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Forecast304255486770

Logarithmic Y axis

A value scale with Type = BitChartScaleType.Logarithmic keeps data spanning several orders of magnitude readable.
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Growth110100100050002000080000

Per-segment styling

Segment callbacks style each span between two points from its endpoints - here rising green, falling red and the last stretch dashed. Returning null falls back to the dataset's styling.
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 1 data series.
SeriesJanFebMarAprMayJunJul
Flow40554870628072

Monotone smoothing

Plain Tension (a cardinal spline) can overshoot the values it connects, as the grey line shows. CubicInterpolationMode.Monotone smooths the same points without overshooting.
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 2 data series.
SeriesJanFebMarAprMayJunJul
Cardinal (tension)10126062303270
Monotone10126062303270

Sparkline

Sparkline hides axes, grid, tick labels, legend and title so the series fills the box, e.g. in a KPI tile or table cell. Data, hover, keyboard navigation and the screen-reader table are unaffected; any chart type supports it.
Sessions
12,480
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 1 data series.
Series
Dataset 130343140444152585564
Signups
934
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Bar chart with 1 data series.
Series
Dataset 112181522192624312835
Errors
17
Interactive chart. Use the left and right arrow keys to move through a series, the up and down arrow keys to move between series, Home and End for the first and last value, Enter to select, and Escape to leave.
Line chart with 1 data series.
Series
Dataset 1221924161418119127

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitChart CSS variables

Name Default value Description
--bit-Chart-font-family --bit-tpg-font-family Typeface of every text the chart draws: title, legend, ticks, labels and tooltip.
--bit-Chart-series-color-1 ... --bit-Chart-series-color-10 The Chart.js palette (#36a2eb, #ff6384, #4bc0c0, ...) The default palette, one color per series - or per slice of a pie, doughnut or polar area. Only used where the dataset names no color; its translucent area and hover shades are derived from it.
--bit-Chart-title-color --bit-clr-fg-pri Color of the title.
--bit-Chart-subtitle-color --bit-clr-fg-sec Color of the subtitle.
--bit-Chart-legend-color --bit-clr-fg-sec Color of the legend labels.
--bit-Chart-tick-color --bit-clr-fg-sec Color of the axis tick labels and the radar / polar point labels.
--bit-Chart-axis-title-color --bit-clr-fg-sec Color of the axis titles.
--bit-Chart-axis-color --bit-clr-brd-pri Color of the axis border lines.
--bit-Chart-grid-color --bit-clr-brd-sec Color of the grid lines, the tick marks and the radar angle lines. Minor grid lines draw it at 40%.
--bit-Chart-data-label-color --bit-clr-fg-pri Color of the data labels.
--bit-Chart-crosshair-color --bit-clr-fg-sec Color of the crosshair through the hovered index.
--bit-Chart-annotation-color --bit-clr-fg-sec Default color of an annotation's line or outline, its translucent fill and its label pill. BitChartAnnotation.Color overrides it.
--bit-Chart-annotation-label-color --bit-clr-bg-pri Default text color of an annotation's label. BitChartAnnotation.LabelColor overrides it.
--bit-Chart-center-text-color --bit-clr-fg-pri Color of the text BitChartCenterTextPlugin draws in a doughnut's cutout.
--bit-Chart-surface-color --bit-clr-bg-pri The surface the chart sits on: the border that separates pie and doughnut slices, and the backdrop behind radial tick labels. Set it to the card color when the chart sits on a card.
--bit-Chart-tooltip-background --bit-clr-tooltip-bg Fill of the tooltip and its caret, and of the crosshair's axis chip.
--bit-Chart-tooltip-color --bit-clr-tooltip-fg Text color of the tooltip and of the crosshair's axis chip.
--bit-Chart-tooltip-radius --bit-shp-radius-popup Corner radius of the tooltip. Tooltip.CornerRadius in the options overrides it.
--bit-Chart-tooltip-shadow --bit-shd-tooltip Elevation of the tooltip.
--bit-Chart-focus-color --bit-clr-pri-focus Focus ring of the plot and the legend items, and the dashed outline of the element the keyboard is on. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too; the outline is a stroke, drawn in the primary focus color.
--bit-Chart-zoom-box-background --bit-clr-pri at 20% Fill of the drag-to-zoom selection box.
--bit-Chart-zoom-box-border-color --bit-clr-pri Border of the drag-to-zoom selection box.
--bit-Chart-inactive-opacity 0.2 Opacity of the series faded behind a legend item that is hovered or focused (Legend.HighlightOnHover).
--bit-Chart-no-data-color --bit-clr-fg-sec Color of the empty-state message.
--bit-Chart-loading-background --bit-clr-bg-pri at 70% The veil laid over the plot while IsLoading is set; translucent, so the chart behind it shows through.
--bit-Chart-loading-color --bit-clr-fg-sec Color of the loading label.
--bit-Chart-loading-spinner-color --bit-clr-pri Color of the turning arc of the loading spinner.

API

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

BitChart parameters

Name Type Default value Description
Classes BitChartClassStyles? null Custom CSS classes for the parts of the chart: root, title, subtitle, legend, legend items, plot, tooltip, empty state and loading state.
Config BitChartConfig? null Full configuration (type + data + options). Takes precedence over Type/Data/Options when set.
Data BitChartData? null The chart data: labels and datasets.
Description string? null A visually hidden summary of what the chart shows - its trend or takeaway - that the plot is described by: the long description a complex image needs beside its name and its data table.
GenerateTable bool true Renders a visually hidden data table right after the chart, which a screen reader can browse cell by cell.
Height string? null Optional CSS height of the chart container. When null the height follows the aspect ratio.
IsLoading bool false Shows a loading veil with a spinner over the plot, marks the chart aria-busy and holds back the empty state, so a chart still waiting for its data does not claim it has none.
LoadingLabel string? "Loading" The text shown under the spinner, and announced, while IsLoading is set.
LoadingTemplate RenderFragment? null Custom content shown in place of the default spinner while IsLoading is set.
MaxTableColumns int 100 Upper bound on the columns the screen-reader table renders. A value series is one row with a cell per category, so a long one is wide rather than tall and the row cap alone would not contain it. Ignored for scatter and bubble data, whose table is three fixed columns.
MaxTableRows int 500 Upper bound on the rows the screen-reader table renders, so a long series does not put tens of thousands of hidden nodes in the DOM. Past the limit the caption says how many rows were left out.
NavigationHint string? "Interactive chart. Use the left and right arrow keys..." A visually hidden sentence telling a screen-reader user how to walk the data, pointed at by aria-describedby. Only rendered while there is data to navigate; set it to null to leave it out.
NoDataTemplate RenderFragment? null Custom content shown in place of the plot when there is nothing to draw. Takes precedence over NoDataText.
NoDataText string No data to display Message shown in place of the plot when the configuration produces nothing to draw.
OnElementClick EventCallback<(int DatasetIndex, int DataIndex)> Callback raised when a data element (point, bar, arc, ...) is clicked, by pointer or with Enter/Space while it is focused.
OnElementHover EventCallback<BitChartTooltipContext?> Callback raised when the active (hovered or keyboard-focused) element set changes. The context is null once nothing is active.
OnLegendItemClick EventCallback<BitChartLegendItemModel> Callback raised when a legend item is clicked, before the default visibility toggle runs.
OnZoomChange EventCallback Callback raised after zoom or pan changes the visible axis ranges.
Options BitChartOptions? null The chart options: scales, plugins (title, legend, tooltip, data labels), interaction, animation, culture and zoom.
Styles BitChartClassStyles? null Custom CSS styles for the parts of the chart: root, title, subtitle, legend, legend items, plot, tooltip, empty state and loading state.
Texts BitChartTexts? null The texts written for assistive technologies and into the CSV export: the default accessible name, the legend's name, the keyboard announcements, the table headers and captions. English by default; override them to localize.
TooltipTemplate RenderFragment<BitChartTooltipContext>? null Optional custom tooltip template. When set it replaces the default tooltip body.
Type BitChartType BitChartType.Line The chart type: Line, Bar, Radar, Pie, Doughnut, PolarArea, Bubble or Scatter.
Width string 100% CSS width of the chart container.
ZoomHint string? "Press plus or minus to zoom, and 0 to reset the zoom." Appended to NavigationHint while zoom is enabled, naming the zoom keys. Set it to null to leave it out.

BitChart public members

Name Type Default value Description
Refresh void Refresh() Rebuilds and redraws the chart from its current data and options. Blazor only re-renders on a parameter change it can see, so mutating the same BitChartData in place - appending to a live series, editing a value - needs this call. The counterpart of Chart.js's chart.update().
IsDatasetVisible bool IsDatasetVisible(int datasetIndex) Whether a dataset is currently drawn, i.e. hidden neither through the legend nor by BitChartDataset.Hidden.
SetDatasetVisible void SetDatasetVisible(int datasetIndex, bool visible) Shows or hides a dataset, exactly as clicking its legend entry would; the axes re-scale around what is left.
ToggleDataset void ToggleDataset(int datasetIndex) Flips a dataset between shown and hidden.
IsDataIndexVisible bool IsDataIndexVisible(int dataIndex) Whether a data index - a pie, doughnut or polar-area slice - is currently drawn.
SetDataIndexVisible void SetDataIndexVisible(int dataIndex, bool visible) Shows or hides one data index across the chart, the slice-level counterpart of SetDatasetVisible.
ToggleDataIndex void ToggleDataIndex(int dataIndex) Flips one data index between shown and hidden.
ResetVisibility void ResetVisibility() Brings back every dataset and data index hidden through the legend or the API.
ResetZoom void ResetZoom() Clears every zoom/pan override and returns the chart to the full data range.
ZoomTo void ZoomTo(string axisId, double? min, double? max) Zooms an axis to an explicit value range, honoring the configured zoom limits. Pass null bounds to clear that axis's override.
GetAxisRange (double Min, double Max)? GetAxisRange(string axisId) The currently visible range of an axis: its zoomed range when zoomed, otherwise the full data range.
ExportSvgAsync Task<bool> ExportSvgAsync(string? fileName = null, string? backgroundColor = null) Downloads the chart as a standalone .svg file, with the theme tokens it references resolved into the file.
ExportPngAsync Task<bool> ExportPngAsync(string? fileName = null, double scale = 2, string? backgroundColor = SurfaceBackground) Downloads the chart as a .png image rasterized from the live SVG at the given pixel ratio, on the surface the chart sits on (so a dark theme exports dark); pass a color of your own, or null for a transparent image.
ExportCsvAsync Task<bool> ExportCsvAsync(string? fileName = null) Downloads the chart's data as a .csv file, formatted with the chart's culture.
ToCsv string ToCsv() Returns the chart's data as CSV text: one row per series for value datasets, one row per point for scatter and bubble datasets.
ToSvgStringAsync Task<string?> ToSvgStringAsync(string? backgroundColor = null) Returns the chart as standalone SVG markup instead of downloading it, with the theme tokens it references resolved into the markup. Null when the chart has not been rendered in a browser yet.
ToBase64ImageAsync Task<string?> ToBase64ImageAsync(string mimeType = "image/png", double scale = 2, string? backgroundColor = SurfaceBackground) Returns the rasterized chart as a data: URL - the same picture ExportPngAsync downloads - ready for an img src or a PDF. Mirrors Chart.js's toBase64Image.
SurfaceBackground const string "var(--bit-Chart-surface-color, var(--bit-clr-bg-pri))" The default background of ExportPngAsync and ToBase64ImageAsync: the surface the chart sits on, resolved in the browser.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitChartClassStyles properties

Defines per-part CSS class/style values for BitChart.

Name Type Default value Description
Root string? null Custom class or style applied to the root element.
Title string? null Custom class or style applied to the title.
Subtitle string? null Custom class or style applied to the subtitle.
Legend string? null Custom class or style applied to the legend container.
LegendItem string? null Custom class or style applied to each legend item.
Plot string? null Custom class or style applied to the plot container that holds the SVG, the tooltip and the empty state.
Tooltip string? null Custom class or style applied to the tooltip box, the default one and a custom template's alike.
NoData string? null Custom class or style applied to the empty state shown when there is nothing to draw.
Loading string? null Custom class or style applied to the loading state shown over the plot while the chart is loading.

BitChartTexts properties

The texts BitChart writes for assistive technologies and into its CSV export. All default to English; the ...Format ones are composite format strings filled in the chart's culture.

Name Type Default value Description
DefaultAriaLabelFormat string "{0} chart with {1} data series." Accessible name of a chart with neither an AriaLabel nor a displayed title. {0} is the chart type, {1} the number of series.
RoleDescription string "chart" What a screen reader calls the plot in place of its role (aria-roledescription).
TypeNames Dictionary<BitChartType, string> "Line", "Bar", ... "Polar area" The name of each chart type, filled into {0} of DefaultAriaLabelFormat.
NotesFormat string "Marked on the chart: {0}." The hidden sentence the plot is described by that names what the plugins drew - annotations, labeled trend lines, a center text. {0} is the list of them.
LegendAriaLabel string "Chart legend" Accessible name of a legend that has no title of its own.
PositionFormat string "{0} of {1}" Announced after the keyboard-focused value: its position within its series.
SeriesPositionFormat string "series {0} of {1}" Announced when the chart has more than one series: which one the focused value belongs to.
DatasetLabelFormat string "Dataset {0}" Name of a dataset without a Label, in the legend, the table and the CSV alike. {0} is the 1-based dataset number.
Series string "Series" Header of the series column of the table and the CSV.
X / Y string "X" / "Y" Headers of the point columns of scatter and bubble data, used when the axis shows no title of its own.
Radius string "R" Header of the radius column of bubble data.
RowsTruncatedFormat / ColumnsTruncatedFormat string "Showing the first {0} of {1} rows." / "... columns." Appended to the table's caption when MaxTableRows / MaxTableColumns cut it short.

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. Colors, radii and styles marked *Fn are scriptable: they receive a BitChartScriptableContext per element and take precedence over the constant beside them.

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). A null is a gap, not a zero.
Points List<BitChartDataPoint>? null Point data (x, y[, r]) for scatter, bubble and time-based line charts. When set, takes precedence over Data.
RangeData List<(double Low, double High)?>? null Floating-bar ranges per index. When set, bars span low to high instead of growing from the base.
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 the area fill of a filled line.
BackgroundColors List<string>? null One fill color per data index, cycled when shorter than the data.
BorderColor string? null The line/border color. Bars and arcs fall back to their own fill color rather than an unrelated palette entry.
BorderWidth double? null Border/line thickness. When null a per-type default applies: 3 for lines and radar, 2 for arcs, and 0 for bars unless a border color was given.
Fill BitChartFillMode BitChartFillMode.None Area fill mode for line/radar datasets (None, Origin, Start, End, Stack, Dataset, Value).
FillGradient BitChartGradientBase? null A linear or radial gradient used for the area fill, taking precedence over FillColor and BackgroundColor.
BackgroundPattern BitChartFillPattern? null A repeating hatch/grid/dot texture used instead of a solid fill; keeps series distinguishable in print and greyscale.
Tension double 0 Bezier curve tension for line datasets (0 = straight lines).
Stepped BitChartSteppedLine BitChartSteppedLine.False Draws the line as steps (Before, After or Middle) instead of interpolating.
SpanGaps bool false Bridges null values instead of breaking the line at them.
Segment BitChartLineSegmentStyle? null Per-segment color, width and dash callbacks, evaluated from the two endpoints of each segment.
PointRadius double 3 Marker radius. Zero hides the marker but keeps the point hoverable.
PointStyle BitChartPointStyle BitChartPointStyle.Circle Marker shape. BitChartPointStyle.None removes the markers - and their hit targets - entirely.
Stack string? null Stack group id. Datasets sharing an id accumulate together; each group gets its own column.
Grouped bool true When false the bar dataset leaves the side-by-side layout and keeps the whole category band, so it can sit behind the others.
SkipNull bool false Lets the remaining bars of a category widen over the datasets that have no value there, instead of leaving a hole.
MinBarLength double? null Minimum bar length in pixels, so near-zero values stay visible.
Base double? null The value bars grow from. Defaults to zero clamped into the axis range.
BorderRadius double 0 Corner radius. On a bar only the corners away from the skipped (baseline) edge are rounded, and BorderRadiusCorners overrides each corner; on a pie, doughnut or polar-area arc it rounds the arc's own corners, clamped to half the ring's thickness.
Offset / SpacingArc / HoverOffset double 0 / 0 / 6 Arc geometry: how far every slice sits from the center, the gap left between neighbouring slices, and the extra distance the hovered slice pops out.
Weight double 1 Relative thickness of this dataset's ring in a multi-dataset pie or doughnut. The available radius is shared out in proportion to the weights.
ErrorData List<BitChartErrorBar?>? null Per-index uncertainty, drawn as a capped whisker through the value and named in the tooltip. A BitChartErrorBar comes from one number (symmetric) or two (asymmetric); a null entry leaves that value bare. Cartesian charts only.
ErrorBarColor / ErrorBarWidth / ErrorBarCapWidth string? / double / double null / 1.5 / 8 Error-bar styling. A null color follows the primary foreground token; a zero cap width draws a bare whisker.
HoverBackgroundColor / HoverBorderColor / HoverBorderWidth string? / string? / double? null Styling used while a bar or arc is hovered or keyboard-focused.
XAxisID / YAxisID / RAxisID string x / y / r The scales this dataset is bound to. Naming a scale that does not exist yet creates a linear one.
Order int 0 Draw order across datasets; lower draws first. Bars are always drawn before lines and points.
Hidden bool false Hides the dataset without removing it, and marks its legend entry as toggled off.

BitChartOptions properties

Top-level chart options, mirroring Chart.js options. The same instance can safely be shared between charts: the renderer completes the missing scales locally instead of writing them back.

Name Type Default value Description
Responsive bool true Observes the container and renders at real device pixels, which keeps font sizes constant at any width.
MaintainAspectRatio / AspectRatio bool / double? true / null Whether the height follows the width, and the ratio to use. Defaults to 2 for cartesian charts and 1 for circular and radar ones.
IndexAxis BitChartIndexAxis BitChartIndexAxis.X The axis the data index runs along: X for vertical bars, Y for horizontal ones.
Sparkline bool false Draws the chart as a sparkline: axes, grid, tick labels, legend, title and subtitle are all dropped so the series fills the box. A presentation switch only - tooltips, keyboard navigation and the screen-reader table still describe the full series.
Scales Dictionary<string, BitChartScaleOptions> new() Named scales keyed by id (x, y, r, y2, ...): type, min/max, grid, ticks, title, stacking, time unit and radial options.
Interaction BitChartInteractionOptions new() Mode (Nearest, Index, Dataset, ...) and Intersect. With Intersect false - the default - hit bands make the whole plot hoverable, marked by a crosshair and an axis chip (Crosshair / CrosshairLabel / CrosshairColor). The tooltip inherits Mode and Intersect unless it overrides them.
Plugins BitChartPluginOptions new() Title, Subtitle, Legend, Tooltip, DataLabels and Decimation options, plus Custom for your own IBitChartPlugin drawing plugins.
Animation BitChartAnimationOptions new() Duration, easing, per-element stagger (DelayBetween) and the progressive draw-on for line charts.
Elements BitChartElementOptions new() Per-type defaults used whenever a dataset leaves the matching property unset.
Layout BitChartLayoutOptions new() Padding around the whole chart.
Zoom BitChartZoomOptions new() Wheel zoom, drag pan, drag-to-zoom box, axis mode, speed, and the limits that keep the view inside the data.
Culture CultureInfo? null Culture used for every number and date the chart prints - ticks, tooltips, data labels and the CSV export. Null means the invariant culture.
CutoutPercentage / CircumferenceDegrees / RotationDegrees double 50 / 360 / -90 Doughnut hole size, sweep and starting angle. A 180 degree sweep turns a doughnut into a gauge.

BitChartAnnotation properties

One line, box, ellipse, polygon, point or label drawn in data coordinates by BitChartAnnotationPlugin, which is registered through Options.Plugins.Custom. Cartesian charts only.

Name Type Default value Description
Kind BitChartAnnotationKind Line The shape: Line, Box, Point, Label, Ellipse or Polygon.
Orientation / Value / AxisId BitChartLineOrientation / double / string Horizontal / 0 / "y" Where a line is drawn: a y value for a horizontal line, an x value (or category index with XIsIndex) for a vertical one.
XMin / XMax / YMin / YMax / XIsIndex double? / bool null / false The bounds of a box or an ellipse in data coordinates; a null bound runs to the edge of the plot. XIsIndex reads the X values as category indices.
Sides / Radius / Rotation int / double? / double 3 / null / 0 The shape of a polygon, and the pixel radius of a polygon or a point.
Color / FillColor / LineWidth / Dash string / string? / double / List<double>? --bit-Chart-annotation-color / null / 2 / null Styling. A null fill is the color made translucent.
Label / LabelColor / LabelBackground / LabelFont string? / string / string? / BitChartFont null / --bit-Chart-annotation-label-color / null / 11px bold An optional pill beside the shape. A null background follows Color.
Description string? null What a screen reader is told about the annotation, in place of its label and value. The drawing is hidden from assistive technologies, so an annotation with neither a Label nor a Description is treated as decoration.
DrawBehindDatasets bool false Draws the annotation under the datasets rather than over them.

BitChartTrendline properties

One fitted line drawn over a dataset by BitChartTrendlinePlugin, which is registered through Options.Plugins.Custom. Cartesian charts only.

Name Type Default value Description
DatasetIndex int 0 Index of the dataset the line is fitted to. A dataset hidden through the legend takes its trend line with it.
Kind BitChartTrendlineKind BitChartTrendlineKind.Linear Linear for a least-squares regression, MovingAverage for a trailing average over Period points, or Average for a flat line at the series mean.
Period int 5 Window of the trailing moving average. Ignored by the other kinds.
Extend bool false Projects a straight fit out to both edges of the plot instead of stopping at the first and last data point. Ignored by MovingAverage, which has no meaning outside the data.
Color / LineWidth / Dash string? / double / List<double>? null / 2 / [6, 4] Line styling. A null color follows the dataset's own border color; the dash is what keeps the fit from reading as another measured series - set it to null for a solid line.
Label / LabelColor / LabelBackground / LabelFont string? / string / string? / BitChartFont null / #fff / null / 11px bold An optional pill drawn at the end of the line, pinned inside the plot so it stays readable at the edge. A labeled line is also named to screen readers.
DrawBehindDatasets bool false Draws the line under the datasets rather than over them.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

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