Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
95
Group axis in a single chart
posted

I am having some trouble here configure the look of a chart.

I need to make this

 

 

but this is what I have

I've been reading over documentation, but I it is evading me on this configuration and I know it is just something simple I'm missing.

  • 30692
    Verified Answer
    Offline posted

    Here is one way how you would approach the top screenshot:
    The xaml:

    <UserControl.Resources>
            <local:BaseData x:Key="base" />
            <local:TwoXScenarioData x:Key="twoX" />
            <local:BEScenarioData x:Key="be" />
        </UserControl.Resources>
    
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <igChart:XamDataChart x:Name="theChart" Legend="{Binding ElementName=legend}">
                <igChart:XamDataChart.Axes>
                    <igChart:NumericYAxis x:Name="yAxis" />
                    <igChart:CategoryXAxis 
                        x:Name="xAxis"
                        ItemsSource="{StaticResource base}"
                        Label="{}{Label}"/>
                </igChart:XamDataChart.Axes>
                <igChart:XamDataChart.Series>
                    <igChart:ColumnSeries
                        x:Name="base"
                        ItemsSource="{StaticResource base}"
                        XAxis="{Binding ElementName=xAxis}"
                        YAxis="{Binding ElementName=yAxis}"
                        ValueMemberPath="Value"
                        Title="Base"/>
                    <igChart:ColumnSeries
                        x:Name="twoX"
                        ItemsSource="{StaticResource twoX}"
                        XAxis="{Binding ElementName=xAxis}"
                        YAxis="{Binding ElementName=yAxis}"
                        ValueMemberPath="Value"
                        Title="2x Scenario"/>
                    <igChart:ColumnSeries
                        x:Name="be"
                        ItemsSource="{StaticResource be}"
                        XAxis="{Binding ElementName=xAxis}"
                        YAxis="{Binding ElementName=yAxis}"
                        ValueMemberPath="Value"
                        Title="B/E Scenario"/>
                </igChart:XamDataChart.Series>
            </igChart:XamDataChart>
            
            <igChart:Legend x:Name="legend" Grid.Column="1" VerticalAlignment="Top" />
        </Grid>
    

    And the code behind:

     public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
        }
    
        public class BaseData
            : ObservableCollection<DataItem>
        {
            public BaseData()
            {
                Add(new DataItem()
                {
                    Label = "Volume",
                    Value = 1.7
                });
                Add(new DataItem()
                {
                    Label = "Sales",
                    Value = 5
                });
                Add(new DataItem()
                {
                    Label = "Profit",
                    Value = .3
                });
            }
        }
    
        public class TwoXScenarioData
            : ObservableCollection<DataItem>
        {
            public TwoXScenarioData()
            {
                Add(new DataItem()
                {
                    Label = "Volume",
                    Value = 3
                });
                Add(new DataItem()
                {
                    Label = "Sales",
                    Value = 10
                });
                Add(new DataItem()
                {
                    Label = "Profit",
                    Value = 1.2
                });
            }
        }
    
        public class BEScenarioData
            : ObservableCollection<DataItem>
        {
            public BEScenarioData()
            {
                Add(new DataItem()
                {
                    Label = "Volume",
                    Value = 3.2
                });
                Add(new DataItem()
                {
                    Label = "Sales",
                    Value = 10.2
                });
                Add(new DataItem()
                {
                    Label = "Profit",
                    Value = 1.4
                });
            }
        }
    
        public class DataItem
        {
            public string Label { get; set; }
            public double Value { get; set; }
        }	
    

    Hope this helps!
    -Graham