Skip to main content

DevExpress v25.1 Update — Your Feedback Matters

Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Blazor Chart

  • 3 minutes to read

DevExpress Chart for Blazor (<DxChart>) helps you transform data into a concise and readable visual representation.

Blazor Charts

Read Tutorial: Get Started With Blazor Charts

Run Demo: Blazor Charts

Accept "Target Cookies" to watch embedded YouTube videos Open cookie settings
Or
Watch this video on Youtube Watch on youtube

#API Reference

Refer to the following list for the component API reference: DxChart Members.

#Supported Series Types

The DevExpress Blazor Chart component ships with different 2D chart types – from area and bars to financial OHLC views.

Read Tutorial: 25 Series Types

#Data Binding

The DevExpress Blazor Chart supports various data binding scenarios:

For examples on how to bind to the most commonly used data collections, refer to the following sections:

Read Tutorial: Bind Blazor Charts to Data

#Axes

<DxChart> allows you to configure its axes and their visual elements (ticks, titles, constant lines, and so on).

Multiple Axes in Blazor Chart

Read Tutorial: Axes Run Demo: Axes Run Demo: Axis Strips

#Labels

You can add labels to chart series and axes. You can format values and customize label appearance.

Show Series Labels

Read Tutorial: Labels

Run Demo: Series Label Customization Run Demo: Axis Labels

#Zoom and Pan

<DxChart> supports the following zoom and pan operations:

  • Zoom in / out (mouse wheel, zoom/pinch gestures)
  • Zoom in to a specific area (select a rectangle with the mouse)
  • Pan (mouse and scrollbar, swipe gestures)

Blazor Chart - Zoom and Scroll

Read Tutorial: Zoom Run Demo: Zoom

#Data Aggregation

The <DxChart> component can use aggregate methods to group data and decrease the number of visible points. This feature allows you to optimize chart performance.

Data Aggregation

Read Tutorial: Aggregation

#Data Summaries

The Chart component can calculate summaries for points with the same argument value and show the resulting values as series points.

Data Summaries

Read Tutorial: Summaries

#Multiple Panes

The Blazor Chart component allows you to create charts with multiple panes under each other. A pane can display one or more series and shares its argument axis with other panes.

Chart Pane

Read Tutorial: Multiple Panes Run Demo: Multiple Panes

#Descriptive Elements

To help users understand visualized data, you can add descriptive elements to your charts – a legend, titles and subtitles, tooltips, and annotations.

Charts - Annotations

Read Tutorial: Descriptive Elements Read Tutorial: Annotations

Run Demo: Annotations

#Customization

DevExpress Charts for Blazor allow you to customize the appearance of nested/inner components and chart elements. You can also apply a custom color palette and change the component font.

Font Customization

Read Tutorial: Customization

Run Demo: Inner Component Customization Run Demo: Series Customization Run Demo: Palette

#User Interaction Options

DevExpress Blazor Charts allow users to interact with their content: users can select, click, and hover over series and points.

Read Tutorial: User Interaction Options

Run Demo: Selection

#Export

You can export chart content as an encoded string in a specified format (PNG, PDF, JPEG, and GIF).

Read Tutorial: Export