Microsoft Chart Control How-to: Add Rich Content Using Keywords
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:
// 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