Progress Telerik UI for Blazor
Blazor Chart
- Present any data in an easily understandable and visually appealing way. The Blazor Chart component supports over a dozen different chart types serving any use case.
- This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
- The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
-
Blazor Chart Overview
The Telerik Blazor Charts cover your data visualization needs with ease, providing a large number of chart types and flexible data binding so you can plug them quickly into your WebAssembly (WASM) and Server-side Blazor dashboards.
-
Blazor Chart Types
The Telerik Blazor Chart component has you covered with many different visualization options and chart types:
-
Donut – like the pie chart, but with a hole inside, and also supports more than one series (that’s what the hole is for).
-
Area - can be useful for emphasizing changes in values from several sets of similar data.
-
Line – often used for showing trends and comparing several datasets.
-
Scatter – a collection of data points (such as scientific data) strewn across the plot with two numerical axes.
-
Scatter Line – numerical chart that also shows a trend by connecting the individual data points with lines.
-
-
Blazor Chart Data Binding
Charts usually show a combination of two values on a plot and they tie the x-axis value to the y-axis value to showcase a relationship or a trend. The Telerik charts let you provide this data in the way suitable for your app – you have full flexibility and 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.
-
-
Blazor Chart Tooltip
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.
.jpg?sfvrsn=cbc8c2c5_0)
-
Customizing Charts
You can customize all aspects of each individual chart – from the series color, to its labels content, font, size, position, and the axes lines, labels and formatting. Just look for the nested tags under each element declaration and the Intellisense will show you a ton of options.
-
Chart Series Gradient
The Blazor Chart component exposes gradient settings for the chart series.
-
Plot Area Customizations
The Blazor Chart component exposes multiple parameters that allow customization of the plot area borders, margin and padding. You can set the border color by passing a valid CSS color string, including HEX and RGB, set the position to top, right, or left and more.
-
Chart Legend Custom Title
The Telerik Blazor Chart legend title is now fully customizable and you can modify all aspects of the chart legend title including its position, border, alignment, padding and background color.
-
Combining Blazor Chart Types
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.
-
Blazor Chart Plot Bands
The Telerik UI for Blazor Chart plot bands feature allows you to highlight a specific range of an axis. Each plot band can be configured to display an optional label.
-
Chart Rendering Modes - Canvas/SVG
The Chart renders in the browser to preserve server resources. It has a couple of rendering modes (SVG markup or a <canvas>) to improve performance further, and it can even animate during rendering for a smoother user experience (enabled by default).
-
Blazor Chart Click Event on a Chart Element
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.
-
Chart Multiple Axes
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.
-
Chart Date Axis
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.
-
Blazor Chart Globalization
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.
-
Chart Theming
The Telerik Blazor Chart component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). Each theme predefines several series colors, so your charts look harmonious and fit design guidelines.
Next Steps
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Try Telerik UI for Blazor with dedicated technical support.