Back to Devexpress

DxPolarChartAreaSeries<T, TArgument, TValue> Class

blazor-devexpress-dot-blazor-dot-dxpolarchartareaseries-3.md

latest7.1 KB
Original Source

DxPolarChartAreaSeries<T, TArgument, TValue> Class

Defines an area series.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public class DxPolarChartAreaSeries<T, TArgument, TValue> :
    DxPolarChartBaseSeries<T, TArgument, TValue>

Type Parameters

NameDescription
T

The data type.

| | TArgument |

The series argument type.

| | TValue |

The series value type.

|

Remarks

An area series displays data as a polyline that connects series values. The internal area is filled with a color.

Run Demo: Polar and Radar - Discrete Data

Declare an Area Series

  1. Use the Polar Chart’s Data property to specify a data source.
  2. Add a <DxPolarChartAreaSeries> 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. Configure the series: customize appearance, add labels, choose selection and hover modes, and so on.
razor
<DxPolarChart Data=@DataSource>
    <DxPolarChartAreaSeries ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Day)">
    </DxPolarChartAreaSeries>
    <DxChartLegend Visible="false" />
</DxPolarChart>
csharp
namespace BlazorDemo.Data {
    public class DiscretePoint {
        public string Arg { get; set; }
        public int Day { get; set; }
        public int Night { get; set; }

        public DiscretePoint(string arg, int day, int night) {
            Arg = arg;
            Day = day;
            Night = night;
        }
    }
}
csharp
using System.Collections.Generic;
using BlazorDemo.Data;

// ...
    public class ChartDiscreteDataProvider : IChartDiscreteDataProvider {
        public List<DiscretePoint> GenerateData() {
            return new List<DiscretePoint>() {
                new DiscretePoint("January", 6, 2),
                new DiscretePoint("February", 7, 2),
                new DiscretePoint("March", 10, 3),
                new DiscretePoint("April", 14, 5),
                new DiscretePoint("May", 18, 8),
                new DiscretePoint("June", 21, 11),
                new DiscretePoint("July", 22, 13),
                new DiscretePoint("August", 22, 13),
                new DiscretePoint("September", 19, 11),
                new DiscretePoint("October", 15, 8),
                new DiscretePoint("November", 10, 5),
                new DiscretePoint("December", 7, 3),
            };
        }
    }

Nested Component Structure

You can add the following child components to an area series:

The following code snippet declares these objects in the markup:

razor
<DxPolarChart Data=@DataSource>
    <DxPolarChartAreaSeries ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Day)">
        <DxChartSeriesLegendItem Text="Daily Temperature" />
        <DxChartSeriesLabel Visible="true" FormatPattern="{value:##.#}" />
    </DxPolarChartAreaSeries>
    <DxChartLegend Visible="true" Position="RelativePosition.Outside" />
</DxPolarChart>

Customize Appearance

The Polar Chart allows you to customize an area series. The following options are available:

BreakOnEmptyPointsSpecifies whether the series should break on points with null values.ClosedSpecifies whether to connect first and last series points.ColorSpecifies the color of the series.OpacitySpecifies area series opacity.

razor
@using System.Drawing

<DxPolarChart Data=@DataSource>
    <DxPolarChartAreaSeries ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Day)"
                            Color="Color.Beige"
                            Opacity="0.3">
    </DxPolarChartAreaSeries>
</DxPolarChart>

User Interaction Options

Users can select and hover over the series and its elements. The table below describes available interation options.

DescriptionComponent LevelSeies Level
Hover Over Series and Its ElementsNot ApplicableHoverMode
Series SelectionSeriesSelectionModeSelectionMode
Point SelectionPointSelectionModeNot Applicable

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> DxPolarChartAreaSeries<T, TArgument, TValue>

See Also

DxPolarChartAreaSeries<T, TArgument, TValue> Members

DevExpress.Blazor Namespace