DxChart<T>.Data Property

Specifies a data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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.

Razor

<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>

Data Source

@code {
    IQueryable<SaleInfo> ChartsData;

    protected override async Task OnInitializedAsync() {
        ChartsData = await MyDataService.Load();
    } 
}

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:

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.

<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.

Run Demo: Pivot Grid - Chart Integration