Markers

Shape Markers

You can specify graphical markers for all or individual data points on a chart. If two or more markers occupy the same point, the markers are drawn in the order of the data series definition.

You can combine shape markers with any other chm parameters using a pipe character (|) to separate the chm parameters.

Syntax

Specify one set of the following parameters for each series that should be marked. To mark multiple series, create additional parameter sets, delimited by a pipe character. You do not need to mark up all series. If you do not assign markers to a data series, it will not get any markers.

chm= <marker_type>,<color>,<series_index>,<size> |...| <marker_type>,<color>,<series_index>,<size>

• <marker_type> The type of marker to use. Specify one of the following types:

  • c - Cross
  • C - Rectangle. If a rectangle marker, you must have at least two data series, where series 0 specifies the bottom edge and series 1 specifies the top edge. specifies the width of the rectangle, in pixels.
  • d - Diamond
  • o - Circle
  • s - Square
  • x - An X

• <color> The color of the markers for this series, in RRGGBB hexadecimal format.

• <series_index> The zero-based index of the data series on which to draw the markers. Ignored for h markers and markers that specify location by x/y position (start with the @ character). You can use hidden data series as a source for markers; see Compound Charts for more information. Grouped vertical bar charts support a special extended syntax to align markers with specific bars.

• <size> The size of the marker, in pixels.

Examples

Here's an example using diamonds for one data series, and circles for the other data series.

chm=o,ff9900,0,-1,15.0|d,ff0000,1,-1,10.0

This second example square diamond markers on data point as well as under the line filling:

chm=s,E4061C,0,-1,15.0|B,FCECF4,0,0,0

Line Markers

You can combine several chart types with line markers to highlight data trends or show variance. When you add line markers onto bar, scatter, or other chart types, the resulting chart is called a compound chart. Some compound charts look like a combination of two chart types—for instance, a bar chart with a tracking line:

chd=s2:1XQbnf4,EWoQMUB,9halxp9 chm=D,0033FF,2,0,5,1

Creating a Compound Chart (Mixed Charts)

All compound charts consist of one or more base chart types (line, scatter, bar, or radar) combined with one or more sets of markers. These markers require data to place them on the chart. Sometimes you can use the same data series as used to draw the bars or points on your chart, but typically you want the markers to have their own independent data sets. If you want your chart to have different data series for the base chart and for markers, you must hide the marker data from the base chart (so that it doesn't try to draw more bars or lines with that data). Here's how to do that:

1. Add your marker data series to the end of your chd parameter. For example, if your bar chart had data chd=t:30,10,20, you could add new data for a line marker like this: chd=t:30,10,20|60,40,50.
2. Hide your extra marker data from the base chart. If you simply add an extra data series to a bar chart for your tracking line, the chart would show that as a new series of bars. To prevent this, you must hide this extra series. To hide a series, include a single digit after the chd format descriptor: for example, chd=t1:30,10,20|60,40,50. This 1 digit from t1 tells the Chart API how many data series to use to draw elements for that base chart type as defined by the cht parameter (bars for bar charts, data points for line charts, and so on). Any additional data series will be ignored by that chart type when drawing the chart. Note that this is a 1-based number, not 0-based. So t1 means "use only the first data series for bars," t2 means "use only the first two series for bars," etc.
3. Use the hidden data series to draw line markers, or other markers. How to draw markers is covered in the section below. Reference the hidden data series as the source for your markers. You can include as many additional hidden data series as you like, and use them for additional chart markers.

cht=bvg chd=t1:30,10,20|60,40,50 chm=D,0033FF,1,0,5,1

Syntax

chm= D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>,<opt_axis_index>

• D Indicates that this is a line chart on top of the current chart.
• <color> The color of the line, in RRGGBB hexadecimal format.
• <series_index> The index of the data series used to draw the line. The data series index is 0 for the first data series, 1 for the second data series, and so on.
• <which_points> Which points in a series to use to draw the line. Use one of the following values:
  • 0 - Use all the points in the series.
  • start:end - Use a specific range of points in the series, from the start to end, inclusive (zero-based index). You can also use floating point values to specify intermediate points, or leave start or end blank to indicate the first or last data point, respectively. start and end can be negative, as a reverse index from the last value. If both start and end are negative, be sure to write them in increasing value (for example, -6:-1).
• <width> The width of the line in pixels.
• <opt_z_order> [Optional] unsupported for now, set it to 0
• <opt_axis_index> [Optional] Which axis to use for this line chart labels to. This is an index into the chxt parameter array. For example, if you have chxt=x,x,y,y then index 0 would be the first x-axis, 1 would be the second x-axis.

To add multiple lines (or combine this with any other chm markers), separate the chm parameter sets using a pipe ( | ) delimiter. You cannot make a dashed line marker with this parameter.

Examples

This is an example of drawing a marker line on a bar chart. The z-order is set to 1, so the line is drawn on top of the bars. This example uses the same data for both the bars and the data line.

chm=D,0033FF,0,0,5,1 chd=s:1XQbnf4

This is the same bar chart, but with an additional data series just for the line. This is an example of a compound chart. Compound charts are drawn by adding additional data series to the chd parameter, plus a value to chd telling the chart to "ignore" the additional data series.

chm=D,0033FF,1,0,5,1 chd=s1:1XQbnf4,43ksfg6

Bar line with line serie

Here is a bar chart with a trace line. The first two data series are used for the stacked bars, and the remaining series is used for the line. chd=s2 indicates that the chart should use only the first two series for bars. The line uses the third series for its data.

• chd=s2:1XQbnf4,EWoQMUB,9halxp9 - Simple encoding, where the first two series are used to draw the bars, and the last series is used for the line.
• chm=D,0033FF,2,0,5,1 - Trace line (D), blue, data from series index 2, all points (0), line is 5 pixels wide, and has a z-order of 1.

chm= D,0033FF,2,0,5,1 chd=s2: 1XQbnf4, EWoQMUB, 9halxp9

Stacked bar chart with an independent line drawn

cht=bvs chd=t2: 0,10,20,30,20,70,80| 0,20,10,5,20,30,10| 10,0,20,15,60,40,30 chm=D,76A4FB,2,0,3

Bar chart with multiple reference lines

The important points are:

• Chart data chd parameter is a1:503,627,1052,1371,460,562,957,1395,549,627,869,1098,475,581,654,795,368,540,742,829,408,627,790,1036,329,459,733,857,360,492,311|7.65,7.88,8.63,8.33,7.88,7.01,8.64,8.81,8.02,7.85,7.73,8.26,8.26,6.85,7.69,8.28,8.09,7.64,9.15,8.64,7.12,7.61,8.81,9.18,6.69,7.46,7.87,8.63,7.66,6.88,7.08|6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6. a1 means "only use the first data serie (delimited with |) for the bar chart, every other data series can be used as line markers.
• chxt=x,y,r,r means "display a chart with a x axis, a y axis and two r right axis"
• chm=D,0033FF,1,0,5,1,0,2|D,3DC9F9,2,0,5,1,0,3 the two line Markers use the first (1) and second (2) data-serie. Also note that ",2" and ",3" means use the first right axis and the second axis defined in chxt

If we stop there we get the chart below:

Note how the fourth axis (the second r right axis) from chxt is visible but with thr same data range as the first y axis while we would like it to have the same data-range as the first r right axis from 0 to 10. Current aXis data Range chxr is set for the first r axis with :

• chxr=2,0,10 it means "on the second axis defined in chxt. Counting from 0, set the data range from 0to 10"

Let's add another data range for our last right axis:

• chxr=2,0,10|3,0,10 the newly added part means "on the third axis defined in chxt (the last right axis). Counting from 0, set the data range from 0to 10"

Image-Charts then renders:

For esthetic purpose, let's hide the last right axis. To do that we will use aXis Style chxs parameter.

• chxs=3,000000,0 it means "counting from 0, for the third declared axis in chxt parameter, set the font color to 000000 and the font-size to 0px so it hides completly the axis"

This last change finally renders:

Line Fills

You can fill the area below a data line with a solid color.

You can combine line fills with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Syntax

chm= <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0> |...| <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>

• <b_or_B> Whether to fill to the bottom of the chart, or just to the next lower line.
  • B - Fill from <start_line_index> to the bottom of the chart. <end_line_index> supports a special syntax to let you fill a segment of the chart. This is easiest if you have a chart with a single line that you want to fill.
  • b - Fill between two lines in a multi-line chart. Start and end lines are indicated by <start_line_index> and <end_line_index>.
• <color> An RRGGBB format hexadecimal number of the fill color
• <start_line_index> The index of the line at which the fill starts. The first data series specified in chd has an index of zero (0), the second data series has an index of 1, and so on.
• <end_line_index>
  • Fill type 'b' - The line at which to stop the fill. This line must be below the current line.
  • Fill type 'B' - One of the following choices:
    • any value - Any single number in this parameter is ignored, and the fill will go from the specified line to the base of the chart
    • start:end - To fill a vertical slice below the chart, specify start:end, where these are data point indices describing where to start and stop the fill. Both values are optional, and default to first_point:last_point. (See example below.)
• <0> Reserved — must be zero.

Examples

The following example fills the entire area under the line.

chm=B,76A4FB,0,0,0

The following example has 3 series, 3 lines and 2 fills. First serie (0,1) has an orange color fill (#fdb45c), second serie (1,2) has a red color fill (#ff6e6e):

chd=s:cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH chm=b,fdb45c,0,1,0|b,ff6e6e,1,2,0

The following example fills 2 datasets with yellow (consumed) and grey (prevision) colors.

chd=a:1,2,3,4,5,6,7|1,2,3,4,5,6,7,8,9,10,11,12,13 chm=B,ffc107,0,0,0|B,cccccc,1,0,0

Text and Data Value Markers chm

You can label specific points on your chart with custom text, or with formatted versions of the data at that point.

Syntax

chm= N<formatting_string>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>,<opt_font_family>,<opt_font_style>

• <formatting_string> - The value of the data at this point, with optional formatting. If you do not use the chds parameter (custom scaling) it gives the exact encoded value; if you do use that parameter with any format type the value will be scaled to the range that you specify. See an example of chds with numeric markers below. The formatting string syntax is as follows: <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>

  • <preceding_text> - Text to precede each value.
  • *...* - An optional block wrapped in literal asterisks, in which you can specify formatting details for numbers. The following values are supported, and are all optional:
    • <number_type> - The number format, for numeric values. Choose one of the following:
      • f - [Default] Floating point format. Consider specifying precision as well with the value.
      • p - Percentage format. A % sign is appended automatically. Note: When using this format, data values from 0.0 — 1.0 map to 0 — 100% (for example, 0.43 will be shown as 43%).
      • e - Scientific notation format.
      • c*<CUR>* - Format the number in the currency specified, with the appropriate currency marker. Replace with a three-letter currency code. Example: cEUR for Euros. You can find a list of codes on the ISO 4217 wikipedia page, although not all symbols are supported.
    • <decimal_places> - An integer specifying how many decimal places to show. The value is rounded (not truncated) to this length. Default is 2.
    • z - Display trailing zeros. Default is no.
    • s - Display group separators. Default is no.
    • x or y - Display the data from the x- or y-coordinate, as specified. The meaning of x data varies by chart type: experiment with your chart to determine what it means. Default is 'y'.
  • <following_text> - Text to follow each value.

• <color> The color of the markers for this series, in RRGGBB format hexadecimal.

• <series_index> The zero-based index of the data series on which to draw the markers. Ignored for h markers and markers that specify location by x/y position (start with the @ character). You can use hidden data series as a source for markers; see Compound Charts for more information. Grouped vertical bar charts support a special extended syntax to align markers with specific bars.

• <opt_which_points>
  [Optional] Which point(s) to draw markers on. Default is all markers. Use one of the following values:

  • start:end - Draw a marker on every data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3: would be from the fourth element to the last, and omitting this parameter entirely would default to first:last. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1).

  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.

• <size> The size of the marker, in pixels.

• <opt_z_order> Not supported yet

• <opt_placement> [Optional] Additional placement details describing where to put this marker, in relation to the data point.

  • Bar-relative placement [Bar charts only]: 's', 'c', 'e' - Base, center, or top of a bar. For stacked charts, this is relative to the section of the bar for each series, not for the whole bar. If the series index given is -1 (stack total) it is in relation to the whole bar. Default value is 'c'.

• <opt_font_family> [Optional] one of the supported open-source font. Don't forget to checkout the font gallery

• <opt_font_style> [Optional] one of normal or italic. Default value used is normal

Examples

Here's an example of value labels on a bar chart.

The first chart (Np0) specifies a data value marker, with values shown as a percentage, rounded to zero decimal places, in white, on all values, in 13-point text. Note that the data values are all between 0.0 and 1.0, which, in percentage format, are moved up two decimal places.

chm= N*p0*,FFFFFF,0,-1,13 chd=t: 0.7,0.25,0.18,0.15,0.115,0.100,0.30

The second chart (NcUSD1) shows values formatted as Dollar, in white, on all values, in 13-point text.

chm= N*cUSD1*,FFFFFF,0,-1,13

Example with font-family and font-style

chm= N*cUSD1*,4e5399,0,-1,13,,,Economica,italic

Stacked-chart with labels positioned at the center

chm= N,000000,0,-1,10,,c|N,000000,1,-1,10,,c|N,000000,2,-1,10,,c

Bar-chart with labels positioned at the top

chm= N,000000,0,-1,10,,e|N,000000,1,-1,10,,e|N,000000,2,-1,10,,e

Bar-chart with labels positioned at the bottom

chm= N*cUSD1*,FFFFFF,0,-1,13,,s