Customize Series Appearance

• Jul 17, 2020
• 3 minutes to read

Series View

The Chart3D Control ships with the following series views:

• Bars
• Points
• Surface
• Bubbles

Bars

The Bar3DSeriesView displays data as individual bars. The series point value defines the bar height.

The image above shows the result of the following example:

XAML

<dxc:Series3D>
    <dxc:Series3D.View>
        <dxc:Bar3DSeriesView EqualBarSize="True">
            <dxc:Bar3DSeriesView.BarModel>
                <dxc:Bar3DBoxPointModel ShowFacets="False"/>
            </dxc:Bar3DSeriesView.BarModel>
        </dxc:Bar3DSeriesView>
    </dxc:Series3D.View>
    <!--Series data here. -->
</dxc:Series3D>

The code uses the following classes and properties.

Class or Property	Description
Series3DBase.View	The view of a series.
Bar3DSeriesView	The 3D Bar series view.
Bar3DSeriesView.BarModel	The 3D bar model.
Bar3DSeriesView.EqualBarSize	The value that specifies whether the 3D bars are inscribed in a square.

Points

The Point3DSeriesView displays data as stand-alone points.

The image above shows the result of the following example:

XAML

<dxc:Series3D>
    <dxc:Series3D.View>
        <dxc:Point3DSeriesView MarkerSize="25">
            <dxc:Point3DSeriesView.MarkerModel>
                <dxc:Marker3DSpherePointModel SphereDetalizationLevel="Normal"/>
            </dxc:Point3DSeriesView.MarkerModel>
        </dxc:Point3DSeriesView>
    </dxc:Series3D.View>
    <!--Series data here. -->
</dxc:Series3D>

The code uses the following classes and properties.

Class or Property	Description
Series3DBase.View	The view of a series.
Point3DSeriesView	The 3D Point series view.
Marker3DSeriesView.MarkerModel	The point marker model.
Point3DSeriesView.MarkerSize	The point marker size.

Surface

The SurfaceSeriesView plots a surface passed through all data points.

The image above shows the result of the following example:

XAML

<dxc:Series3D>
    <dxc:Series3D.View>
        <dxc:SurfaceSeriesView
            MarkerVisible="True"
            MarkerSize="10">
            <dxc:SurfaceSeriesView.MarkerModel>
                <dxc:Marker3DSpherePointModel SphereDetalizationLevel="Normal"/>
            </dxc:SurfaceSeriesView.MarkerModel>
            <dxc:SurfaceSeriesView.Colorizer>
                <dxc:SolidColorizer3D Brush="Gray"/>
            </dxc:SurfaceSeriesView.Colorizer>
            <dxc:SurfaceSeriesView.FillStyle>
                <dxc:GradientFillStyle
                    LegendTextPattern="{}{V:F1}">
                    <dxc:GradientFillStyle.ColorStops>
                        <dxc:ColorStop Color="#FF6FC85A" Offset="0%"/>
                        <dxc:ColorStop Color="#FFEBE136" Offset="50%"/>
                        <dxc:ColorStop Color="#FFFF6019" Offset="100%"/>
                    </dxc:GradientFillStyle.ColorStops>
                </dxc:GradientFillStyle>
            </dxc:SurfaceSeriesView.FillStyle>
        </dxc:SurfaceSeriesView>
    </dxc:Series3D.View>
    <!--Series data here. -->
</dxc:Series3D>

The code uses the following classes and properties.

Class or Property	Description
Series3DBase.View	The view of a series.
SurfaceSeriesView	The 3D Point series view.
Marker3DSeriesView.MarkerModel	The point marker model.
SurfaceSeriesView.MarkerSize	The point marker size.
SurfaceSeriesView.MarkerVisible	The value that specifies whether the point markers are visible.

Bubbles

The Bubble3DSeriesView displays four-dimensional data. It uses 3D points where the fourth dimension is the marker size.

The image above shows the result of the following example:

XAML

<dxc:Series3D>
    <dxc:Series3D.View>
        <dxc:Bubble3DSeriesView MinSize="0.3"
                                MaxSize="1.5">
            <dxc:Bubble3DSeriesView.MarkerModel>
                <dxc:Marker3DSpherePointModel SphereDetalizationLevel="Normal"/>
            </dxc:Bubble3DSeriesView.MarkerModel>
        </dxc:Bubble3DSeriesView>
    </dxc:Series3D.View>
    <dxc:SeriesPoint3DDataSourceAdapter DataSource="{Binding Irises}"
                                        XArgumentDataMember="SepalWidth"
                                        YArgumentDataMember="SepalHeight"
                                        ValueDataMember="PetalWidth"
                                        dxc:Bubble3DSeriesView.WeightDataMember="PetalHeight"/>
</dxc:Series3D>

The code uses the following classes and properties.

Class or Property	Description
Series3DBase.View	The view of a series.
Bubble3DSeriesView	The 3D Point series view.
Marker3DSeriesView.MarkerModel	The point marker model.
Bubble3DSeriesView.MinSize	The bubble’s minimum size.
Bubble3DSeriesView.MaxSize	The bubble’s maximum size.

The Chart3D data sources support three-dimensional data. Use the following properties to add the fourth dimension (weight).

Property	Data Source	Description
Bubble3DSeriesView.Weight	SeriesPoint3DStorage	The series point weight.
Bubble3DSeriesView.WeightDataMember	Series3DDataSourceAdapter, SeriesPoint3DDataSourceAdapter	The name of the data member that contains weight values (bubble sizes).
Bubble3DSeriesView.Weights	SeriesPoint3DMatrixAdapter	The array of bubble weights.

Labels

Display Series Labels

Set the Series3DBase.LabelsVisibility property to true to show labels.

XAML

<dxc:Series3D LabelsVisibility="True">
    <!-- Other series settings here. -->
</dxc:Series3D>

Specify Label Text Pattern

Use the SeriesLabel.TextPattern property to format label text. The TextPattern contains text and placeholders enclosed in braces. Placeholders define values that should be shown in labels.

Note

If a pattern starts with a placeholder in the XAML markup, insert empty brackets into the beginning of the pattern as follows: “{}{A}: {V}”. For more information, refer to the following topic: {} Escape sequence / markup extension.

The pattern in the markup displays a series point argument and value.

XAML

  <dxc:Series3D LabelsVisibility="True">
      <dxc:Series3D.Label>
          <dxc:SeriesLabel  TextPattern="{}{A}: {V}"/>
      </dxc:Series3D.Label>
  </dxc:Series3D>

All available specifiers are listed in the following help topic: TextPattern.

You can apply format specifiers to pattern values. The example below uses the F2 specifier to show point values with two decimal digits.

XAML

  <dxc:Series3D LabelsVisibility="True">
      <dxc:Series3D.Label>
          <dxc:SeriesLabel  TextPattern="{}{A}: {V:F2}"/>
      </dxc:Series3D.Label>
  </dxc:Series3D>

Result:

For more information about numeric specifiers, refer to the following MSDN topic: Standard numeric format strings.