Microsoft Chart Control How-to: Add Rich Content Using Keywords

image

Adding Labels or Tooltips is a simple task in the chart, but what if we want to show more data than just a simple data point value? Keywords allows specifying rich content for many text based properties, so that you can build a tooltip as shown in this Bubble chart image.

A Keyword is a specially formatted character sequence which can be used in many chart string properties to provide rich content. During the rendering of the chart, each Keyword is replaced with a value from the chart series or data point. For example, Keywords may be used to display several series values in the chart data point labels or tooltips. The sample below will display series data point Y value using the currency format string in the tooltip.

chart.Series[0].Tooltip = “Data Point Y Value: #VALY{C0}”

As you may notice, to specify a tooltip on all chart data points we only need to set a single property of the series. You can use multiple keywords in one string and also specify optional formatting string.

Use cases

1) I want series data points to display a label with category name and price. Label example: "Bike -> $2.00"

series.Label = "#AXISLABEL -> #VALY{C}";

2) I'm using a Bubble chart with 2 Y values presenting model price and popularity index and I want to show this to values in my data points tooltip. Here is tooltip example:

"Model:               XR300
Popularity Index: 4.5"

series.ToolTip = "Model: \t#AXISLABEL\nPopularity Index: \t#VALY";

3) I want to enable a postback and get an index of the data point the customer clicked on, so I can perform a drill-down action.

series.PostBack = "#INDEX";

4) I want to add additional columns in the legend to show average, minimum and total of my series as shown in the chart below:

 image

// Add header separator of type line      
Chart1.Legends["Default"].HeaderSeparator = LegendSeparatorStyle.Line;     
Chart1.Legends["Default"].HeaderSeparatorColor = Color.Gray;     
   
// Add Color column      
LegendCellColumn firstColumn = new LegendCellColumn();     
firstColumn.ColumnType = LegendCellColumnType.SeriesSymbol;     
firstColumn.HeaderText = "Color";     
firstColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(firstColumn);     
   
// Add Legend Text column      
LegendCellColumn secondColumn = new LegendCellColumn();     
secondColumn.ColumnType = LegendCellColumnType.Text;     
secondColumn.HeaderText = "Name";     
secondColumn.Text = "#LEGENDTEXT";     
secondColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(secondColumn);     
   
// Add AVG cell column      
LegendCellColumn avgColumn = new LegendCellColumn();     
avgColumn.Text = "#AVG{N2}";     
avgColumn.HeaderText = "Avg";     
avgColumn.Name = "AvgColumn";     
avgColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(avgColumn);     
   
// Add Total cell column      
LegendCellColumn totalColumn = new LegendCellColumn();     
totalColumn.Text = "#TOTAL{N1}";     
totalColumn.HeaderText = "Total";     
totalColumn.Name = "TotalColumn";     
totalColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(totalColumn);     
   
// Set Min cell column attributes      
LegendCellColumn minColumn = new LegendCellColumn();     
minColumn.Text = "#MIN{N1}";     
minColumn.HeaderText = "Min";     
minColumn.Name = "MinColumn";     
minColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(minColumn);   
 

Supported Keyword List

Here is the list of supported keywords. Chart control support multiple Y values and all related keywords use the first one by default but also can be used with additional Y values. For example:

“High=#VALY/nLow=#VALY2/nOpen=#VALY3/nClose=#VALY4”

An optional format string can be added at the end of each keyword.  You can find more about possible format strings from here: https://msdn.microsoft.com/en-us/library/427bttx3.aspx Below is an example of using standard currency format and custom format string:

“Price= #VALY2{C0}/nAverage Price = #AVGY2{C0}/nVolume = #VALY3{#,,.;(#,,.);0}”

Keyword Replaced By Supports Multiple Y Values  Supports Formatting String
#VALX X value of the data point. No Yes
#VALY Y value of the data point Yes Yes
#SERIESNAME Series name No No
#LABEL Data point label No No
#AXISLABEL Data point axis label No No
#INDEX Data point index in the series No Yes
#PERCENT Percent of the data point Y value Yes Yes
#LEGENDTEXT Series or data point legend text No No
#CUSTOMPROPERTY(XXX) Series or data point XXX custom property value, where XXX is the name of the custom property. No No
#TOTAL Total of all Y values in the series Yes Yes
#AVG Average of all Y values in the series Yes Yes
#MIN Minimum of all Y values in the series Yes Yes
#MAX Maximum of all Y values in the series Yes Yes
#FIRST Y value of the first point in the series Yes Yes
#LAST Y value of the last point in the series Yes Yes

Objects and Properties where keywords can be used

Series and DataPoint

  • Label
  • AxisLabel
  • ToolTip
  • Url
  • MapAreaAttributes
  • PostBackValue
  • LegendToolTip
  • LegendMapAreaAttributes
  • LegendPostBackValue
  • LegendUrl
  • LegendText
  • LabelToolTip

Annotation (only if anchored to the data point using SetAnchor method)

  • ToolTip
  • Url
  • MapAreaAttributes
  • PostBackValue
  • Text (TextAnnotation)

LegendCellColumn (only for legend items automatically created for series or data points):

  • Text
  • Tooltip
  • Url
  • MapAreaAttributes
  • PostBackValue