ui-for-blazor-lp-pages-herobanner

Progress Telerik UI for Blazor

Chart

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

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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. 


    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • Blazor Chart Types

    The Telerik Blazor Chart component has you covered with many different visualization options and chart types: 

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

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

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.
    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.

    A screenshot of a cell phone Description automatically generated

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

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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. 

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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. 

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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

Launch demos See Blazor in action and check out how much it can do out-of-the-box.
Download preview Try Blazor with dedicated technical support.