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.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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. 

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

    • Radar – displays data from multiple variables in a single view; it has three chart series – Line, Column and Area
  • 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 UI for Blazor Data Binding
  • 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 UI for Blazor Chart Tooltip - Single
  • 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 UI for Blazor-Combining Blazor Charts
  • 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. 

    Telerik UI for Blazor - Combining Blazor 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.


    Telerik UI for Blazor Chart Plot Bands
  • 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 UI for Blazor - Charts Date Axis
  • 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 UI for Blazor Globalization and Localization
  • 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. 

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.