Blazor Chart

The Blazor Column Chart is one of the primary charting types that you may need to add to your Blazor WebAssembly (WASM) and Server-side dashboard application. It displays values as vertical bars whose heights are proportional to the values being plotted. You can use a Column chart to show a comparison between several sets of data (for example, summaries of sales data over different time periods). Each series is automatically colored differently for easier reading.

Users can hover over the Telerik UI for Blazor Chart to get more detailed information about a particular data point on it. The most obvious case would be a line chart for which the user can hover to read the exact value of the data point, but you can customize the tooltip to do a lot more than that. The Chart Tooltip has 2 levels of configuration:

• Through Parameter Settings you can modify some basic styling like borders and colors.
• Through templates you can completely replace the built-in tooltip with one that serves your application and displays any information important to your users.

See the Blazor Charts Tooltip demo

The Label Format Strings in Telerik UI for Blazor Charts, are culture aware so your users see, for example, the expected number formats with the decimal and thousands of separators they are used to.

The Blazor Area Charts help you show comparisons between sets of data exactly how you want. Customize everything from basic opacity, color, and line style to more advanced axis, plat area, and legend settings. The Area Chart will even let you determine how to handle scenarios where a null value appears in the series.

The Blazor Stock Chart component was added for those of you developing financial applications. The Stock Chart displays changes in the price of a financial unit over time, such as the daily values of a stock price for the past month. You can fully customize the control and change anything from fonts, area background color, opacity, line width and dash types to its dimensions, paddings & margins and tooltips. You can even provide your own templates.

See the Blazor Stock Chart demo

The Blazor OHLC Chart, also called the Open High Low Close Chart) shows price movements over time through the four data points in its name. All you need to do is bind data and the component does the rest!

The Telerik UI for Blazor Chart component exposes a Click event, triggered when the user clicks on the chart. Handling this event opens the door for showing more specialized data to the user. For example, clicking on a segment in a Pie chart might load another Pie Chart which contains the distribution of the original segment.

See the Blazor Chart Click Event demo

The Blazor Bar Charts provide a highly customizable version of one of the most typical chart types. Customize bar colors, gap and spacing, axes, chart area, legend, and more.

The Telerik Blazor Chart component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). Each theme predefines several series colors, so your charts look harmonious and fit design guidelines.

See the Blazor Chart Themes documentation

The Blazor Bubble Chart is an easily implemented version of the chart type popular for visualizing scientific, social, and economic relations. Customize opacity, color, axes, chart area, legend, and more. Additionally, negative bubble values are supported.

The Blazor Chart gives you full flexibility in data binding. You can use various data sources to bind the axes and the series separately or together.

• Separate Series Data – each series can have its own data collection, and the items on the x-axis come from another, and are matched by their indexes.
• Bind the entire chart to a single model – when your data is tightly coupled, you’d often have all the information for a data point or even category in a single class and the chart can use that as well.
• Mix and match – you can have some series use one approach, and the rest another, and the chart will match the categories for you.

See the Blazor Chart Data Binding documentation

The Blazor Donut Cchart is a variant of the pie chart and is suitable for displaying data as parts of a whole. It has a hole in its center and displays categories as arcs rather than slices. While a Pie chart is suitable for displaying single series of data, the Donut chart is perfect for displaying multiple data series in both Blazor WebAssembly (WASM) and Server-side dashboard applications.

The Chart can render more than one axis in each dimension and you can associate each series with its own axes. This lets you show data that varies on orders of magnitude in the same chart without loss of detail.

See the Blazor Chart Multiple Axes demo

If you want to show the development of a trend over time, the chart can let you provide DateTime values for its x-axis and it will aggregate the data points falling in the intervals you choose for you.

See the Blazor Chart Data Axis demo

You can also mix different types of series in a single chart to create more compelling visuals – such as scatter charts and chatter-line charts; or bar charts and line charts.

The Blazor Heatmap Chart is used to display values as color in two dimensions. It allows visualization of multiple values, often recorded on a daily basis, such as temperatures, sales, orders, etc. The component features color scales, category binding, tooltips, shape customization and more.

The Blazor Candlestick Chart visualizes the movement of the price of a financial unit and consists of a bar (the candle), representing the open and close values, and vertical lines, the candlesticks, which illustrate the highest and lowest values.

The Blazor Line Chart component displays data as continuous lines that connect points defined by the values of their items. It is useful for displaying a trend over time or comparing several sets of similar data in both Blazor WebAssembly (WASM) and Server-side dashboard applications.

The Blazor Pie Chart component shows how a certain total amount is split between categories as a circle divided into radial slices. Each categorical value corresponds with a single “pie slice” of the circle, and the size of each slice is proportional to the value of the whole. The UI for Blazor Pie chart component works in both Blazor WebAssembly (WASM) and Server-side applications and is suitable for displaying single series of data.

See the Blazor Pie Chart demo

The Blazor Radar Area Chart displays multivariate data. The series are marked with data points connected with lines and filled in to represent the area of each variable depending on its metrics. Each variable has its own axis and all of them are joined in the center of the Radar. It is useful for comparing combinations of several entities in one visual.

See the Radar Area Chart demo

The Blazor Radar Column Chart is used to visualize multivariable data in a single view. Each variable is in the form of a column whose height depends on the data value. The multiple data columns have a common starting point which is the center of the Radar. This Radar Chart type is useful for breaking down a group performance into its different entities and their quantity.

See the Blazor Radar Column Chart demo

The Blazor Radar Line Chart serves to display data from multiple variables. Each variable has its own axis and all of them are joined in the center of the Radar. The series are represented as lines which are connected by data points on the different axes. It is useful for analyzing different metrics of multiple entities in one visual.

See the Blazor Radar Line Chart demo

The Blazor Scatter Chart (also known as scatter plots or graphs) uses dots to represent values for two numeric variables. Scatter plots can be used in both Blazor WebAssembly (WASM) and Server-side dashboard applications to observe relationships between numerical values such as scientific experiment data or parametrized test results.

See the Blazor Scatter Chart demo

The Scatter Line Chart component is very similar to the Scatter chart which uses points to represent the relationship between two numeric values, but the dots are connected by lines and thus it can account for missing values in a series or show a trend (for example, in a scientific experiment data). Scatter line plots can be used in both Blazor WebAssembly (WASM) and Server-side dashboard applications to observe relationships between values.

See the Blazor Scatter Line Chart demo