When using line charts, it is often desirable to further highlight the data-point in context by superimposing a marker on top.

In this post, I will illustrate how to easily display data-point markers while utilizing mouse events.

Basic Chart

Start with your basic line chart (in this example we will use a chart with two series):

<ca:Chart x:Nam e="Chart1" XValue="Month" ChartKind="Line" Width="600" Height="400" HighlightDataPointOnHover="False">
    <ca:Chart.DataSeries>
        <ca:Series YValue="High" />
        <ca:Series YValue="Low" />
    </ca:Chart.DataSeries>
</ca:Chart>

In your code-behind, create a simple data class and set your chart's data-source:

public class ChartData 
{
    public string Month { get; set; }
    public double High { get; set; }
    public double Low { get; set; }
}

void Chart1_Loaded(object sender, RoutedEventArgs e)
{
    Chart1.DataSource = new ChartData[]
    {
        new ChartData() { Month = "Jan", High = 1451, Low = 1237 },
        new ChartData() { Month = "Feb", High = 2356, Low = 1954 },
        new ChartData() { Month = "Mar", High = 5212, Low = 4241 },
        new ChartData() { Month = "Apr", High = 4088, Low = 3956 },
        new ChartData() { Month = "May", High = 6421, Low = 5264 },
        new ChartData() { Month = "Jun", High = 4986, Low = 2999 }
    };
}

If you compile and run your application, you should now have a chart that looks like the following:

Displaying Markers on Data-Point Mouse Events

To display a marker when hovering over a data-point, first define your marker style on your series:

<ca:Series YValue="High" MarkerStyle="CircleSimple" MarkerVisible="False" MarkerSize="16" MarkerFill="Red" MarkerStrokeThickness="0" />
<ca:Series YValue="Low" MarkerStyle="CircleSimple" MarkerVisible="False" MarkerSize="16" MarkerFill="Green" MarkerStrokeThickness="0" />

Notice that we set MarkerVisiblie="False".  This is because we only want to display the markers on mouse hover.

Next, we simply create event handlers for Chart's MouseEnterDataPoint and MouseLeaveDataPoint events:

void Chart1_MouseEnterDataPoint(object sender, SelectedDataPointEventArgs e)
{
    DataPoint dp = e.DataPointContext.DataPoint;
    dp.MarkerVisible = true;
}

void Chart1_MouseLeaveDataPoint(object sender, SelectedDataPointEventArgs e)
{
    DataPoint dp = e.DataPointContext.DataPoint;
    dp.MarkerVisible = false;
}

Now, if you compile and run your application, when you hover over a data-point, you should have a chart that looks like the following:

You can easily define a different brush for each data-point by setting the DataPoint.MarkerFill property.

Displaying Markers on Series Mouse Events

If we want to display markers on a whole series, we can utilize Chart's MouseEnterSeries and MouseLeaveSeries events:

void Chart1_MouseEnterSeries(object sender, SelectedSeriesEventArgs e)
{
    Series series = e.Series as Series;
    foreach (DataPoint dp in series.DataPoints)
        dp.MarkerVisible = true;
}

void Chart1_MouseLeaveSeries(object sender, SelectedSeriesEventArgs e)
{
    Series series = e.Series as Series;
    foreach (DataPoint dp in series.DataPoints)
        dp.MarkerVisible = false;
}

At this point, if you compile and run your application, you should have a chart that looks like the following when hovering over a data-point on a series:

Using Coordinate System Hover Events

A final method for responding to mouse hover events is by handling Chart's MouseHoverOverCoordinateSystem event.  As might be implied by its name, the MouseHoverOverCoordinateSystem event fires every time the mouse position changes over the chart's coordinate system; hovering over the axis annotations has no effect.

To highlight data-points on all series where the mouse position corresponds to a particular x-coordinate, you can create event handlers for both the MouseHoverOverCoordinateSystem and MouseLeave events as such:

// stores current x-coordinate
string xCoord = null;

// helper method
void SetMarkerVisibility(string xCoord, bool isVisible) 
{
    foreach (Series series in Chart1.DataSeries)
    {
        DataPoint dp = series.GetPointAtX(xCoord);
        dp.MarkerVisible = isVisible;
    }
}

void Chart1_MouseHoverOverCoordinateSystem(object sender, CoordinateSystemPointEventArgs e)
{
    string newCoord = (string)e.XCoordinate;

    // call helper to hide markers
    if (xCoord != null && xCoord != newCoord) 
        SetMarkerVisibility(xCoord, false); 
                        
    xCoord = newCoord;
    // call helper to show markers
    SetMarkerVisibility(xCoord, true); 
}

void Chart1_MouseLeave(object sender, MouseEventArgs e)
{
    if (xCoord != null)
    {
        // call helper to hide markers
        SetMarkerVisibility(xCoord, false); 
        xCoord = null;
    }
}

Note: If your x-coordinate data type is not of type string (ie. DateTime, double, int), the CoordinateSystemPointEventArgs.XCoordinate property will return a continuous value that lies between the calculated minimum and maximum values of the x-axis.  In order to take advantage of the Series.GetPointAtX() method, you may need to massage the value of the XCoordinate property.

Finally, if you compile and run your application, your chart should resemble the following when hovering over the coordinate system:

Conclusion

By utilizing the mouse events provided by Chart, especially in conjunction with data-point markers, you can provide added visual stimuli and context as the end-user interacts with the chart data.  Putting in a little extra effort will let you achieve fantastic results.