Chart

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. 

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. 

Data Binding examples and basics 

• Column - a Column chart is useful to show a comparison between several sets of data. 

• Bar – compares data sets like the Column chart but renders the items horizontally. 

• Pie – shows the data as parts of a whole.  

• 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.  

• Bubble – a numerical chart that has a third dimension – the bubble size reflects it in comparison to the other data points. 

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 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 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. 

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 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.