Blazor Toolkit
Axis Title

Axis titles provide contextual information about the data represented along an axis. They help users understand the unit, scale, or meaning of the values being plotted. In this sample, the primary Y-axis includes a styled title using the Title property of ChartPrimaryYAxis. The title supports customization options using the ChartAxisTitleStyle component, allowing you to configure properties such as Size, Color, FontFamily, and FontWeight for improved visual emphasis and readability within analytical dashboards.

Axis Title Position

Axis title positioning controls how the title is aligned relative to the axis, helping improve readability and visual balance in different Chart layouts. In this sample, the primary Y-axis title is aligned near the start of the axis using the TextAlignment property of ChartAxisTitleStyle. This is useful when you want the axis title to appear closer to the Chart origin or aligned consistently with other visual elements, without applying any rotation. Set it to Alignment.Near, Alignment.Center, or Alignment.Far.

Tick Lines

Tick lines help users visually associate axis labels with their corresponding data points. Major tick lines indicate primary intervals, while minor tick lines provide additional reference points between major intervals. This sample demonstrates configuring both major and minor tick lines on the primary X-axis and Y-axis using the ChartAxisMajorTickLines and ChartAxisMinorTickLines components. Tick Height, Width, and Color can be customized. The frequency of minor ticks is controlled by the MinorTicksPerInterval property on the axis to improve readability for datasets with dense or proportional values.

Grid Lines

Grid lines provide visual guides that help users estimate values and compare data points across the Chart area. Major grid lines represent primary axis intervals, while minor grid lines add additional reference points between them. This sample demonstrates configuring both major and minor grid lines on the primary X-axis and Y-axis using the ChartAxisMajorGridLines and ChartAxisMinorGridLines components. Properties such as Width and DashArray can be configured for improved readability in categorical and proportional datasets.

Inversed Axis

The inverted axis feature reverses the rendering direction of an axis. Instead of progressing from left to right or bottom to top, values are displayed in the opposite direction. This sample demonstrates inverting both the primary X-axis and Y-axis by setting the IsInversed property to true. Axis inversion is useful for ranking scenarios, descending comparisons, or when aligning Charts with specific visual narratives.

Multiple Axis

Multiple axes allow different datasets to be visualized within a single Chart using independent value ranges and units. Add multiple axes to the Chart by using the ChartAxis component. In this sample, temperature readings are displayed in both Fahrenheit and Celsius. The primary Y-axis represents Fahrenheit values, while a secondary opposed Y-axis displays Celsius values (configured by setting OpposedPosition="true"). Each series is explicitly bound to its corresponding axis using the YAxisName property to ensure accurate scaling and clarity.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.