Nested Component Structure
- 6 minutes to read
The Chart component can include multiple sub-elements (a series, title, legend, and so on). Each element is added as a nested component to the Chart markup. You should specify the Chart’s nested components at correct nesting levels because not all Chart elements can be placed inside each other. This topic contains detailed information about available nesting levels and components permitted at each level.
First-Level Components
The Chart’s root level (<DxChart>...</DxChart>
) can contain the following components:
- Individual series
- DxChartCommonSeries
- DxChartLegend
- DxChartTitle
- DxChartArgumentAxis
- One or more DxChartValueAxis
- One or more DxChartPane
- DxChartTooltip
- DxChartZoomAndPanSettings
- DxChartAnimationSettings
- DxChartScrollBarSettings
The following example shows how to define these components within the Chart’s markup. For a sample data source, refer to our GitHub repository.
<DxChart Data="@Sales.dataSource">
<DxChartLegend AllowToggleSeries="true"
HorizontalAlignment="HorizontalAlignment.Center" />
<DxChartTitle Text="Sales amount" />
<DxChartArgumentAxis EndOnTick="false" />
<DxChartValueAxis EndOnTick="false" />
<DxChartPane Name="Pane1" />
<DxChartPane Name="Pane2" />
<DxChartLineSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)"
ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
Pane="Pane1" />
<DxChartLineSeries Name="2018" Filter="@((SaleInfo s) => s.Date.Year == 2018)"
ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
Pane="Pane2" />
<DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
<div style="margin: 0.75rem">
<div>City: @context.Point.Argument</div>
<div>Number of Sales: @context.Point.Value</div>
</div>
</DxChartTooltip>
<DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Zoom" />
<DxChartAnimationSettings Enabled="false" />
<DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true" />
</DxChart>
Second-Level Components
This section lists first-level components that can contain child components.
Individual Series
An individual series of any type can include:
The code below shows how to define these components and their parameters for a Line series:
<DxChartLineSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)"
ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
Pane="Pane1">
<DxChartSeriesPoint Color="@System.Drawing.Color.Orange" />
<DxChartSeriesLabel Position="RelativePosition.Outside" />
<DxChartSeriesLegendItem IconCssClass="oi oi-flag" />
<DxChartAggregationSettings Enabled="true"
Method="ChartAggregationMethod.Sum" />
</DxChartLineSeries>
Common Series
The DxChartCommonSeries
component can only contain the SeriesTemplate. The template should include at least one series. To specify series-related settings, add the corresponding components to the series markup. For more information on supported child components, refer to the section above.
The code below shows how to define SeriesTemplate
inside the DxChartCommonSeries
component:
<DxChartCommonSeries NameField="@((SaleInfo s) => s.Date.Year)"
ArgumentField="@((SaleInfo s) => s.City)"
ValueField="@((SaleInfo s) => s.Amount)">
<SeriesTemplate Context="settings">
<DxChartLineSeries Settings="@settings">
<DxChartSeriesPoint Color="@System.Drawing.Color.Orange" />
<DxChartSeriesLabel Position="RelativePosition.Outside" />
<DxChartSeriesLegendItem IconCssClass="oi oi-flag" />
<DxChartAggregationSettings Enabled="true" Method="ChartAggregationMethod.Sum" />
</DxChartLineSeries>
</SeriesTemplate>
</DxChartCommonSeries>
Axes
The argument and value axes can contain the following components:
- DxChartAxisGridLines
- DxChartAxisTick
- DxChartAxisMinorTick
- DxChartAxisTitle
- DxChartConstantLine
- DxChartAxisRange
- DxChartAxisLabel
- DxChartScaleBreak
The example below shows how to define these components within a Chart axis’s markup:
<DxChartArgumentAxis EndOnTick="false">
<DxChartAxisGridLines Visible="true" />
</DxChartArgumentAxis>
<DxChartValueAxis EndOnTick="false">
<DxChartConstantLine Value="60000" />
<DxChartValueBreaks StartValue="10000" EndValue="15000" />
<DxChartAxisRange StartValue="0" EndValue="82000" />
<DxChartAxisLabel Format="ChartElementFormat.Thousands()" />
<DxChartAxisTitle Text="Items" />
</DxChartValueAxis>
Title
The DxChartTitle
component can contain the DxChartSubTitle.
<DxChartTitle Text="Sales amount">
<DxChartSubTitle Text="by cities" />
</DxChartTitle>
Third-Level Components
This section lists second-level components that can contain child components.
Legend
The DxChartLegend
component can contain the DxChartTitle
and DxChartSubTitle
(inside the title’s markup) elements.
<DxChartLegend AllowToggleSeries="true"
HorizontalAlignment="HorizontalAlignment.Center">
<DxChartTitle Text="Sales amount">
<DxChartSubTitle Text="by cities" />
</DxChartTitle>
</DxChartLegend>
Legend Item
The DxChartSeriesLegendItem
component can contain the TextTemplate that customizes a legend item’s text.
<DxChartLineSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)"
ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
Pane="Pane1">
<DxChartSeriesLegendItem IconCssClass="oi oi-flag">
<TextTemplate><b>Current year</b></TextTemplate>
</DxChartSeriesLegendItem>
</DxChartLineSeries>
Constant Line
The DxChartConstantLine
component can contain the DxChartConstantLineLabel that sets a label for the constant line.
<DxChartValueAxis EndOnTick="false">
<DxChartConstantLine Value="60000">
<DxChartConstantLineLabel Text="Planned Value" />
</DxChartConstantLine>
</DxChartValueAxis>
Series Point
The DxChartSeriesPoint
component can contain the DxChartSeriesPointImage that customizes the series point image.
<DxChartLineSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)"
ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
Pane="Pane1">
<DxChartSeriesPoint Color="@System.Drawing.Color.Orange">
<DxChartSeriesPointImage Width="50" Height="50" />
</DxChartSeriesPoint>
</DxChartLineSeries>
Series Label
The DxChartSeriesLabel
component can contain the following child components:
- DxChartSeriesLabelConnector
- Customizes a line displayed between a point and its label.
- DxChartFont
- Specifies font properties for the linked chart element (DxChartAxisTitle, DxChartAxisLabel, DxChartSeriesLabel, or DxChartConstantLineLabel).
- DxChartSeriesLabelBorder
- Defines series label border settings.
<DxChartLineSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)"
ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
Pane="Pane1">
<DxChartSeriesLabel Position="RelativePosition.Outside">
<DxChartSeriesLabelConnector Width="3" />
<DxChartFont Size="14" Weight="600" />
</DxChartSeriesLabel>
</DxChartLineSeries>