DxPolarChartStackedBarSeries<T, TArgument, TValue> Class

Defines a stacked bar series.

Assembly: DevExpress.Blazor.v25.1.dll

Declaration

public class DxPolarChartStackedBarSeries<T, TArgument, TValue> :
    DxPolarChartBarSeries<T, TArgument, TValue>

Type Parameters

Name	Description
T	The data type.
TArgument	The series argument type.
TValue	The series value type.

Remarks

A stacked bar series displays individual values as bars. Corresponding values of different series are displayed as differently colored stacked bars.

Stacked bars

Run Demo: Polar and Radar - Wind Rose

Declare a Stacked Bar Series

Use the Polar Chart’s Data property to specify a data source.
Add a <DxPolarChartStackedBarSeries> tag to the component’s markup.
Assign data source fields that contain arguments and values for data points to ArgumentField and ValueField properties.
Optional. If you want to visualize the series as a side-by-side chart, specify the Stack property.
Optional. Configure the series: customize appearance, add labels, choose selection and hover modes, etc.

@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)
                    }
                }
            };
        }
    }
}

Nested Component Structure

You can add the following child components to a stacked bar series:

DxChartSeriesLabel: Defines a series label.
DxChartSeriesLegendItem: Defines an item that indicates a series in the legend.
DxChartSeriesPoint: Contains 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>

Nested components

Customize Appearance

The Polar Chart allows you to customize a bar series. The following options are available:

BarPadding: Specifies the padding between bars in a bar group, as a percentage.
BarWidth: Specifies the width of an individual bar in the series, in pixels.
BreakOnEmptyPoints: Specifies whether the series should break on points with null values.
Color: Specifies the color of the series.
MinBarHeight: Specifies the minimum bar height, in pixels.

Custom series appearance

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

User Interaction Options

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.