Blazor LineChart component

Comprehensive API documentation for the Blazor LineChart component, including configuration options, parameters, methods, events, child component parameters, and model properties.

Demos
Blazor Line Chart - API Documentation

Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
ContainerClass string null Gets or sets the CSS class name for the container element. 1.0.0
ContainerStyle string null Gets or sets the CSS style string applied to the container element. 1.0.0
Height int? null Gets or sets chart container height. 1.0.0
HeightUnit Unit Px Gets or sets chart container height unit of measure. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
IsContainerFluid bool False Gets or sets a value indicating whether the container is fluid. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0
Width int? null Gets or sets chart container width. 1.0.0
WidthUnit Unit Px Gets or sets chart container width unit of measure. 1.0.0

Methods #

Name Return type Description Added Version
AddDataAsync(char chartData,string dataLabel,char data) Task<ChartData> Asynchronously adds a new data entry to the specified chart data. 1.0.0
AddDataAsync(char chartData,string dataLabel,IReadOnlyCollection`1 data) Task<ChartData> Asynchronously adds a new dataset to the specified chart data. 1.0.0
AddDatasetAsync(char chartData,char chartDataset,char chartOptions) Task<ChartData> Asynchronously adds a dataset to the specified chart data. 1.0.0
InitializeAsync(char chartData,char chartOptions,string plugins) Task Asynchronously initializes the chart with the specified data and options. 1.0.0
UpdateAsync(char chartData,char chartOptions) Task Asynchronously updates the chart with the specified data and options. 1.0.0

ChartData Properties #

Name Type Default Required Description Added Version
Datasets List<IChartDataset>? null Gets or sets the collection of datasets to be displayed in the chart. 1.0.0
Labels List<string>? null Gets or sets the labels for the chart, typically used for the x-axis or categories. 1.0.0

LineChartDataset Properties #

Name Type Default Required Description Added Version
Animation char null Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes. 1.2.0
BackgroundColor string rgba(0, 0, 0, 0.1) The line fill color. 1.0.0
BorderCapStyle string butt Cap style of the line. Supported values are 'butt', 'round', and 'square'. 1.0.0
BorderColor string rgba(0, 0, 0, 0.1) The line color. 1.0.0
BorderDash List<double>? null Length and spacing of dashes. 1.0.0
BorderDashOffset double 0 Offset for line dashes. 1.0.0
BorderJoinStyle string miter Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. 1.0.0
BorderWidth double 3 The line width (in pixels). 1.0.0
Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0
CubicInterpolationMode string default Supported values are 'default', and 'monotone'. 1.0.0
Data List<TData>? null Get or sets the Data. 1.0.0
Datalabels LineChartDatasetDataLabels new() Gets or sets the data labels configuration for the line chart dataset. Use this property to customize the display of data labels, such as their position, formatting, and visibility, for the dataset in the line chart. 1.0.0
DrawActiveElementsOnTop List<bool>? null Draw the active points of a dataset over the other points of the dataset. 1.0.0
Fill Object False How to fill the area under the line. 1.0.0
Hidden bool False Configure the visibility of the dataset. Setting Hidden to true will prevent the dataset from being rendered in the Chart. 1.0.0
HoverBackgroundColor string? null The line fill color when hovered. 1.0.0
HoverBorderCapStyle string? null Cap style of the line when hovered. 1.0.0
HoverBorderColor string? null The line color when hovered. 1.0.0
HoverBorderDash List<double>? null Length and spacing of dashes when hovered. 1.0.0
HoverBorderDashOffset double? null Offset for line dashes when hovered. 1.0.0
HoverBorderJoinStyle string miter Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. 1.0.0
HoverBorderWidth double? null The line width (in pixels) when hovered. 1.0.0
IndexAxis string? x The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. 1.0.0
Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0
Oid Guid Guid.NewGuid() Gets the unique object identifier for this dataset instance. This value is auto-generated when the dataset is created. 1.0.0
Order int 0 The drawing order of dataset. Also affects order for stacking, tooltip and legend. 1.0.0
PointBackgroundColor List<string>? rgba(0, 0, 0, 0.1) The fill color for points. 1.0.0
PointBorderColor List<string>? rgba(0, 0, 0, 0.1) The border color for points. 1.0.0
PointBorderWidth List<double>? 1 The width of the point border in pixels. 1.0.0
PointHitRadius List<double>? 1 The pixel size of the non-displayed point that reacts to mouse events. 1.0.0
PointHoverBackgroundColor List<string>? null Point background color when hovered. 1.0.0
PointHoverBorderColor List<string>? null Point border color when hovered. 1.0.0
PointHoverBorderWidth List<double>? 1 Border width of point when hovered. 1.0.0
PointHoverRadius List<double>? 4 The radius of the point when hovered. 1.0.0
PointRadius List<double>? 3 The radius of the point shape. If set to 0, the point is not rendered. 1.0.0
PointRotation List<double>? 0 The rotation of the point in degrees. 1.0.0
PointStyle List<string>? circle Style of the point. Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle'. 1.0.0
Segment List<string>? null Line segment styles can be overridden by scriptable options in the segment object. Currently, all of the Border* and BackgroundColor> options are supported. The segment styles are resolved for each section of the line between each point. 1.2.0
ShowLine bool True If false, the line is not drawn for this dataset. 1.0.0
SpanGaps bool? null If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. 1.0.0
Stepped Object False If the stepped value is set to anything other than false, tension will be ignored.
The following values are supported for stepped.
  1. false: No Step Interpolation(default)
  2. true: Step-before Interpolation(eq. 'before')
  3. 'before': Step-before Interpolation
  4. 'after': Step-after Interpolation
  5. 'middle': Step-middle Interpolation
 1.0.0
Tension double 0 Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. 1.0.0
Type string null Gets or sets the chart type. This value is auto-set based on the chart type. 1.0.0
XAxisID string? Default value is 'first x axis'. The ID of the x-axis to plot this dataset on. Default value is 'first x axis'. 1.0.0
YAxisID string? Default value is 'first y axis'. The ID of the y-axis to plot this dataset on. Default value is 'first y axis'. 1.0.0

LineChartDatasetData Properties #

Name Type Default Required Description Added Version
Data object? null Gets the data value or values for the dataset. 1.0.0
DatasetLabel string? null Gets the label for the dataset this data belongs to. 1.0.0

LineChartDatasetDataLabels Properties #

Name Type Default Required Description Added Version
Alignment DataLabelAlignment Center Gets or sets the data labels alignment. 1.0.0
Anchor DataLabelAnchor Center Gets or sets the data labels anchor. 1.0.0
BackgroundColor string null Gets or sets the data label background color. 1.0.0
BorderColor string null Gets or sets the data label border color. 1.0.0
BorderWidth double 2 Gets or sets the width of the border. 1.0.0
DataLabelsAlignmentAsString string? null Gets the data labels alignment as a string. 1.0.0
DataLabelsAnchorAsString string? null Gets the data labels anchor as a string. 1.0.0

LineChartOptions Properties #

Name Type Default Required Description Added Version
Animation char null Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes. 1.2.0
IndexAxis string? null The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. 1.0.0
Interaction Interaction new() Gets or sets the interaction options for the chart. 1.0.0
Layout ChartLayout new() Gets or sets the layout configuration for the chart. 1.0.0
Locale string? By default, the chart is using the default locale of the platform which is running on. Gets or sets the locale for the chart. 1.0.0
MaintainAspectRatio bool True Gets or sets a value indicating whether to maintain the original canvas aspect ratio (width / height) when resizing. 1.0.0
Plugins LineChartPlugins new() Gets or sets the collection of plugins associated with the line chart. 1.0.0
Responsive bool True Gets or sets a value indicating whether the chart canvas should resize when its container does. 1.0.0
Scales Scales new() Gets or sets the collection of scales used for measurement or calibration. 1.0.0
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!