Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 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

DxChart<T>.Data Property

Specifies a data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public IEnumerable<T> Data { get; set; }

#Property Value

Type Description
IEnumerable<T>

A data source.

#Remarks

The Chart component supports a data source that contains table-based data. Refer to our GitHub repository for a sample data source.

<DxChart Data="@ChartsData">
    <DxChartBarSeries Name="2019"
                      Filter="@((SaleInfo s) => s.Date.Year == 2019)"
                      ArgumentField="@(s => s.City)"
                      ValueField="@(s => s.Amount)"
                      SummaryMethod="Enumerable.Sum" />
    @* ... *@
</DxChart>

Chart Series Bubble

Note

When you bind a chart to DateTime values and set the Kind property to Utc, the component converts dates (for example, when it displays axis labels). This occurs because DxChart is rendered on the client. To avoid such conversion, make sure your DateTime objects have their Kind properties set to Local or Unspecified.

You can also adjust the time difference to display dates correctly. The following code snippet demonstrates a possible solution:

C#
public WeatherForecast[] GetForecast() {
    var localZone = TimeZoneInfo.Local;
    var localOffset = localZone.GetUtcOffset(DateTime.UtcNow);
    var cur = DateTime.UtcNow.Add(localOffset);

    var utcDates = new List<DateTime> { cur };
    var dates = new List<DateTime>();
    foreach (var utcDate in utcDates)
        dates.Add(new DateTime(utcDate.Ticks));
    // ...
}

You can also link the Chart to the DxPivotGrid<T> component. Create a DxPivotGridDataProvider<T> object and set the Chart’s Data property to the provider’s ChartDataSource property value. Refer to the Visualize Pivot Grid Data section for more information.

Razor
<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;
    protected override void OnInitialized() {
        base.OnInitialized();
        PivotGridDataProvider = DxPivotGridDataProvider<SaleInfo>.Create(Sales.GetSalesAsync());
    }
}

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.

Linked PivotGrid And Chart

Run Demo: Pivot Grid - Chart Integration

See Also