Often, when you are viewing visual data, it is necessary to highlight and select a data-point to obtain context specific information for more granular analysis.

In this post, I will illustrate how to highlight and select a specific data-point with ease.

Create a Basic Chart

As always, start with a basic chart:

<ca:Chart x:Name="Chart1" XValue="Area" ChartKind="RoundedBlock" Width="600" Height="400">
    <ca:Chart.DataSeries>
        <ca:Series YValue="Total" />
    </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 Area { get; set; }
    public double Total { get; set; }
}

void Chart1_Loaded(object sender, RoutedEventArgs e)
{
    Chart1.DataSource = new ChartData[]
    {
        new ChartData() { Area = "North America", Total = 451 },
        new ChartData() { Area = "South America", Total = 466 },
        new ChartData() { Area = "Europe", Total = 732 },
        new ChartData() { Area = "Asia/Pacific", Total = 4088},
        new ChartData() { Area = "Africa", Total = 973 }
    };
}

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

By default, data-point highlighting (on mouse hover) is turned on.  You can toggle this by setting Chart's HighlightDataPointOnHover property to true or false.

Selecting a Data-Point on Mouse Click

To visually select a data-point, create a private member of type DataPoint in your UserControl and add an EventHandler for Chart's MouseLeftButtonUpOnDataPoint event:

private DataPoint activeDataPoint = null;

void Chart1_MouseLeftButtonUpOnDataPoint(object sender, SelectedDataPointEventArgs e)
{
    // cast the current data-point
    DataPoint dp = e.DataPointContext.DataPoint;
    // check for match
    bool isMatch = (dp == activeDataPoint);

    // clear the previously selected data-point
    if (activeDataPoint != null) 
    {
        activeDataPoint.ClearValue(DataPoint.ColorProperty);
        activeDataPoint = null;
    }

    // if the current data-point doesn't match the previously selected data-point, 
    // highlight it; otherwise, we assume the previous data-point to be un-selected
    if (!isMatch)
    {
        activeDataPoint = dp;
        activeDataPoint.Color = Colors.Green;
    }
}

Now, if you compile and run your application then click on a data-point, you should have a chart that looks like the following:

Clicking on a data-point that is not already highlighted will select and highlight the new data-point.  Clicking on a data-point that is already highlighted with remove the highlight.

Conclusion

Although it is rather trivial to implement data-point selection and highlighting, it is an extremely useful visual cue for providing data-point context.