How To: Select Multiple PlotElements using Mouse in WPF Chart

Chart control being frequently used for data analysis always left a void for customization in Winforms version. However, with WPF, this void has been filled. In this blog, I am putting up a demo which can assist in selection of Chart DataPoints using mouse click. With this implementation, you can use Shift key to select a range of Bars from C1Chart for WPF. Core concept to highlight a Bar is to change the backcolor and double the current width of the bar. When the bar has to be deselected, width and backcolor are set to their original settings. Lets start with a step by step implementation.

Attach Mouse Left Button Event to the Bars

To attach Mouse actions on the individual bars, we need to access them and this has to be done using PlotElementLoaded Event.

void ds_PlotElementLoaded(object sender, EventArgs e)  
{  
   PlotElement ps = sender as PlotElement;  
   defaultColor = ps.Fill as SolidColorBrush;  

   ps.MouseLeftButtonUp += (s, me) = >  
   {  
      Actions.................  
   };  
}  

Define Variables to Hold Information

PlotElement startPlotElement; //Reference to first PlotElement in the selected Range  
PlotElement endPlotElement; //Reference to Last PlotElement in the selected Range  
List selectionList = new List(); //List to hold the range of bars selected  
SolidColorBrush defaultColor; // Default Color Series used during resetting the Bar properties  

Selection of Bars for Highlighting

public void ChartSelectionList()  
{  
   if (startPlotElement != null && endPlotElement != null)  
   {  
       int startIndex, endIndex;  
       if (startPlotElement.DataPoint.PointIndex < endPlotElement.DataPoint.PointIndex)  
       {  
          startIndex = startPlotElement.DataPoint.PointIndex;  
          endIndex = endPlotElement.DataPoint.PointIndex;  
       }  
       else  
       {  
          startIndex = endPlotElement.DataPoint.PointIndex;  
          endIndex = startPlotElement.DataPoint.PointIndex;  
       }  

    var plotElementList = from ps in (c1Chart1.Data.Children[0] as XYDataSeries).Children.OfType() select ps;  

     selectionList = (from ps in plotElementList  
                      where (ps as PlotElement).DataPoint.PointIndex >= startIndex &&  
                     (ps as PlotElement).DataPoint.PointIndex <= endIndex  
                      select ps).ToList();  
    }  
}  

Highlight Selected Bars

public void ChartPointHighlight()  
{  
   foreach (PlotElement ps in selectionList)  
   {  
     ps.Fill = new SolidColorBrush(Colors.LightGreen);  
     ps.LayoutTransform = new ScaleTransform() { ScaleX = 2 };  
   }  
}  

Clear Selection of Highlighted Bars

public void ClearSelectionList()  
{  
   foreach (PlotElement ps in selectionList)  
   {  
     ps.Fill = defaultColor;  
     ps.LayoutTransform = new ScaleTransform() { ScaleX = 1 };  
     ps.UpdateLayout();  
   }  

   if (startPlotElement != null)  
     if (startPlotElement.Tag != null)  
     {  
       startPlotElement.Fill = defaultColor;  
       startPlotElement.LayoutTransform = new ScaleTransform() { ScaleX = 1 };  
     }  

   startPlotElement = null;  
   endPlotElement = null;  
   selectionList.Clear();  
}  

Defining Mouse Click Selection

ps.MouseLeftButtonUp += (s, me) = >  
{  
  if (Keyboard.Modifiers == ModifierKeys.Shift)  
  {  
    if (startPlotElement == null)  
      startPlotElement = ps;  
    else  
    {  
       endPlotElement = ps;  
       ChartSelectionList();  
    }  
  }  
  else  
  {  
     ClearSelectionList();  
     startPlotElement = ps;  
     selectionList.Add(startPlotElement);  
  }  

  ChartPointHighlight();  
};  

Click on the image to see a running demo : Download the attached samples for complete implementation. Download Sample C# Download Sample VB