xaml c# chart with custom axis label

Question

I use System.Windows.Controls.DataVisualization.Charting to draw and show a chart with a LineSeries whose Y values are in a range between 1 to 5. I add values to LineSeries with System.Collections.Generic.KeyValuePair(TKey,TValue). Instead of showing numbers from 1 to 5 in the Y label chart, I want to show letters from E to A.

How can I achieve this results?

Answer 1

First create a Converter to convert the numeric values to alphabet ones:

 public class NumericToAlphaConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        switch (value.ToString())
        {
            case "1":
                return "A";
            case "2":
                return "B";
            case "3":
                return "C";
            case "4":
                return "D";
            case "5":
                return "E";
            default: return null;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

use that converter to define a custom Y label style :

 <Style TargetType="chartingToolkit:AxisLabel">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="chartingToolkit:AxisLabel">
                                    <TextBlock DataContext="{TemplateBinding FormattedContent}" Text="{Binding Converter={StaticResource NumericToAlphaConverter}}" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

here the hole UI and the corresponding code behind

<Window.Resources>
    <wpfApplication12:NumericToAlphaConverter x:Key="NumericToAlphaConverter"/>
</Window.Resources>
<Grid>
    <chartingToolkit:Chart   Title="Line Series"  
    VerticalAlignment="Top" Margin="0" Height="254" >
        <chartingToolkit:LineSeries  x:Name="serie"
                                   IndependentValueBinding="{Binding Path=Key}"
                                   DependentValueBinding="{Binding Path=Value}"      
    IsSelectionEnabled="True"/>
        <chartingToolkit:Chart.Axes>
            <chartingToolkit:LinearAxis Orientation="Y" 
                                    Title="Y val" 
                                        Maximum="5"
                                        Minimum="1"
                                        >
                <chartingToolkit:LinearAxis.AxisLabelStyle>
                    <Style TargetType="chartingToolkit:AxisLabel">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="chartingToolkit:AxisLabel">
                                    <TextBlock DataContext="{TemplateBinding FormattedContent}" Text="{Binding Converter={StaticResource NumericToAlphaConverter}}" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </chartingToolkit:LinearAxis.AxisLabelStyle>
            </chartingToolkit:LinearAxis>
        </chartingToolkit:Chart.Axes>

    </chartingToolkit:Chart>
</Grid>

the code behind :

public ObservableCollection<KeyValuePair<int, int>> LineSeriesData = new ObservableCollection<KeyValuePair<int, int>>()
    {
        new KeyValuePair<int, int>(12,1),
        new KeyValuePair<int, int>(5,2),
        new KeyValuePair<int, int>(5,3),
        new KeyValuePair<int, int>(5,4)

    };
    public MainWindow()
    {
        InitializeComponent();
        serie.ItemsSource = LineSeriesData;
    }