How to add dynamic labels to chart

Our users want to be able to click on a point on our heatmaps to set a label with text. I understand how to do this with ForegroundElements in the XAML using a StripeLine, as in below, but how do I do the following:

• Show a point rather than a line, with a label?

• Dynamically bind the points (or whatever replaces the StripeLine) rather than having to put it in the XAML?

  <ms:Chart.ForegroundElements>
  <ms:StripeLine StartValue="{Binding SomeValue}"
          Orientation="Vertical" 
          Content="1st stripeline">
  </ms:StripeLine>
  
  
  <ms:StripeLine StartValue="{Binding SomeOtherValue}"
          Orientation="Horizontal" 
              Content="2nd stripeline">
  </ms:StripeLine>
  

Thanks!!!

Hi lmunnis,

We don't provide a built in control for what you need here, but you will be able to implement your own control that you can use as a foreground element. Rather than having a bunch of individual instances - like the StripeLine, you may want to create a control that can be bound to a list of points, and manage them all in one control.

I find that having your custom foreground element extend Canvas makes it easy to position the visuals. Generally, a foreground element will need to:

• Walk the visual tree to find the Chart control that contains it.
• Get the X and Y axis
• Attach an event handler to the AxisRendered property of each axis which will detect zoom, panning and anything that causes the viewport to change in some way.
• To position the visuals, use the ConvertLogicalToPhysical method on the X and Y axis to calculate the X and Y pixel positions of each visual relative to the bottom left corner of the viewport. The logical values should come from the model points that you bind to your control.

That should get you started, let me know if you have further questions about this.

-Jason Fauchelle

Hi Jason,

I understand in theory what you say, and I have several examples in our codebase (based on TrackingElement) that extend Canvas, but I didn't code them so I must be missing something. I don't see how to make my custom foreground element show a label and a point. Do you have any examples of what you mean?

Thanks, Leah

Hi Leah,

I recommend starting a new custom foreground element from scratch, and also start small - position a label and point in a hard coded pixel position. Then create a model to represent a label and point which will include their logical positions. With this, you can try out converting a logical position to a physical position. The TrackingElement will have examples of doing this.

TrackingElement displays points by creating an Ellipse and adding it to the canvas (itself). A label could be a simple TextBlock, or it could be a ContentControl that allows for flexible content and templating. Positioning elements is done by setting the Canvas.SetLeft and SetTop attached properties - as seen in TrackingElement.

Hope that helps point you in the right direction.

-Jason Fauchelle

Thanks Jason, I'll give it a whirl. (And glad to see others using the Heatmap!!)

-Leah