Examples
Each ScatterPoint has an X and a Y; Series groups points by colour and adds a legend. XTitle and YTitle name the axes and the tooltips.
Give points a Size to draw bubbles whose area follows it, and a Label for the tooltip. XScale and YScale set to AxisScale.Log spread values over several orders of magnitude.
ShowLine="true" joins each series' points in X order, for measurements taken at increasing steps such as a load test.
Trendline fits a least-squares curve to each series (Linear, Exponential, Logarithmic or Power) in data space, so it also works on log axes. Hover the dashed line for its equation and R².
Trendline="ChartTrendline.Polynomial" fits a least-squares polynomial of TrendlineOrder (2 to 6) to each series, for a curve a straight line misses; MovingAverage with TrendlinePeriod draws a trailing average instead. Hover the curve for its equation and R².
Smooth="true" with ShowLine draws each series as a monotone spline: it passes through every point without overshooting between them.
Give a point an XError or YError (± that much) to draw a whisker with caps; the tooltip shows the error and the axes make room for the bars.
References draws horizontal reference lines at Y values and XReferences vertical ones at X values (Bands and XBands shade ranges); one of each splits the plot into quadrants, which QuadrantLabels names (top right, top left, bottom left, bottom right).
Stacked="true" draws each series on the running total of the ones before it at the same X, like a stacked area; tooltips give each point's own value and the total. Trendline is ignored while stacked.
HighDensity="true" counts tens of thousands of points on a fine grid (CellSize) and shades each cell from light to full by count, with a legend of counts. The chart stays a handful of SVG paths however many points there are; every point still travels to the layout, so beyond a few hundred thousand, aggregate first.
Playground
<ScatterChart
XTitle="Seats"
YTitle="API calls (thousands / day)"
Title="Seats and API calls per customer"
Points="@_points" />
@code {
// One point per customer, coloured by plan.
private readonly ScatterPoint[] _points =
[
.. DistributionSamples.Cloud(seed: 1, count: 40, xMean: 12, xSd: 4, intercept: 2, slope: 0.8, noise: 2.5, series: "Starter"),
.. DistributionSamples.Cloud(seed: 2, count: 30, xMean: 45, xSd: 12, intercept: 5, slope: 0.9, noise: 6, series: "Pro"),
.. DistributionSamples.Cloud(seed: 3, count: 12, xMean: 140, xSd: 35, intercept: 20, slope: 1.1, noise: 18, series: "Enterprise"),
];
}API
<ScatterChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Bands IReadOnlyList<
ChartBand> = nullShaded ranges of Y values drawn behind the points, cut to the plot, each with an optional label in its corner.
- CellSize double= 3
Side of a high-density grid cell, in chart units (at least 1). Smaller is finer, larger smooths more.
- CountFormat string= "{0:N0} points"
Format string for a high-density cell count in tooltips and the legend, e.g. "{0:N0} requests".
- HighDensity bool= false
For tens of thousands of points: instead of one dot per point, count the points on a grid of CellSize-unit squares and shade each cell from light (few points) to the series' full colour (most), with a legend of counts. Tooltips are per count level, not per point; Size, Label, errors and the hover cells are not drawn. The layout's result is bounded by the grid, not by the points, but every point is still sent to the layout (about 40 bytes each, so 100 000 points make a 4 MB request); beyond a few hundred thousand points, aggregate them before charting.
- MaxBubbleRadius double= 20
Radius of the largest bubble when points have a Size.
- MinBubbleRadius double= 3
Radius of the smallest bubble when points have a Size.
- PointRadius double= 4
Radius of each dot, in chart units, when no point has a Size.
- Points IReadOnlyList<
ScatterPoint> = []The points. Those without a finite X and Y (or not above zero on a log axis) are skipped.
- QuadrantLabels IReadOnlyList<
string> = nullFour labels printed in the plot's corners, in this order: top right, top left, bottom left, bottom right; other counts are ignored. Pair them with one XReferences and one References line: the first of each splits the plot into the four quadrants they name.
- References IReadOnlyList<
ChartReference> = nullHorizontal reference lines across the plot at Y values (a target, a limit), drawn over the points with an optional label; the Y axis grows to show each one. On a log axis, values at or below zero are left out.
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- SeriesColors IReadOnlyDictionary<
string, string> = nullOptional colour per series name (any CSS colour); other series cycle through the theme palette.
- ShowLegend bool= true
Show a legend when there is more than one series.
- ShowLine bool= false
Join each series' points with a line, in X order.
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- SizeFormat string= "{0:#,0.##}"
Format string for Size in tooltips, e.g. "{0:N0} seats".
- Smooth bool= false
With ShowLine, draw each series' line as a smooth monotone spline through its points (a scatter spline) instead of straight segments.
- Stacked bool= false
Stack the series: each point is drawn on top of the running total of the previous series at the same X (from 0 where no earlier series has a point at that X). Tooltips give the point's own Y and the total. Trendline is ignored while stacked.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- Trendline ChartTrendline= ChartTrendline.None
Fit and draw a dashed trend line per series, on the series' own values; its tooltip gives the equation and R². Ignored when Stacked is on: a fit of the own values would not follow the stacked points, and a fit of the stacked totals would not describe the series.
- TrendlineOrder int= 2
Degree of a Polynomial trend line, from 2 to 6 (other values are clamped).
- TrendlinePeriod int= 3
Number of points a MovingAverage trend line averages (at least 2).
- ValueFormat string= "{0:#,0.##}"
Format string for X and Y in tooltips, e.g. "{0:N0}".
- Width string= "100%"
CSS width of the chart wrapper.
- XBands IReadOnlyList<
ChartBand> = nullShaded ranges of X values drawn behind the points, cut to the plot, each with an optional label in its corner.
- XReferences IReadOnlyList<
ChartReference> = nullVertical reference lines across the plot at X values, drawn over the points with an optional label; the X axis grows to show each one. On a log axis, values at or below zero are left out.
- XScale AxisScale= AxisScale.Linear
Scale of the horizontal axis.
- XTitle string= null
Title of the horizontal axis, also used in tooltips.
- YScale AxisScale= AxisScale.Linear
Scale of the vertical axis.
- YTitle string= null
Title of the vertical axis, also used in tooltips.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.
ScatterPoint
DaisyBlazor.ChartsOne observation of a ScatterChart, ContourChart or HexbinChart. Points whose X or Y is not a finite number are skipped.
Properties
- Label string
Optional name shown first in the point's tooltip (ScatterChart only).
- Series string
Optional series name (ScatterChart only); each series gets its own colour and legend entry.
- Size double?
Optional bubble size (ScatterChart only); the bubble's area is proportional to it.
- Value double?
Optional measured value at (X, Y), interpolated over the plot by a ContourChart in Value mode.
- X double
Horizontal value.
- XError double?
Optional symmetric error on X (ScatterChart only): a horizontal error bar from X − XError to X + XError. Ignored unless above zero.
- Y double
Vertical value.
- YError double?
Optional symmetric error on Y (ScatterChart only): a vertical error bar from Y − YError to Y + YError. Ignored unless above zero.
Methods
- <Clone>$ () → ScatterPoint
- Deconstruct (Double& X,
Double& Y, Nullable`1& Size, String& Series, String& Label) → void - Equals (object obj) → bool
- Equals (ScatterPoint other) → bool
- GetHashCode () → int
- ToString () → string
AxisScale
DaisyBlazor.ChartsHow a continuous axis maps values to positions.
ChartTrendline
DaisyBlazor.ChartsA trend line fitted to each series of a ScatterChart (in data space), or of a LineChart or BarChart (over the category index 0, 1, …). For the transformed kinds R² is that of the straight-line fit after the transform, as spreadsheets report it.
ChartReference
DaisyBlazor.ChartsA reference line across a chart's plot at Value on the value axis, such as a target, a limit or a break-even point.
Properties
- Color string
Optional CSS colour of the line and its label; defaults to the base content colour.
- Dashed bool
Draw the line dashed (the default) or solid.
- Label string
Optional text written at the end of the line, outside the plot.
- Value double
Where the line sits on the value axis; the axis grows to show it.
Methods
- <Clone>$ () → ChartReference
- Deconstruct (Double& Value,
String& Label, String& Color, Boolean& Dashed) → void - Equals (object obj) → bool
- Equals (ChartReference other) → bool
- GetHashCode () → int
- ToString () → string
ChartBand
DaisyBlazor.ChartsA shaded range of the value axis behind a chart's data (a plot band), from From to To in either order. Parts outside the axis are cut off.
Properties
- Color string
Optional CSS colour of the shading; defaults to the base content colour.
- From double
One end of the range.
- Label string
Optional text written beside the band, outside the plot.
- To double
The other end of the range.
Methods
- <Clone>$ () → ChartBand
- Deconstruct (Double& From,
Double& To, String& Label, String& Color) → void - Equals (object obj) → bool
- Equals (ChartBand other) → bool
- GetHashCode () → int
- ToString () → string