WPF Toolkit Chart: refresh axis label visibility when binding label visibility to a converter

Question

I have a WPF Toolkit Line Chart where I'd like to control the number of CategoryAxis (x-axis) labels that are shown. If the number of labels exceeds a certain value, I want to show only every nth label to keep things clear.

To achieve this, I've created an IValueConverter and bound it to the Visibility property of the AxisLabelStyle. The relevant XAML looks like this (note I'm also rotating the labels, that part is working fine):

<chartingToolkit:Chart.Resources>
  <app:HideConverter x:Key="HideConverter1" />                            
</chartingToolkit:Chart.Resources>
...
...
<chartingToolkit:CategoryAxis Orientation="X" Title="" ShowGridLines="False">
    <chartingToolkit:CategoryAxis.AxisLabelStyle>
      <Style TargetType="chartingToolkit:AxisLabel">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="chartingToolkit:AxisLabel">
              <Canvas Height="55">
                <Label Content="{TemplateBinding FormattedContent}" 
                       FontSize="12" Foreground="Black"                                                                
                       Visibility="{Binding Converter={StaticResource HideConverter1}}">
                <Label.RenderTransform>
                  <TransformGroup>
                    <RotateTransform Angle="-45" />
                    <TranslateTransform X="-50" Y="0"/>
                  </TransformGroup>
                </Label.RenderTransform>
                <Label.RenderTransformOrigin>
                  <Point>1.0, 1.0</Point>
                </Label.RenderTransformOrigin>
              </Label>
            </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </chartingToolkit:CategoryAxis.AxisLabelStyle>

And here's the C# code for the converter:

public class HideConverter:IValueConverter
{
    private int hitCount = 0;

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        hitCount++;

        if (hitCount % INTERVAL_VALUE == 0.0)
        {
            return Visibility.Visible;
        }
        else
        {
            return Visibility.Hidden;
        }            
    }

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

So if I set INTERVAL_VALUE = 20, I get every 20th label. When the graph is first displayed, it works perfectly.

The problem is that when I update the INTERVAL_VALUE in my code, I cannot get the CategoryAxis to re-draw itself.

I've tried invalidating the entire chart to force it to be re-drawn, but there is no effect. Basically the converter code is only called when the chart is first rendered and never called again, so changing the value of INTERVAL_VALUE has no effect.

Any suggestions appreciated.

Do you really need a CategoryAxis? Why don't you use a LinearAxis? It contains an Interval property that can be bound to your INTERVAL_VALUE, no need for converters. — jsanalytics
Thanks for the comment @jstreet. I'm using a LinearAxis with an Interval on the Y-axis, because that axis shows times in seconds (0 to whatever) and Interval allows me to have labels every 1 second, every 5 seconds, etc. But for the X-axis, I think I really do need a CategoryAxis, because my X-Axis labels are not a linear progression - the Labels are categories like A, B, C...etc. In the case where I have too many X-axis labels, I want to skip some and show for example A, D, G, etc. So I don't think a LinearAxis will do what I want. Please correct me if I'm wrong. — user2048466

bto.rdz bto.rdz · Accepted Answer · 2015-12-16T18:55:25

This kind of issues lead me to create my own charting library for wpf. It is not ready for production yet but is has some months of debugging now.

Keeping things clear is totally automatic in this library you don´t need to write a single line of code to achieve that because that is the default behavior, which can be easily customized to get a custom behavior.

you can't rotate a label (not now), but it is clear and clean enough.

https://github.com/beto-rodriguez/Live-Charts

Hope it helps here is an example

<liveCharts:LineChart Name="Chart">
    <liveCharts:LineChart.Series>
       <liveCharts:LineSeries Name="MariaSeries" Title="Maria" 
                              PrimaryValues="2, 4, 6, 8" />
       <liveCharts:LineSeries Name="JohnSeries" Title="John" 
                              PrimaryValues="5, 6, 7, 9" />
     </liveCharts:LineChart.Series>
</liveCharts:LineChart>

Of course it supports bindings and much more complex sintax, this is only a example, you can find more examples in Docs or cloning the repo.

WPF Toolkit Chart: refresh axis label visibility when binding label visibility to a converter

1 Answers