Question

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

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

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.

Answer 1

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

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 });
    }
}