Progress Telerik UI for Blazor
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.
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.
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.
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:
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.
The Blazor Chart component exposes gradient settings for the chart series.
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.
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.
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 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.
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).
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.
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.
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.
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 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.