Examples
Labels name the x positions; each series' Data lines up with them by index. Points are shown by default.
Each series takes the next palette colour and appears in the legend; Smooth draws curves.
Turn off ShowGrid and ShowLegend, set a Height, and give a series its own Color.
Step draws each value as a step that holds until the next one (step-after), for counts that change in jumps; it wins over Smooth.
Horizontal puts the labels down the side and the values along the bottom, each line reading top to bottom; it works with Smooth, Step, Stacked, Percent and Area.
References draws a ChartReference line across the plot at a value (dashed unless Dashed is false) and Bands shades a ChartBand range behind the data; labels sit inside the plot, and the axis grows to show every line.
Markers draws a ChartMarker line at a label (the month a pricing change shipped), or with To a shaded span over a run of labels; labels sit above the plot. A marker naming a label the chart does not have is ignored. AreaChart and BarChart take Markers too; on a horizontal chart they run across.
Trendline fits a dashed trend to each series over the label index (Linear, Exponential, Logarithmic, Power, Polynomial of TrendlineOrder 2 to 6, or a MovingAverage of TrendlinePeriod points) and draws it through the label positions; here a three-day moving average. Hover it for the equation and R², or the period. Ignored when Stacked or Percent.
Playground
<LineChart
Title="Monthly signups"
Labels="@_months"
Series="@_signups" />
@code {
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
private readonly ChartSeries[] _signups =
[
new("Signups", [182, 196, 240, 228, 265, 310, 342, 298, 371]),
];
}API
<LineChart>
DaisyBlazor.ChartsParameters
- Area bool= false
Fill the area under each line.
- Bands IReadOnlyList<
ChartBand> = nullShaded value ranges (plot bands) drawn behind the data, cut to the plot, each with an optional label in its corner.
- Height string= "16rem"
CSS height of the SVG plot area.
- Horizontal bool= false
Rotate the chart: the labels run down the vertical axis and the values along the horizontal one, each line reading top to bottom. Works with every other option (Smooth, Step, Stacked, Percent, Area); a step then holds its value down to the next label.
- Labels IReadOnlyList<
string> = nullX-axis category labels (index-aligned with each series' values).
- Markers IReadOnlyList<
ChartMarker> = nullMarkers on the category axis: a line at a category (the month a pricing change shipped), or with To a shaded span over a run of categories, each with an optional label outside the plot. They run across the chart when it is Horizontal. A marker naming a category the chart does not have is ignored.
- Percent bool= false
100% stacked lines (implies Stacked): each value is drawn as its share of the total at its index, on a percent axis. Negative or missing values count as 0. Tooltips show the value and the share.
- References IReadOnlyList<
ChartReference> = nullReference lines across the plot at a value (a target, a limit, a break-even point), drawn over the data with their label inside the plot. The value axis grows to show every line.
- Series IReadOnlyList<
ChartSeries> = []One or more named series to plot.
- ShowGrid bool= true
Draw value gridlines and value labels.
- ShowLegend bool= true
Show a legend when more than one series is present.
- ShowPoints bool= true
Draw a marker at each data point.
- 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.
- Smooth bool= false
Smooth the line with cubic curves instead of straight segments.
- Stacked bool= false
Stack the series: each one is drawn on top of the running total of the previous ones, and with Area each fill spans only its own band. Missing or non-finite values count as 0; tooltips still show each series' own value.
- Step bool= false
Draw the line as steps (step-after: each value holds until the next one). If both Step and Smooth are set, Step wins.
- Title string= null
Optional heading rendered above the chart.
- Trendline ChartTrendline= ChartTrendline.None
Fit and draw a dashed trend line per series, over the category index (0, 1, …) on the series' own values, through the category positions (also when Horizontal); its tooltip gives the equation and R², or the period of a moving average. Ignored when Stacked or Percent is on: a fit of the own values would not follow the stacked points.
- 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).
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Extra CSS classes merged onto the chart wrapper.
- Style string= null
Inline CSS styles appended to the chart wrapper after the width.