Software FX Community

I have a chart and I want to have the item highlighting such that not only the point bars, but also the axis labels, change appearance when the point is highlighted.

 The way I've done it is as follows:

-----------------------------------------------------

Private Sub chtTest_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles chtTest.DataBound

End Sub

Private Sub chtTest_Highlighting(ByVal sender As Object, ByVal args As ChartFX.WPF.HighlightingEventArgs) Handles chtTest.Highlighting
  Dim point As Integer = CType(args.Object, ChartFX.WPF.SeriesPoint).Point

  If args.Highlighting Then
   chtTest.AxisX.Sections(point).Foreground = Windows.Media.Brushes.Red
   chtTest.AxisX.Sections(point).FontWeight = FontWeights.Bold
   If (lastPoint >= 0) And (point <> lastPoint) Then
    chtTest.AxisX.Sections(lastPoint).Foreground = Windows.Media.Brushes.Black
    chtTest.AxisX.Sections(point).FontWeight = FontWeights.Normal
   End If
   lastPoint = point
  Else
   chtTest.AxisX.Sections(point).Foreground = Windows.Media.Brushes.Black
   chtTest.AxisX.Sections(point).FontWeight = FontWeights.Normal
  End If
 End Sub

-----------------------------------------------------

This works for the most part, but it's kind of clumsy and setting the font to bold doesn't always work (I need to move the mouse a bit before it refreshes, even if I call chtTest.Refresh()). Is there a better way to do this? Ideally I'd like to do it using a template for AxisX, but I can't find a way to do this since the "Highlighted" property of the current point isn't accessible from the AxisX template.

Also, there seems to be no way to make the text underlined since the TextDecoration property isn't exposed. Since the labels seem to be done with TextBlocks, is there a way to do this?

Thanks in advance.

As you suspected the right way to accomplish this is using a template for the AxisX labels. We have fixed a minor issue in our internal build so that you can create triggers for both Highlighted and Dimmed. e.g.

<DataTemplate x:Key="RichContentLegend">
  <StackPanel Orientation="Horizontal" x:Name="stack">
    <Image x:Name="BarImg" Source="{Binding Path=DataItem.Image}" Width="20" Height="40" />
    <TextBlock x:Name="BarText" Text="{Binding Path=DataItem.Product}" VerticalAlignment="Center"/>
  </StackPanel>
  <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=Dimmed}">
      <DataTrigger.Value>
        <sys:Boolean>True</sys:Boolean>
      </DataTrigger.Value>
      <Setter Property="Opacity" Value="0.25" TargetName="stack" />
    </DataTrigger>
  </DataTemplate.Triggers>
</DataTemplate>

About TextDecoration: Internally we use "low-level" rendering for our axes unless you change the template, once you are templating you can use TextDecorations, e.g.

<DataTrigger Binding="{Binding Path=Highlighted}">
  <DataTrigger.Value>
    <sys:Boolean>True</sys:Boolean>
  </DataTrigger.Value>
  <Setter Property="TextDecorations" Value="Underline" TargetName="BarText" />
</DataTrigger>

This should be available in our next hotfix.

Regards,

JuanC

A hotfix is now available that includes support for this functionality.

You can download a hotfix here.

Regards,

JuanC

This still doesn't seem to work in version 8.0.3439.25180. Here's an example that doesn't seem to work properly:

-------------------------------------------------------------------------------------------

<DataTemplate x:Key="AxisXTemplate">
 <StackPanel HorizontalAlignment="Center" Orientation="Vertical">
  <TextBlock x:Name="textContent" DockPanel.Dock="Right" Foreground="#FF0000FF" Text="{Binding Path=DataItem.PerformanceGroup}" VerticalAlignment="Center" />
 </StackPanel>

 <DataTemplate.Triggers>
  <DataTrigger Binding="{Binding Path=Highlighted}" Value="True">
   <Setter Property="TextDecorations" Value="Underline" TargetName="textContent" />
  </DataTrigger>
 </DataTemplate.Triggers>

</DataTemplate>

<cfx:Chart x:Name="chtTest" ItemsSource="{Binding Path=TestData, ElementName=Window1Name}">

  <cfx:SeriesAttributes BindingPath="Count" />
  <cfx:SeriesAttributes BindingPath="Target" />

  <cfx:Chart.AxisX>
    <cfx:Axis FontSize="11" FontFamily="Arial" Foreground="#FF0000" PixelsPerUnit="26" Template="{DynamicResource AxisXTemplate}" />
   </cfx:Chart.AxisX>

 </cfx:Chart>

... Public ReadOnly Property TestData() As System.Collections.ObjectModel.ObservableCollection(Of TestDataRow) ...

-------------------------------------------------------------------------------------------

This has a few problems:

1. It works OK when there is only one series, but with more than one series the highlighting doesn't work at all (mousing over one axis label will dim ALL bars and not highlight any).

2. The scrolling doesn't work properly - when you scroll, the label at the top doesn't go off the screen, it stays at the top and overlaps with the other labels as they scroll up.

3. The highlighting doesn't work at all until you move the scrollbar.

Any ideas on this? Thanks in advance.

We have been able to duplicate 1 and 2 and are already working on fixes for this but we have not been able to duplicate problem #3. Can you try to generate this issue in a dummy app?

There are also additional unresolved issues related to templated axis labels, particularly if you change axis properties after the axis has been rendered, we are also working on these.

Regards,

JuanC

While creating a test app to reproduce #3 (labels only work after you move the scrollbar) I found that it only happens if you manually set PixelsPerUnit on the axis. If this isn't set the problem in #3 doesn't occur, but the labels move all over the place (sometimes to the middle of the chart, over top of the bars) when you move the scrollbar.

I suspect this might be related to the other problems. I can still send you the test app if you'd like, just let me know where to send it.

Thanks again.

I just tested with build 3442 - the first 2 bugs are fixed, but the third (label styling on highlight doesn't work until you move the scrollbar) is still a problem. I have a test app that reproduces this - I can send it to you if you'd like, just let me know where. Thanks.

Send a repro app to wpf at softwarefx dot com and reference this thread

Regards,

JuanC

I'm using build 3499. There seems to still be an issue with axis data templates where it sometimes doesn't hide the label when the label's point is outside the scroll viewer's visible area. This seems to happen most when scrolling slowly so I suspect it's showing labels if the point is even partially in the visible area (even though the scroll behaviour is to either completely show a point or not show it at all). I'm using the following template:

Any ideas?

Thanks.

We have been unable to duplicate this issue.

We did find an issue where labels may not be properly hidden when resizing the scroll bar thumb i.e. changing the range of visible elements.

The problem might be related to a combination of size and the number of visible elements, if you can post/send an application that exhibits this behavior we would appreciate it.

JuanC

Attached is a test app which reproduces the issue.

Note that there now seems to be 2 separate issues - the first time you load the data (by clicking the button at the bottom) there is the issue with the labels not being hidden (you may have to scroll slowly to reproduce this). If you reload the data again, another issue happens where the labels will be too far to the right and will overlap the scrollbar.

Please let me know if you need any more info - thanks again.

Some of these issues have been fixed in recent builds, however there is an issue where if you resize the chart horizontally the labels disappear and there is a lot of flicker in the labels when resizing vertically. This happens in build 3532. I've attached an app that reproduces this.

Thanks.