IChartDataItem.ValueFieldName Property

Returns the name of a data source field that ships with pane names for chart series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

string ValueFieldName { get; }

Property Value

Type	Description
String	The name of a data source field.

Remarks

Objects that implement the IChartDataItem interface are used to specify a chart’s data source when you link the Chart and Pivot Grid components. The IChartDataItem.ValueFieldName returns the name of a data source field that ships with pane names for Chart series. Assign this name to the PaneField property.

Follow the steps below to link the Chart and Pivot Grid components:

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.
5. Assign corresponding fields to NameField, ArgumentField, and ValueField properties.
6. Additionally, you can assign a data field name to the PaneField property. This enables the Chart to group data by the corresponding field’s values and create a separate pane for each group.

<DxChart Data="@(PivotGridDataProvider.ChartDataSource)">
    <DxChartLegend Position="RelativePosition.Outside" VerticalAlignment="VerticalEdge.Bottom"
                   CssClass="shadow border justify-content-around" />
    <DxChartCommonSeries NameField="@((IChartDataItem s) => s.SeriesName)"
                         ArgumentField="@(s => s.Argument)"
                         ValueField="@(s => s.Value)"
                         PaneField="@(s => s.ValueFieldName)"
                         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.Date)" GroupInterval="PivotGridGroupInterval.Quarter" Area="PivotGridFieldArea.Column" Caption="Quarter">
        <HeaderTemplate>@string.Format("Q{0}", context)</HeaderTemplate>
    </DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum"></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.

Run Demo: Pivot Grid - Chart Integration