blazor-devexpress-dot-blazor-dot-dxpolarchartstackedbarseries-3.md
Defines a stacked bar series.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxPolarChartStackedBarSeries<T, TArgument, TValue> :
DxPolarChartBarSeries<T, TArgument, TValue>
| Name | Description |
|---|---|
| T |
The data type.
| | TArgument |
The series argument type.
| | TValue |
The series value type.
|
A stacked bar series displays individual values as bars. Corresponding values of different series are displayed as differently colored stacked bars.
Run Demo: Polar and Radar - Wind Rose
<DxPolarChartStackedBarSeries> tag to the component’s markup.@inject IChartWindRoseDataProvider WindRoseDataProvider
<DxPolarChart Data="@DataSource">
<DxPolarChartArgumentAxis DiscreteDivisionMode="ChartDiscreteAxisDivisionMode.CrossLabels"
FirstPointOnStartAngle="true" />
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val1)" />
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val2)" />
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val3)" />
</DxPolarChart>
namespace BlazorDemo.Data {
public class WindRosePoint {
public string Arg { get; set; }
public double Val1 { get; set; }
public double Val2 { get; set; }
public double Val3 { get; set; }
public double Val4 { get; set; }
public double Val5 { get; set; }
public double Val6 { get; set; }
public double Val7 { get; set; }
public double Val8 { get; set; }
public WindRosePoint(string arg, double val1, double val2, double val3, double val4, double val5, double val6, double val7, double val8) {
Arg = arg;
Val1 = val1;
Val2 = val2;
Val3 = val3;
Val4 = val4;
Val5 = val5;
Val6 = val6;
Val7 = val7;
Val8 = val8;
}
}
}
using System.Collections.Generic;
using BlazorDemo.Data;
namespace BlazorDemo.DataProviders.Implementation {
public class ChartWindRoseDataProvider : IChartWindRoseDataProvider {
public Dictionary<string, List<WindRosePoint>> GenerateData() {
return new Dictionary<string, List<WindRosePoint>>() {
{
"September", new List<WindRosePoint>() {
new WindRosePoint("N", 0.7, 1.7, 2, 1, 0, 0, 0, 0),
new WindRosePoint("NNE", 0.1, 0.6, 0, 0, 0, 0, 0, 0),
new WindRosePoint("NE", 0.3, 0.8, 0, 0, 0, 0, 0, 0),
new WindRosePoint("ENE", 0.3, 0.7, 0, 0, 0, 0, 0, 0),
new WindRosePoint("E", 0.7, 3.2, 3, 0, 0, 0, 0, 0),
new WindRosePoint("ESE", 0.8, 1.5, 0, 0, 0, 0, 0, 0),
new WindRosePoint("SE", 0.3, 1.3, 0, 0, 0, 0, 0, 0),
new WindRosePoint("SSE", 0.1, 2.4, 0, 0, 0, 0, 0, 0),
new WindRosePoint("S", 1.1, 4.2, 2, 0, 0, 0, 0, 0),
new WindRosePoint("SSW", 0.6, 3.6, 3, 0, 0, 0, 0, 0),
new WindRosePoint("SW", 0.8, 2.5, 5, 1, 0, 0, 0, 0),
new WindRosePoint("WSW", 0.3, 2.6, 3, 0, 0, 0, 0, 0),
new WindRosePoint("W", 0.6, 1.7, 3, 0, 0, 0, 0, 0),
new WindRosePoint("WNW", 0.7, 2.5, 3, 0, 0, 0, 0, 0),
new WindRosePoint("NW", 1, 3.2, 3, 1, 0, 0, 0, 0),
new WindRosePoint("NNW", 0.6, 3.8, 4, 2, 0, 0, 0, 0)
}
}, {
"October", new List<WindRosePoint>() {
new WindRosePoint("N", 0.6, 1.8, 2, 1, 0, 1, 0, 0),
new WindRosePoint("NNE", 0.3, 1.2, 1, 0, 1, 0, 0, 0),
new WindRosePoint("NE", 0.3, 2.4, 2, 1, 1, 0, 0, 0),
new WindRosePoint("ENE", 1, 2.2, 1, 0, 0, 0, 0, 0),
new WindRosePoint("E", 0.6, 4.9, 2, 0, 0, 0, 0, 0),
new WindRosePoint("ESE", 0.1, 0.6, 0, 0, 0, 0, 0, 0),
new WindRosePoint("SE", 0.1, 0.3, 1, 1, 0, 0, 0, 0),
new WindRosePoint("SSE", 0.4, 0.7, 1, 0, 0, 0, 0, 0),
new WindRosePoint("S", 0, 3.1, 3, 1, 0, 0, 0, 0),
new WindRosePoint("SSW", 0.6, 1.8, 4, 1, 0, 0, 0, 0),
new WindRosePoint("SW", 0.7, 1.8, 2, 1, 0, 0, 0, 0),
new WindRosePoint("WSW", 0.3, 2.5, 5, 1, 0, 0, 0, 0),
new WindRosePoint("W", 0, 2.8, 6, 2, 0, 0, 0, 0),
new WindRosePoint("WNW", 0.3, 1.5, 4, 1, 0, 0, 0, 0),
new WindRosePoint("NW", 0.1, 2.7, 2, 1, 0, 0, 0, 0),
new WindRosePoint("NNW", 0.3, 1.5, 1, 1, 0, 0, 0, 0)
}
}, {
"November", new List<WindRosePoint>() {
new WindRosePoint("N", 0.7, 3, 8, 2, 0, 0, 0, 0),
new WindRosePoint("NNE", 0.4, 1.6, 2, 1, 0, 0, 0, 0),
new WindRosePoint("NE", 0.5, 3.4, 8, 2, 0, 0, 0, 0),
new WindRosePoint("ENE", 0.3, 4.1, 2, 0, 0, 0, 0, 0),
new WindRosePoint("E", 1.2, 1.8, 0, 0, 0, 0, 0, 0),
new WindRosePoint("ESE", 0.7, 0.3, 0, 0, 0, 0, 0, 0),
new WindRosePoint("SE", 0.1, 0.3, 0, 0, 0, 0, 0, 0),
new WindRosePoint("SSE", 0.3, 0.4, 1, 0, 0, 0, 0, 0),
new WindRosePoint("S", 0.4, 0.8, 1, 0, 0, 0, 0, 0),
new WindRosePoint("SSW", 0.4, 1.5, 0, 0, 0, 0, 0, 0),
new WindRosePoint("SW", 0.8, 0.1, 1, 0, 0, 0, 0, 0),
new WindRosePoint("WSW", 0, 1.5, 2, 1, 0, 0, 0, 0),
new WindRosePoint("W", 0.3, 1, 6, 3, 0, 0, 0, 0),
new WindRosePoint("WNW", 0.3, 1.2, 3, 1, 1, 0, 0, 0),
new WindRosePoint("NW", 0.3, 0.7, 5, 2, 0, 0, 0, 0),
new WindRosePoint("NNW", 0.1, 2.5, 2, 2, 1, 0, 0, 0)
}
}
};
}
}
}
You can add the following child components to a stacked bar series:
DxChartSeriesLabelDefines a series label.DxChartSeriesLegendItemDefines an item that indicates a series in the legend.DxChartSeriesPointContains settings for points of the chart’s line- and area-based series.
Note that the Polar Chart treats individual bars as points. If you specify the same property at both series and series point levels, the latter a has higher priority.
The following code snippet declares these objects in the markup:
@using System.Drawing
<DxPolarChart Data="@DataSource[SelectedPeriod]"
LabelOverlap="PolarChartLabelOverlap.Hide">
<DxChartLegend Position="RelativePosition.Outside"/>
<DxPolarChartArgumentAxis DiscreteDivisionMode="ChartDiscreteAxisDivisionMode.CrossLabels"
FirstPointOnStartAngle="true" />
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val1)">
<DxChartSeriesLegendItem Text="1.3-4 m/s" />
<DxChartSeriesLabel FormatPattern="{value:##.#}" Visible="true" />
<DxChartSeriesPoint Color="Color.Violet" />
</DxPolarChartStackedBarSeries>
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val2)">
<DxChartSeriesLegendItem Text="4-8 m/s" />
</DxPolarChartStackedBarSeries>
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val3)">
<DxChartSeriesLegendItem Text="8-13 m/s" />
</DxPolarChartStackedBarSeries>
</DxPolarChart>
The Polar Chart allows you to customize a bar series. The following options are available:
BarPaddingSpecifies the padding between bars in a bar group, as a percentage.BarWidthSpecifies the width of an individual bar in the series, in pixels.BreakOnEmptyPointsSpecifies whether the series should break on points with null values.ColorSpecifies the color of the series.MinBarHeightSpecifies the minimum bar height, in pixels.
@using System.Drawing
<DxPolarChart Data="@DataSource[SelectedPeriod]">
<DxPolarChartArgumentAxis DiscreteDivisionMode="ChartDiscreteAxisDivisionMode.CrossLabels"
FirstPointOnStartAngle="true" />
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val1)"
BarPadding="1"
Color="Color.Red" />
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val2)"
BarPadding="1"
Color="Color.Yellow" />
<DxPolarChartStackedBarSeries ArgumentField="@((WindRosePoint i) => i.Arg)"
ValueField="@((WindRosePoint i) => i.Val3)"
BarPadding="1"
Color="Color.Green" />
</DxPolarChart>
Users can select a series, its points, and hover the mouse pointer over series elements. The table below describes available user interaction options. Since the Polar Chart treats individual bars as points, the SeriesSelectionMode property is not applicable to a bar series.
| Description | Component Level | Series Level |
|---|---|---|
| Hover Over Series and Its Elements | Not Applicable | HoverMode |
| Point Selection | PointSelectionMode | SelectionMode |
Object ComponentBase DxSettingsComponent<DevExpress.Blazor.Internal.IPolarChartSeriesModel> DxComplexSettingsComponent<DxPolarChartBaseSeries<T, TArgument, TValue>, DevExpress.Blazor.Internal.IPolarChartSeriesModel> DxPolarChartBaseSeries<T, TArgument, TValue> DxPolarChartBarSeries<T, TArgument, TValue> DxPolarChartStackedBarSeries<T, TArgument, TValue>
See Also