The requested page is not available for the requested platform. You are viewing the content for Default platform.

DxChart<T> Class

A Chart component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxChart<T> :
    DxChartBase<T>

Type Parameters

Name Description
T

The data item type.

Remarks

The DevExpress Chart component (<DxChart>) allows you to create Line, Area, Bar, Bubble, Pie, and other chart types for Blazor applications.

Blazor_Charts

Note

Online Demo: Charts - Series Types

To add the <DxChart> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxChart>...</DxChart> markup to your application.

  3. Bind the component to data.

  4. Configure the component (see the sections below).

Chart Types

The <DxChart> provides a variety of 2D series types that allow you to display data as one chart or a combination of different series.

Chart View

Series Type

Demo

Area

DxChartAreaSeries

DxChartRangeAreaSeries

DxChartSplineAreaSeries

DxChartStackedAreaSeries

DxChartStackedSplineAreaSeries

DxChartFullStackedAreaSeries

DxChartFullStackedSplineAreaSeries

DxChartStepAreaSeries

Charts - Series Types

Charts - Range Area Series

Bar

DxChartBarSeries

DxChartRangeBarSeries

DxChartStackedBarSeries

DxChartFullStackedBarSeries

Charts - Series Types

Charts - Range Bar Series

Bubble

DxChartBubbleSeries

Charts - Series Types

Financial

DxChartCandlestickSeries

DxChartStockSeries

Charts - Financial Series

Line

DxChartLineSeries

DxChartSplineSeries

DxChartStackedLineSeries

DxChartStackedSplineSeries

DxChartFullStackedLineSeries

DxChartFullStackedSplineSeries

DxChartStepLineSeries

Charts - Series Types

Pie

DxChartPieSeries

DxChartDonutSeries

Charts - Pie Series

Scatter

DxChartScatterSeries

Charts - Series Types

Bind to Data

Use the Data property to specify an IEnumerable<T> data source, and the ArgumentField and ValueField properties to specify data source fields that provide arguments and values for chart points.

Note

The Chart operates in bound mode only.

<DxChart Data=@ChartsData>
    <DxChartCommonSeries 
        NameField=@((SaleInfo s) => s.Country) 
        Filter=@(s => s.Region == "North America") 
        ArgumentField=@(s => s.Date.DayOfWeek.ToString()) 
        ValueField=@(s => s.Date.Year.ToString()) 
        SeriesType=@ChartSeriesType.Bubble>
    </DxChartCommonSeries>
    ...
</DxChart>

Blazor_Chart_Series_Bubble

Series

A chart series is a collection of related data points. You can specify common settings for all chart series or add series to the component markup and configure series-specific settings individually.

<DxChart Data="@ChartsData">
    <DxChartCommonSeries 
        ArgumentField="@((SaleInfo s) => s.City)" 
        ValueField="@((SaleInfo s) => s.Amount)" 
        AggregationMethod="@Enumerable.Sum">
    </DxChartCommonSeries>
    <DxChartBarSeries  
        Name="2013" 
        Filter="@((SaleInfo s) => s.Date.Year == 2013)" 
    </DxChartBarSeries>
    ...
    <DxChartLineSeries 
        Name="2015" 
        Filter="@((SaleInfo s) => s.Date.Year == 2015)"
    </DxChartLineSeries>
</DxChart>

Blazor-Charts-Specific-Series-Settings

Note

Pie charts can only display a Pie or Donut series.

Common Settings

Use the DxChartCommonSeries component to specify common settings for all chart series. The SeriesType property specifies a chart type.

<DxChart Data="@ChartsData">
    <DxChartCommonSeries 
        NameField="@((SaleInfo s) => s.Date.Year)" 
        ArgumentField="@((SaleInfo s) => s.City)" 
        ValueField="@((SaleInfo s) => s.Amount)" 
        SeriesType="@ChartSeriesType.Bar">
    </DxChartCommonSeries>
</DxChart>

Blazor_Chart_Series_Bar

Note

Online Demo: Charts - Series Types

A table below lists common settings for chart series:

Member

Description

AggregationMethod

Specifies how to aggregate series points.

ArgumentField

Specifies a data source field that provides arguments for series values.

Filter

Specifies a filter that is applied to data source objects.

NameField

Specifies a data source field that is used to group data.

PaneField

Specifies which data source field provides pane names for chart series.

SeriesTemplate

Specifies a series template

ValueField

Specifies a data source field that provides values for series points.

Note

Individual series settings have a priority over settings common to all series.

Type-Specific Settings

Type-specific series have their own settings. For example, the Bubble series represent chart data as points with different sizes called "bubbles". To specify the data source field that provides bubble sizes, use the DxChartBubbleSeries.SizeField property.

<DxChart Data=@ChartsData>
    <DxChartCommonSeries>
        ...
    </DxChartCommonSeries>
    <DxChartBubbleSeries 
        Name="United States" 
        SizeField=@(s => s.Amount)
        Color="@(Color.FromArgb(208, 208, 208))" />
    <DxChartBubbleSeries 
        Name="Canada" 
        SizeField=@(s => s.Amount)
        Color="@(Color.FromArgb(252, 58, 48))" />
</DxChart>

Blazor-Charts-Specific-Series-Settings-Bubble

Note

Online Demo: Charts - Series Types

For line series, you can use the DxChartSeriesPoint component to customize the point color, size, symbol, and visibility. These settings apply to all the points in a series. To override individual points' settings, handle the chart's CustomizeSeriesPoint event.

<DxChart Data="@WeatherForecasts" CustomizeSeriesPoint="@PreparePointColor">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       Color="@System.Drawing.Color.Gray"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.ToString("yyyy/MM/dd"))"
                       Name="Temperature, F">
        <DxChartSeriesPoint Symbol="@ChartPointSymbol.Polygon" Color="@System.Drawing.Color.Gray" Size="25" />
    </DxChartLineSeries>
</DxChart>

@code {
    WeatherForecast[] WeatherForecasts;
    ...
    protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings)
    {
        double value = (double)pointSettings.Point.Value;
        if(value > 75)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Red;
        else if(value < 25)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Blue;
    }
}

Labels

Use the DxChartSeriesLabel component to show and configure labels for series data points. The specified settings apply to all the labels in the series.

To override individual labels' settings, handle the chart's CustomizeSeriesPoint event and use the event argument's PointLabel property.

<DxChart Data="@WeatherForecasts" CustomizeSeriesPoint="@PreparePointLabel">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.ToString("yyyy/MM/dd"))"
                       Name="Temperature, F">
        <DxChartSeriesLabel Position="@RelativePosition.Outside">
            <DxChartSeriesLabelConnector Visible="true" Width="3" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
</DxChart>

@code {
    WeatherForecast[] WeatherForecasts;
    ...
    protected void PreparePointLabel(ChartSeriesPointCustomizationSettings pointSettings)
    {
        double value = (double)pointSettings.Point.Value;
        if(value > 25 && value < 75)
            pointSettings.PointLabel.Visible = true;
    }
}

Axes

Primary X and Y axes are automatically created based on the first series' data type. The DxChartArgumentAxis class represents the X-axis, and the DxChartValueAxis class represents the Y-axis. Use the Position property to specify the Y-axis position. The DxChartAxisTitle object specifies the axis title.

Axis labels are displayed on the chart's X-axis. The <DxChart> uses smart label management to ensure that labels do not overlap and are displayed correctly. The Format property specifies the axis label's format.

If the data range or format is series specific, each series can use its own Y-axis. The number of Chart's Y-axes is not limited.

<DxChart Data="@SalesData">
    <DxChartValueAxis>
        <DxChartAxisLabel Format="@ChartAxisLabelFormat.Percent"></DxChartAxisLabel>
        <DxChartAxisTitle Text="Value Axis Title"></DxChartAxisTitle>
    </DxChartValueAxis>
    <DxChartValueAxis Name="TotalAxis" Position="@HorizontalEdge.Right">
        <DxChartAxisTitle Text="Total Amount"></DxChartAxisTitle>
    </DxChartValueAxis>
    <DxChartArgumentAxis>
        <DxChartAxisTitle Text="Cities"></DxChartAxisTitle>
    </DxChartArgumentAxis>
    ...
</DxChart>

Blazor-Charts-Two-Value-Axes

Legend

The chart's legend lists all chart series. The DxChartLegend component represents the chart legend. Use the Visible and series' Name properties to specify the legend's visibility and text, and the Position property to specify the legend's position.

Enable the AllowToggleSeries property to display checkboxes that toggle the visibility of specific series.

<DxChart Data=@SalesData>
    <DxChartLegend AllowToggleSeries="true" Orientation=@Orientation.Vertical 
                   HorizontalAlignment=@HorizontalAlignment.Left Position=@RelativePosition.Outside>
        <DxChartTitle Text="Legend" />
    </DxChartLegend>
    <DxChartBarSeries  Name="2013" Filter="@((SaleInfo s) => s.Date.Year == 2013)" AggregationMethod="@Enumerable.Sum" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"></DxChartBarSeries>
    ...
</DxChart>

Blazor-Chart-Legend

Titles and Subtitles

The <DxChart> component can display chart/legend titles (DxChartTitle) and subtitles (DxChartSubTitle).

<DxChart Data="@SalesData">
    <DxChartTitle Text="Sales amount" />
    <DxChartSubtitle Text="by cities"></DxChartSubtitle>
    <DxChartBarSeries  Name="2013" Filter="@((SaleInfo s) => s.Date.Year == 2013)" AggregationMethod="@Enumerable.Sum" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"></DxChartBarSeries>
    <DxChartBarSeries  Name="2014" Filter="@((SaleInfo s) => s.Date.Year == 2014)" AggregationMethod="@Enumerable.Sum" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"></DxChartBarSeries>
    <DxChartLineSeries Name="2015" Filter="@((SaleInfo s) => s.Date.Year == 2015)" AggregationMethod="@Enumerable.Sum" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)">
        <DxChartSeriesLegendItem IconCssClass="oi oi-flag">
            <TextTemplate>Last year</TextTemplate>
        </DxChartSeriesLegendItem>
    </DxChartLineSeries>
    <DxChartLegend AllowToggleSeries="true" Orientation="@Orientation.Vertical" HorizontalAlignment="@HorizontalAlignment.Right">
        <DxChartTitle Text="Years">
            <DxChartSubtitle Text="(2013-2015)"></DxChartSubtitle>
        </DxChartTitle>
    </DxChartLegend>
</DxChart>

Blazor-Chart-Titles-and-Subtitles

Tooltips

The DxChartTooltip allows you to specify the tooltip templates. These tooltips are displayed when the mouse hovers over a chart series

<DxChart Data="@WeatherForecasts">
    <DxChartRangeBarSeries ValueField="@((WeatherForecast i) => i.TemperatureF)" ArgumentField="@(i => i.Date.ToString("yyyy/MM/dd"))" Name="Temperature, F" />
    <DxChartTooltip>
        @context.GetRangePoint().Render((rangePoint) => 
            @<div class="p-3">
                <p>Max: @rangePoint.EndValue</p>
                <p>Min: @rangePoint.StartValue</p>
            </div>
        )
    </DxChartTooltip>
</DxChart>

Blazor-Chart-Tooltip-Bar

Multiple Panes

The <DxChart> component allows you to create charts with multiple panes under each other. A pane (DxChartPane) can display one or more series and can share the argument axis with other panes. To specify a pane where the series is displayed, use the series Pane property.

<DxChart Data="@SalesData">
    <DxChartTitle Text="Sales amount" />
    <DxChartLegend Position="@RelativePosition.Outside" VerticalAlignment="@VerticalEdge.Bottom" />
    <DxChartPane Name="Pane1"></DxChartPane>
    <DxChartPane Name="Pane2"></DxChartPane>
    <DxChartBarSeries Name="2013" Filter="@((SaleInfo s) => s.Date.Year == 2013)" AggregationMethod="@Enumerable.Sum" 
                      Pane="Pane1" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" />
    <DxChartBarSeries Name="2014" Filter="@((SaleInfo s) => s.Date.Year == 2014)" AggregationMethod="@Enumerable.Sum" 
                      Pane="Pane2" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" />
</DxChart>

Blazor-Chart-Series-Pane

Visualize Pivot Grid Data

Do the following to link <DxChart> to the DxPivotGrid<T> component:

  1. Create a method that asynchronously loads data from an IEnumerable<T> data source (Sales.Load() in this example).
  2. Create a DxPivotGridDataProvider<T> object based on the created method.
  3. Bind the Chart to the provider object. Use the ChartDataSource property.
  4. Bind the Pivot Grid to the provider object. Use the PivotGridDataSource property.
<DxChart Data="@(PivotGridDataProvider.ChartDataSource)">
    <DxChartCommonSeries NameField="@((IChartDataItem s) => s.SeriesName)"
                         ArgumentField="@(s => s.Argument)"
                         ValueField="@(s => s.Value)"
                         SeriesType="@ChartSeriesType.Bar" />
</DxChart>

<DxPivotGrid Data="@(PivotGridDataProvider.PivotGridDataSource)">
    <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="@PivotGridSortOrder.Ascending" 
        Area="@PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="@PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.City)" Area="@PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="@PivotGridGroupInterval.Year" 
        Area="@PivotGridFieldArea.Column" Caption="Year"> </DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="@PivotGridFieldArea.Data" 
        SummaryType="@PivotGridSummaryType.Count"> </DxPivotGridField>
</DxPivotGrid>

@code {
    DxPivotGridDataProvider<SaleInfo> PivotGridDataProvider = DxPivotGridDataProvider<SaleInfo>.Create(Sales.Load());
}

The Chart shows data from the Pivot Grid's lowest expanded level. The Chart is updated when a user expands or collapses rows/columns in the Pivot Grid.

Blazor-Linked-PivotGrid-And-Chart

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxControlComponent<DevExpress.Blazor.Base.DxChartBase, ChartBaseModel>
DevExpress.Blazor.Base.DxChartBase
DxChartBase<T>
DxChart<T>
See Also