Search code examples
wpfsilverlightchartswpftoolkitsilverlight-toolkit

Change label rendering in CategoryAxis


I have a chart with ColumnSeries and I am trying to make the labels on X axis display near the ticks like this:

Goal

By default, the ColumnSeries uses CategoryAxis axis which places labels in the middle of interval:

enter image description here

What I want is the X axis to work similar to LinearAxis. However I don't see any way to make ColumnSeries use LinearAxis.

Also, I see no way how to render the labels to be placed near the ticks. I can go and modify the source code of CategoryAxis but it is not easy to me.

Another idea I had was to use a LinearAxis but doesn't seem to work with ColumnSeries.

Any idea is much appreciated.

Thanks!

EDIT: The 2011, 2012 are just examples, they are not dates. What I am trying to do actually is display intervals on X axis. 2011 should actually start in origin. I will update the picture.


Solution

  • A ColumnSeries works correctly with a LinearAxis. Here is an example modified from Delay's DataVisualizationDemos sample:

    enter image description here

    The XAML:

    <chartingToolkit:Chart Title="Stock Performance">
        <!-- Stock price and volume -->
        <chartingToolkit:ColumnSeries
            Title="ABCD"
            ItemsSource="{StaticResource SalesDataCollection}"
            IndependentValueBinding="{Binding EastStoreQuantity}"
            DependentValueBinding="{Binding WestStoreQuantity}"
            />
        <chartingToolkit:Chart.Axes>
            <!-- Axis for custom labels -->
            <chartingToolkit:LinearAxis
                Minimum="0"
                Maximum="10"
                Interval="1"
                Orientation="X">
            </chartingToolkit:LinearAxis>
        </chartingToolkit:Chart.Axes>
    </chartingToolkit:Chart>
    

    The code-behind:

    public class SalesDataCollection : Collection<SalesData>
    {
        public SalesDataCollection()
        {
            Add(new SalesData { Animal = "Dogs", WestStoreQuantity = 5, EastStoreQuantity = 7 });
            Add(new SalesData { Animal = "Cats", WestStoreQuantity = 5, EastStoreQuantity = 6 });
            Add(new SalesData { Animal = "Birds", WestStoreQuantity = 3, EastStoreQuantity = 8 });
            Add(new SalesData { Animal = "Fish", WestStoreQuantity = 6, EastStoreQuantity = 9 });
        }
    }