Skip to content

datachart-series-range-bar.adoc

Latest commit

 

History

History
118 lines (96 loc) · 4.17 KB

datachart-series-range-bar.adoc

File metadata and controls

118 lines (96 loc) · 4.17 KB
Raw

Range Bar Series

Overview

The RangeBarSeries is a xamDataChart series type that displays value ranges as horizontal bars. It is the bar-oriented counterpart to the RangeColumnSeries.

Range Bar Series uses a CategoryYAxis for categories and a NumericXAxis for values, with each bar spanning from a low value to a high value on the X axis.

Class Hierarchy

RangeCategorySeries
├── HorizontalRangeCategorySeries
│   ├── RangeColumnSeries      (categories on X, value ranges on Y)
│   └── RangeAreaSeries        (categories on X, value ranges on Y)
└── VerticalRangeCategorySeries
    └── RangeBarSeries         (categories on Y, value ranges on X)

Requirements

To plot a RangeBarSeries in xamDataChart:

  • Use a NumericXAxis for the value range on the X axis.

  • Use a CategoryYAxis for the category labels on the Y axis.

  • Set the LowMemberPath and HighMemberPath properties to the data fields that define each range.

Example

<ig:XamDataChart x:Name="DataChart">
    <ig:XamDataChart.Axes>
        <ig:NumericXAxis x:Name="xAxis" />
        <ig:CategoryYAxis x:Name="yAxis"
                          ItemsSource="{Binding}"
                          Label="{}{Label}" />
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:RangeBarSeries ItemsSource="{Binding}"
                           LowMemberPath="Low"
                           HighMemberPath="High"
                           XAxis="{Binding ElementName=xAxis}"
                           YAxis="{Binding ElementName=yAxis}"
                           Title="Range" />
    </ig:XamDataChart.Series>
</ig:XamDataChart>

Key Properties

Property Description

HighMemberPath

Specifies the path to the data column that contains the upper value for each bar.

LowMemberPath

Specifies the path to the data column that contains the lower value for each bar.

XAxis

Specifies the numeric X axis used to render the value range.

YAxis

Specifies the category Y axis used to render the item labels.

RadiusX

Sets the horizontal corner radius for the bar shape.

RadiusY

Sets the vertical corner radius for the bar shape.

LowMemberAsLegendLabel

Specifies the label shown before the low value in the data legend.

HighMemberAsLegendLabel

Specifies the label shown before the high value in the data legend.

LowMemberAsLegendUnit

Specifies the unit shown after the low value in the data legend.

HighMemberAsLegendUnit

Specifies the unit shown after the high value in the data legend.

Comparison with Range Column Series

Feature Range Column Series Range Bar Series

Orientation

Vertical columns

Horizontal bars

Category Axis

CategoryXAxis (horizontal)

CategoryYAxis (vertical)

Value Axis

NumericYAxis (vertical)

NumericXAxis (horizontal)

Base Class

HorizontalRangeCategorySeries

VerticalRangeCategorySeries

IsVertical

false

true

IsBar

false

true

Data Format

The Range Bar Series expects data items with high and low numeric values and a category label:

[
    { "Label": "A", "High": 1000, "Low": 800 },
    { "Label": "B", "High": 200, "Low": 100 },
    { "Label": "C", "High": 400, "Low": 200 },
    { "Label": "D", "High": -200, "Low": -400 },
    { "Label": "E", "High": 200, "Low": 100 }
]