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 page hero banner illustration

High Performing, Beautiful Blazor Data Visualizations

Professional design, interactive, high-performance and everything else your users expect. Below are just some of the popular features.

Super Customizable Blazor Chart
  • Super Customizable

    Our Blazor Chart library gives you ultimate flexibility whether it is applying themes, configuring axes, customizing data series, adding crosshairs and just about anything you can think of. The best part is that is just takes a few lines of code.

    See the Blazor Chart Demos
  • All Popular Chart Types

    The Telerik UI for Blazor Chart component offers over 15 chart types, giving you a rich variety. You can use each series type independently or add multiple different series to a single chart, rendered together.

  • Easy API

    As with all Telerik UI components, the Chart API is well documented and designed to make configuration, styling, and custom behavior as easy as possible.

  • Canvas and SVG Rendering

    Choose to render your Blazor Charts in SVG or Canvas with a simple configuration option. Regardless of which you choose, your charts will look exactly the same.

    Read the Blazor Charts Rending Modes documentation

Series Types

Column Chart

The Blazor Column Chart is one of the primary charting types that you may need to add to your Blazor WebAssembly (WASM) and Server-side dashboard application. It displays values as vertical bars whose heights are proportional to the values being plotted. You can use a Column chart to show a comparison between several sets of data (for example, summaries of sales data over different time periods). Each series is automatically colored differently for easier reading.

See the Blazor Column Chart Demo

Chart Elements

Tooltips

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.

See the Blazor Charts Tooltip demo

More

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.

See the Blazor Chart Globalization documentation

Advanced Charting

Easy Customization

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.

Series Types

Area Chart

The Blazor Area Charts help you show comparisons between sets of data exactly how you want. Customize everything from basic opacity, color, and line style to more advanced axis, plat area, and legend settings. The Area Chart will even let you determine how to handle scenarios where a null value appears in the series.

See the Blazor Area Chart demo

Financial Charts

Stock Chart

The Blazor Stock Chart component was added for those of you developing financial applications. The Stock Chart displays changes in the price of a financial unit over time, such as the daily values of a stock price for the past month. You can fully customize the control and change anything from fonts, area background color, opacity, line width and dash types to its dimensions, paddings & margins and tooltips. You can even provide your own templates.

See the Blazor Stock Chart demo

Financial Charts

OHLC Chart

The Blazor OHLC Chart, also called the Open High Low Close Chart) shows price movements over time through the four data points in its name. All you need to do is bind data and the component does the rest!

See the Blazor PHLC Chart demo

Advanced Charting

Click Event

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.

See the Blazor Chart Click Event demo

Chart Elements

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.

Advanced Charting

Plot Area Customization

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.
Telerik UI for Blazor Chart - Plot Area Customization

Series Types

Bar Chart

The Blazor Bar Charts provide a highly customizable version of one of the most typical chart types. Customize bar colors, gap and spacing, axes, chart area, legend, and more.

See the Blazor Bar Chart demo

More

Theming

The Telerik Blazor Chart component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). Each theme predefines several series colors, so your charts look harmonious and fit design guidelines.

See the Blazor Chart Themes documentation

Series Types

Bubble Chart

The Blazor Bubble Chart is an easily implemented version of the chart type popular for visualizing scientific, social, and economic relations. Customize opacity, color, axes, chart area, legend, and more. Additionally, negative bubble values are supported.

See the Blazor Bubble Chart demo

Data Binding

Flexible Data Binding

The Blazor Chart gives you full flexibility in data binding. 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.

See the Blazor Chart Data Binding documentation

Series Types

Donut Chart

The Blazor Donut Cchart is a variant of the pie chart and is suitable for displaying data as parts of a whole. It has a hole in its center and displays categories as arcs rather than slices. While a Pie chart is suitable for displaying single series of data, the Donut chart is perfect for displaying multiple data series in both Blazor WebAssembly (WASM) and Server-side dashboard applications.

See the Blazor Donut chart demo

Advanced Charting

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.
Telerik UI for Blazor Chart Title Customization

Chart Elements

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.

See the Blazor Chart Multiple Axes demo

Chart Elements

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.

See the Blazor Chart Data Axis demo

Advanced Charting

Multiple Series Types, One Chart

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.

See the Blazor Multiple Series Chart demo

Series Types

Heat Map

The Blazor Heatmap Chart is used to display values as color in two dimensions. It allows visualization of multiple values, often recorded on a daily basis, such as temperatures, sales, orders, etc. The component features color scales, category binding, tooltips, shape customization and more.

See the Blazor HeatMap Chart demo

Series Types

Candlestick Chart

The Blazor Candlestick Chart visualizes the movement of the price of a financial unit and consists of a bar (the candle), representing the open and close values, and vertical lines, the candlesticks, which illustrate the highest and lowest values.

See the Blazor Candlestick Chart demo

Series Types

Line Chart

The Blazor Line Chart component displays data as continuous lines that connect points defined by the values of their items. It is useful for displaying a trend over time or comparing several sets of similar data in both Blazor WebAssembly (WASM) and Server-side dashboard applications.

See the Blazor Line Chart demo

Series Types

Pie Chart

The Blazor Pie Chart component shows how a certain total amount is split between categories as a circle divided into radial slices. Each categorical value corresponds with a single “pie slice” of the circle, and the size of each slice is proportional to the value of the whole. The UI for Blazor Pie chart component works in both Blazor WebAssembly (WASM) and Server-side applications and is suitable for displaying single series of data.

See the Blazor Pie Chart demo

Series Types

Radar Area Chart

The Blazor Radar Area Chart displays multivariate data. The series are marked with data points connected with lines and filled in to represent the area of each variable depending on its metrics. Each variable has its own axis and all of them are joined in the center of the Radar. It is useful for comparing combinations of several entities in one visual.

See the Radar Area Chart demo

Series Types

Radar Column Chart

The Blazor Radar Column Chart is used to visualize multivariable data in a single view. Each variable is in the form of a column whose height depends on the data value. The multiple data columns have a common starting point which is the center of the Radar. This Radar Chart type is useful for breaking down a group performance into its different entities and their quantity.

See the Blazor Radar Column Chart demo

Series Types

Radar Line Chart

The Blazor Radar Line Chart serves to display data from multiple variables. Each variable has its own axis and all of them are joined in the center of the Radar. The series are represented as lines which are connected by data points on the different axes. It is useful for analyzing different metrics of multiple entities in one visual.

See the Blazor Radar Line Chart demo

Series Types

Scatter Chart

The Blazor Scatter Chart (also known as scatter plots or graphs) uses dots to represent values for two numeric variables. Scatter plots can be used in both Blazor WebAssembly (WASM) and Server-side dashboard applications to observe relationships between numerical values such as scientific experiment data or parametrized test results.

See the Blazor Scatter Chart demo

Series Types

Scatter Line Chart

The Scatter Line Chart component is very similar to the Scatter chart which uses points to represent the relationship between two numeric values, but the dots are connected by lines and thus it can account for missing values in a series or show a trend (for example, in a scientific experiment data). Scatter line plots can be used in both Blazor WebAssembly (WASM) and Server-side dashboard applications to observe relationships between values.

See the Blazor Scatter Line Chart demo

inverted-top-curve-blue

Why Developers Love Using Telerik UI for Blazor Charts

  • TypeScript for Maintenance and Scalability
  • Full Accessibility
  • Documentation and Demos
  • Responsive Design
  • Localization and Globalization
  • Customize Everything
  • Themes and Design Systems
  • Integrate with Other Components
Ninja with laptop illustration
trust-radius-badge

Telerik Earns Multiple TrustRadius Best of Development 2021 awards

Telerik has won Best Feature Set and Best Customer Support .

trust-radius-badge

Telerik UI Earned TrustRadius' Top Rated 2021 award

Progress Telerik UI has earned TrustRadius’ Top Rated Award for Software Components and .NET Development.

It’s Easy to Get Started with the Telerik Blazor Chart Components

We are heavily invested in making sure your experience with the Blazor Charts is as successful and enjoyable as it can be. We are constantly publishing resources, refining our docs and demos, and even streaming on twitch. Here is some of our most popular resources.

Frequently Asked Questions

All Blazor Components