Categorical Axis Grouping

Categorical axis grouping is applicable in scenarios where the data displayed on the axis is categorical in nature. Categorical data can either be flat or hierarchical. In case you are using flat data, use the GroupNames property to apply axis grouping. And, in case you are using hierarchical data, use the GroupNames and GroupItemsPath property to apply axis grouping.

Moreover, FlexChart allows you to set the group separator using the GroupSeparator property. Also, it allows you to expand or collapse group levels by setting the GroupVisibilityLevel property.

The following image shows how FlexChart appears after setting the categorical axis grouping using flat data.

Add the following code in Index.xaml.

XAML

	Copy Code
<Chart:C1FlexChart x:Name="flexChart" ChartType="Column" BindingX="Country" ItemsSource="{Binding Data}" ToolTipContent="{}{x}{seriesName} {y:n0}" Header="World GDP Ranking" Grid.Row="1" > <Chart:C1FlexChart.HeaderStyle> <Chart:ChartStyle FontSize="20" FontFamily="GenericSansSerif"/> </Chart:C1FlexChart.HeaderStyle> <Chart:Series SeriesName="GDP, current prices" Binding="CurrentPrices"/> <Chart:Series SeriesName="GDP based on PPP valuation" Binding="PPPValuation"/> <Chart:C1FlexChart.AxisX> <Chart:Axis GroupSeparator="Vertical" GroupVisibilityLevel="-2" GroupNames="Continent" /> </Chart:C1FlexChart.AxisX> <Chart:C1FlexChart.AxisY> <Chart:Axis Title="GDP (billion USD)" MajorGrid="True"/> </Chart:C1FlexChart.AxisY> </Chart:C1FlexChart>

Copy Code

<Chart:C1FlexChart x:Name="flexChart" ChartType="Column" BindingX="Country" 
     ItemsSource="{Binding Data}" ToolTipContent="{}{x}{seriesName}
{y:n0}" Header="World GDP Ranking" Grid.Row="1" >
            <Chart:C1FlexChart.HeaderStyle>
                <Chart:ChartStyle FontSize="20" FontFamily="GenericSansSerif"/>
            </Chart:C1FlexChart.HeaderStyle>
            <Chart:Series SeriesName="GDP, current prices" Binding="CurrentPrices"/>
            <Chart:Series SeriesName="GDP based on PPP valuation" Binding="PPPValuation"/>
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis GroupSeparator="Vertical" GroupVisibilityLevel="-2" GroupNames="Continent" />
            </Chart:C1FlexChart.AxisX>
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis Title="GDP (billion USD)" MajorGrid="True"/>
            </Chart:C1FlexChart.AxisY>
        </Chart:C1FlexChart>