DxPolarChartStackedBarSeries<T, TArgument, TValue> Class

Defines a stacked bar series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

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.

Run Demo: Polar and Radar - Wind Rose

Declare a Stacked Bar Series

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

Razor

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

WindRosePoint.cs

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

ChartWindRoseDataProvider.cs

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

Provides settings for series labels.

DxChartSeriesLegendItem

Defines an item that indicates a series in the legend.

DxChartSeriesPoint

Provides settings for points of the chart’s line 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>

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.

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

Description	Component Level	Series Level
Hover Over Series and Its Elements	Not Applicable	HoverMode
Point Selection	PointSelectionMode	SelectionMode

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IPolarChartSeries

IChartSeriesBase

Inheritance

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>