Top

A horizontal row of swatches above the plot.

Bottom

A horizontal row of swatches below the plot.

Left

A vertical column of swatches to the left of the plot.

Right

A vertical column of swatches to the right of the plot.

public ChartRange(double min, double max, bool isAutoRange)

Initializes a new instance of the ChartRange class.

public double Min { get; set; }

The lowest visible X value.

public double Max { get; set; }

The highest visible X value.

public bool IsAutoRange { get; set; }

True when the chart is back to fitting its data instead of showing an explicit range.

public string Name { get; set; }

The series display name, used in the legend, tooltips and accessibility summary.

public double[] Values { get; set; }

The series values, one per category/point. NaN marks a missing sample.

public string Color { get; set; }

An optional explicit CSS color; when null the chart assigns a palette color by index.

public double[] XValues { get; set; }

Optional X positions for this series' values, one per entry in Values. Setting these on any series switches the chart to a continuous X scale, which lets each series carry its own X positions (irregular sampling, differing time windows, differing point counts) instead of sharing one category list.

public double LineWidth { get; set; }

The stroke width of this series' line, in pixels (line and area charts).

public double FillOpacity { get; set; }

The opacity of this series' area fill at its peak, fading to near-transparent at the baseline (area charts).

protected ChartBase(double minWidth = 120, double minHeight = 80)

Initializes a new instance of the ChartBase{T} class.

protected static string FormatValueCompact(double value)

The default value format: large magnitudes are abbreviated with an SI prefix, because an axis of byte counts or token totals is unreadable at full length. Small values are left alone. Override with FormatValues.

public T Data(double[] values)

Replaces the chart's series with a single unnamed series of plain values.

public T Colors(params string[] palette)

Sets the series color palette (used for series without an explicit color).

public T Tooltips(bool show = true)

Enables or disables per-element tooltips.

public T ConnectGaps(bool connect = true)

When true (the default) a line or area series draws straight across a NaN value; when false the line breaks, leaving the gap visible.

public T Title(string title)

Sets an accessibility caption / summary for the chart.

public T FormatValues(Func<double, string> formatter)

Sets the formatter used for values in tooltips and labels.

public T ExportButton(bool show = true, string fileName = null)

Shows a small download button in the chart's top-right corner (revealed on hover) that saves the chart as a PNG.

public void ExportPng(string fileName = null)

Saves the chart as a PNG. CSS-variable colors are resolved to concrete values first, so the exported image matches the theme the chart is currently rendered in.

protected string ColorFor(int index, ChartSeries series)

Returns the color for the series at the given index (explicit color or palette by index).

protected Element El(string name)

Creates an SVG element in the SVG namespace.

protected void AttachPointTooltip(Element el, string content)

Attaches a hover tooltip to an SVG element: a native <title> child (for accessibility / no-JS fallback) and, when enabled, a tippy popover reusing the bundled tippy.js.

Remarks

The tippy instance is created the first time the point is hovered rather than at render time. A chart is drawn point by point, so building one instance per point up front cost a tippy object, its listeners and a full-document z-index scan for every value in the series — all of it before the user has pointed at anything. One delegated listener on the SVG surface replaces them; the created instance keeps tippy's own trigger from then on, so hover behaviour and the show delay are unchanged.

protected void ClearSvg()

Removes every child of the SVG surface.

protected void QueueRender()

Schedules a render on the next animation frame, coalescing bursts of changes.

protected abstract void RenderChart(double width, double height)

Draws the chart into the SVG surface at the given pixel dimensions.

protected virtual string BuildAriaLabel()

Builds the accessibility summary describing the chart's data.

protected void ResetLegendInsets()

Clears the space reserved for the legend, before a fresh render measures it again.

public HTMLElement Render()

Renders the component's root HTML element.

protected const string SvgNs = "http://www.w3.org/2000/svg"

The SVG namespace used for every chart element.

protected const int MaxMarkersPerSeries = 300

Above this many points in a series, per-point markers (and their tooltips) are suppressed: one DOM node plus one tooltip per sample stops being readable long before it stops being expensive. Use the spikeline readout instead of markers for dense series.

protected static readonly string[] DefaultPalette = { Theme.Colors.Blue600, Theme.Colors.Green600, Theme.Colors.Orange600, Theme.Colors.Purple600, Theme.Colors.Red600, Theme.Colors.Teal600, Theme.Colors.Yellow600, Theme.Colors.Neutral600 }

The default theme-aware palette (CSS variables that adapt to light/dark mode).

protected readonly HTMLElement _container

The root container element.

protected readonly Element _svg

The SVG surface that the chart draws into.

protected readonly List<ChartSeries> _series = new List<ChartSeries>()

The chart's series.

protected string[] _palette = DefaultPalette

The active color palette.

protected bool _showTooltips = true

Whether to render per-element tippy + native <title> tooltips.

protected bool _showLegend = false

Whether to render the legend.

protected ChartLegendPosition _legendPosition = ChartLegendPosition.Top

Where the legend is drawn.

protected bool _connectGaps = true

Whether a line/area series draws straight across a NaN gap instead of breaking.

protected string _title

An optional caption used as the accessibility summary; falls back to a generated description.

protected Func<double, string> _valueFormatter = FormatValueCompact

Optional formatter for values shown in tooltips / axis labels.

protected Element _plotSurface

The element subclasses draw their series into; clipped to the plot rectangle on cartesian charts.

protected double _legendInsetTop

Space the legend claimed at the top of the surface, in pixels.

protected double _legendInsetBottom

Space the legend claimed at the bottom of the surface, in pixels.

protected double _legendInsetLeft

Space the legend claimed on the left of the surface, in pixels.

protected double _legendInsetRight

Space the legend claimed on the right of the surface, in pixels.

protected CartesianChartBase(double minWidth = 200, double minHeight = 120) : base(minWidth, minHeight)

Initializes a new instance of the CartesianChartBase{T} class.

public bool IsXRangePinned

True when the visible X range came from a zoom / pan rather than fitting the data.

protected virtual bool DefaultIncludeZeroBaseline

The chart type's default: true when the value axis should always include zero as a baseline.

protected bool IncludeZeroBaseline

Whether the value axis includes zero, honouring ZeroBaseline over the type default.

protected virtual bool ConnectsPointsAcrossX

True when the chart draws a continuous line between consecutive points, so a segment crossing the visible window sizes the value axis even with neither of its ends inside it.

public T XAxis(params string[] categories)

Sets the category labels along the X axis.

public T XValues(double[] values)

Sets shared X positions for every series, putting the chart on a continuous X scale so points sit at their real distance apart instead of being evenly spaced. Per-series positions (XValues) win over these.

public T FormatXAxis(Func<double, string> formatter)

Sets the formatter used for continuous X axis tick labels (and the spikeline readout).

public T XAxisTime(string format = null)

Formats continuous X values as local times, treating them as Unix timestamps in seconds. With no format the labels adapt to the visible span — seconds when zoomed into a minute, dates when showing months — and the ticks land on whole seconds, minutes, hours or days rather than on powers of ten.

public T MaxXTicks(int count)

Caps how many X axis tick labels are drawn; categories beyond the cap are skipped evenly. Pass 0 (the default) to derive the cap from the available width, which keeps dense axes readable.

public T XAxisTitle(string title)

Sets the X axis title.

public T YAxisTitle(string title)

Sets the Y axis title.

public T Grid(bool show = true)

Shows or hides the horizontal gridlines.

public T Axes(bool show = true)

Shows or hides the axes and their labels.

public T Zoomable(bool enable = true)

Allows the user to zoom the X axis with the wheel, pan it by dragging, and reset to the full data range by double-clicking. Only meaningful on a continuous X scale.

public T ZoomLimits(double minSpan, double maxSpan)

Bounds how far the wheel may zoom the X axis, as the smallest and largest visible span. Pass 0 for either to keep the default, which is a fraction (and a multiple) of the data's own X extent. A chart that loads its data to match the visible range wants an explicit maximum: the widest span the user can reach is what decides how much has to be fetched.

public T Spikelines(bool enable = true)

Draws a vertical spikeline that follows the cursor across the plot, with a readout of the X position and each series' nearest value. The readable alternative to a marker per sample on a dense series.

public T XRange(double min, double max)

Pins the visible X range on a continuous scale. Setting the range does not raise OnRangeChanged, so charts can be kept in sync with each other without a re-entrancy guard.

public T AutoRangeX()

Returns the chart to fitting the full X extent of its data, undoing any zoom or pan.

public bool TryGetXRange(out double min, out double max)

Gets the X range the chart is currently showing. False when the chart has no continuous X data yet.

public T OnRangeChanged(Action<ChartRange> handler)

Raised when the user zooms, pans or resets the X axis — not when XRange is called, so a handler that pushes the range onto sibling charts cannot loop.

public T ZeroBaseline(bool include = true)

Overrides whether the value axis includes zero, regardless of the chart type's default. An area chart of a metric that hovers far from zero reads better fitted to its data, with the fill still running to the bottom of the plot.

protected double PixelY(double value)

Maps a value to its pixel Y coordinate within the plot area.

protected double PixelXForValue(double x)

Maps a continuous X value to its pixel X coordinate within the plot area.

protected double XOf(ChartSeries series, int index)

Returns the X position of point index of a series on a continuous scale.

protected double SeriesPointX(ChartSeries series, int index)

Returns the pixel X coordinate for point index of series, using the continuous scale when the chart has X values and evenly spaced slots otherwise.

protected List<List<int>> SeriesRuns(ChartSeries series)

Splits a series into runs of consecutive plottable points, breaking at NaN gaps. Returns a single run covering every non-gap point when gaps are connected.

protected virtual void CollectRangeValues(List<double> into)

Collects the values the Y axis must accommodate. Only what is inside the visible X window counts on a continuous scale, so zooming rescales the value axis to what is on screen.

protected string FormatXValue(double value)

Formats a continuous X value using the configured X formatter, falling back to a plain number.

private static double NiceStep(double rough)

Rounds a rough interval up to the nearest 1, 2 or 5 times a power of ten, which is what makes an axis read as 0 / 200 / 400 rather than 0 / 168.4 / 336.8. Returns 0 for an interval it cannot represent.

protected double CategoryCenterX(int index)

Returns the pixel X coordinate of the center of category slot index.

protected double PointX(int index)

Returns the pixel X coordinate for point index of a line/area series.

protected abstract void RenderSeries()

Plots the series into the computed plot rectangle.

protected string[] _categories = new string[0]

Category labels along the X axis.

protected bool _showGrid = true

Whether to draw horizontal gridlines.

protected bool _showAxes = true

Whether to draw the axes and their labels.

protected string _xAxisTitle

Optional X axis title.

protected string _yAxisTitle

Optional Y axis title.

protected double _plotLeft

Left edge of the plot area, in pixels.

protected double _plotTop

Top edge of the plot area, in pixels.

protected double _plotWidth

Width of the plot area, in pixels.

protected double _plotHeight

Height of the plot area, in pixels.

protected double _minValue

The minimum value mapped to the bottom of the plot.

protected double _maxValue

The maximum value mapped to the top of the plot.

protected int _pointCount

The number of categories/points along the X axis.

protected bool _continuousX

True when the chart plots against a continuous X scale rather than evenly spaced categories.

protected double _viewXMin

The lowest visible X value on a continuous scale.

protected double _viewXMax

The highest visible X value on a continuous scale.

public LineChart() : base()

Initializes a new instance of the LineChart class.

public LineChart Points(bool show = true)

Shows or hides the per-point markers.

public BarChart() : base()

Initializes a new instance of the BarChart class.

public BarChart Rounded(double radius = 2)

Sets the corner radius of the bars.

public BarChart Stacked(bool stacked = true)

Stacks the series into one column per category instead of drawing them side by side. Positive and negative values stack away from the baseline independently.

public AreaChart() : base()

Initializes a new instance of the AreaChart class.

public AreaChart Points(bool show = true)

Shows or hides the per-point markers.

public PieChart() : base()

Initializes a new instance of the PieChart class.

public PieChart Labels(params string[] labels)

Sets the per-slice labels.

public PieChart Donut(double holeRatio = 0.6)

Renders the chart as a donut with a hole sized as a fraction (0..1) of the radius.