How to draw custom legends in Infragistics Charts

In this post I will discuss how to draw custom legends in Infragistics charts. The default implementation of legends is confined to using name of the columns that contain data values. But some time you may have chart data created as a view that is customized to draw the charts the way you want it to but the underlying description of the data may need some additonal description on legends to indicate to the user what actually they are looking at. Or there could be case that you want legends that are more descriptive etc. Here is an example of drawing custom legends at the bottom of the chart.

custom legends in charts
void InsertCustomLegends(FillSceneGraphEventArgs e)
  var skinPEs = StockPriceChart.ColorModel.Skin.GetElements();
  double legendPadding = 10;
  double legendMarkerSize = 20;
  double legendTextPadding = 5;
  double paddingFromBottomOfChart = 20;
  Font legendFont = StockPriceChart.Axis.X.Labels.Font.Clone() as Font;
  // Calculate total width needed for bounding rectangle for all legends.
  double width = 0;
  SizeF legendTextSize;
  double height = 0;
  using (Bitmap b = new Bitmap(1,1))
     using (Graphics g = Graphics.FromImage(b))
        foreach (var legendText in _legends)
           legendTextSize = g.MeasureString(legendText, legendFont);
           width += legendTextSize.Width;
           height = Math.Max(height, legendTextSize.Height);
        width += _legends.Count * (legendMarkerSize + legendTextPadding + legendPadding);
        height = Math.Max(height, legendMarkerSize);
        // Insert padding at start,  end and top, bottom
        height += legendMarkerSize;
  //  Calculate position of legend bounding rectange.
  double boundingLeft = e.ChartCore.GridLayerBounds.X + 
        (e.ChartCore.GridLayerBounds.Width - width) / 2.0;
  double boundingTop = StockPriceChart.Height.Value - paddingFromBottomOfChart - height;
  double boundingMid = boundingTop + height/2.0;

  Box legendBox = new Box(new Point((int)boundingLeft, (int)boundingTop),
  legendBox.PE.StrokeWidth = 0;
  double x = boundingLeft + legendPadding / 2.0;
  using (Bitmap b = new Bitmap(1, 1))
     using (Graphics g = Graphics.FromImage(b))
        for (int i = 0; i < _legends.Count; i++)
          // First insert marker box.
          Box markerBox = new Box(
                new Point((int)x, (int)Math.Ceiling(boundingMid - legendMarkerSize / 2.0)), 
                (int)legendMarkerSize, (int)legendMarkerSize);
          markerBox.PE = StockPriceChart.ColorModel.Skin.GetElements()[i];
          x += legendMarkerSize;

          // Now insert text.
          x += legendTextPadding;
          SizeF textSize = g.MeasureString(_legends[i], legendFont);
          Text legendText = new Text(new Point((int)x, 
                 (int)Math.Ceiling(boundingMid)), _legends[i]);

          x += textSize.Width;
          x += legendPadding;

Some of the key points in this sample code that you may need to pay attention to:

  • I have used the same font as was set for X-axis labels to calculate string size. Depending on your chart set up, you may have to create new Font object with same attributes that you want to use to draw the legend text.
  • Since I am using Paint Elements from my pre-configured skin, so I was able to assign the same to the legend marker boxes. Again, you will pcik colors to match whatever you are using for your charts.

You can use the same concept to draw cusotm legends at top or right. Feel free to send me question if you need help with any customization of Infragistics charts.

comments powered by Disqus




28.5 °C / 83.2 °F

weather conditions Clouds

Monthly Posts

Blog Tags