Compound Charts

  

Overview

You can combine several chart types with line or candlestick markers to highlight data trends or show variance. When you add line or candlestick 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:

Bar chart with tracking line

while others look like completely new chart types—for instance, a box chart:

box chart.

Creating a Compound Chart

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 digit 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.
    1. Notes:
      1. Scatter charts - Scatter charts hide data in a different way; see the documentation for more details.
      2. lxy line charts - Specify an even number of series to display (t0, t2, t4, etc). This is because each line in an lxy chart is described by two data series: one for x-values, and one for y-values.
  3. Use the hidden data series to draw candlestick markers, line markers, or other markers. How to draw markers is covered in the linked sections. 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.

Here's the chart we just described:

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

 

Chart Types

Here is a list of marker types, and the chart types that they can be used with:

Marker Type Base Chart Types That Support It
Line Line, Scatter, Bar, Radar
Candlestick Line, Bar
All others Line, Scatter, Bar, Radar

Here are some examples of the types of compound charts that you can create:

Chart Type Description Example
Line marker charts Line markers can be used to show trends in many other chart types. Bar chart with line markerBar chart with line marker
Candlestick charts Candlestick charts are often used to show financial data. Line chart with one orange line and four financial markers.
Box charts

Box charts are used to show data grouped into range quartiles.

Line chart with one orange line and four financial markers.
Embedded charts You can embed a chart within another chart. Embedded chart
Other markers You can hide marker data in any of the acceptable base chart types and use it with any other kinds of markers that you like.
chd=t1:
  10,20,30,40,50,60,70,80
  5,10,15,20,25,30,35,40,45,50
chm=o,000000,1,-1,5

Back to top

 

Line Marker Charts

You can add lines to line, scatter, bar, or radar charts to highlight trends.

Base Type + Marker Type Description Example
Bar + Line

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.
Bar chart with line marker
chm=
  D,0033FF,2,0,5,1
chd=s2:
  1XQbnf4,
  EWoQMUB,
  9halxp9
Scatter + Line You can add a line to a scatter chart to show averages. Note that scatter charts hide marker data in a different way; see Scatter Charts for more details.
chd=t:
  12,16,16,24,26,28,41,51,66,68,13,45,81|
  16,14,22,34,22,31,31,48,71,64,15,38,84
chm=
  o,0000FF,0,-1,0|
  o,FF0000,0,0:9:,5|
  D,000000,1,10:,1,-1
Bar + Line

Here is another stacked bar chart with an independent line drawn over it.

Bar chart with line marker
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 + Circles Same as the previous chart, but with circle markers instead of a line marker. We've specified every 0.5 data value, which adds calculated intermediary points in the dotted line. Bar chart with line marker
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=o,76A4FB,2,-.5,10

Back to top

 

Candlestick Charts

Candlestick charts require at least four data series to draw the candlesticks, plus additional series for any other chart elements. Candlestick charts can show only a set of candlestick markers, or can be a combination of candlestick markers plus bar or line charts, as shown here:

Base Type + Marker Type Description Example
Line (hidden) + Candlestick

This example shows a chart showing only candlestick markers.

  • chd=t0 - The 0 means that all data series are hidden from the basic chart type (here, a line chart), so only the candlesticks are drawn. The first and last values in each series are -1 to indicate missing values to avoid drawing the first or last candlestick, which would overlap the axis or chart margin and be cut off.
  • chm=F,0000FF,0,-1,20 - The F indicates candlestick markers (originally "financial markers"); 0000FF means that the markers are blue when the value is decreasing; the 0 indicates that the candlestick data starts at series 0; -1 indicates markers on all points (we could have also specified 0:4 here to hide the first and last candlestick instead of using -1 data values); 20 is the width of the candlesticks.
Basic candlestick chart
cht=lc
chd=t0:
  -1,5,10,7,12,-1|
  -1,25,45,47,24,-1|
  -1,40,30,27,39,-1|
  -1,55,63,59,80,-1
chm=F,0000FF,0,-1,20
Line + Candlestick

Here's an example of a line chart with candlestick markers.

Five data series are provided; the first is used for the chart type (line), and the remaining "hidden" data series are used for the candlestick markers. The chd=t1 parameter specifies that only the first series is used for that chart type (line chart).

We omitted the first and last candlestick markers using 1:4 in the <which_points> value, because first and last candlesticks are cropped by the chart area borders.

The chm parameter specifies the candlestick markers, with the syntax F,<declining_color>,<data_series_index>,<which_points>,<width>,<order>

Line chart with one orange line and four financial markers.
cht=lc
chd=t1:
  20,10,15,25,17,30|
  0,5,10,7,12,6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,6
chm=
  F,,1,1:4,20

Line + Candlestick

Another example of a candlestick chart, but with custom fill colors.

Bar chart with line marker
chd=t1:
t1:
  90,80,70,50,40,30,20,10|
  0,5,10,0,5,10,0|2,15,20,5,15,40,0|
  5,35,20,2,35,20,0|
  15,40,30,15,40,50,0
chm=
  F,000000,1,1:-2,20
Bar + Candlestick

Here is an example of a bar chart with candlestick markers.

We show the first and last candlestick markers here, because the bars add enough spacing to prevent them from being cropped by the chart boundaries.

Line chart with one orange line and four financial markers.
cht=bvg
chd=t1:
  20,10,15,25,17,30|
  0,5,10,7,12,6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,6
chm=
  F,,1,1:4,20

Back to top

 

Box Charts

Box charts, also called box plots or box and whisker charts, are a type of chart that shows the grouping of one or more series into quartiles (quartiles are groups that span 25% of the range of values, with the possible exception of outliers). Box charts are similar to candlestick charts, but with added markers for the bottom and top of the candlestick, plus a 50th percentile marker.

A box chart is made up completely of markers, as shown here:

Candlestick marker
chm=
  F,0000FF,0,1,10
Candlestick marker
chm=
  H,0000FF,0,1,1:10|
  H,0000FF,3,1,1:10|
  H,0000FF,4,1,1:10
Candlestick marker
chm=
  o,FF0000,5,,5|
  o,FF0000,6,,5
Candlestick marker
One set of candlestick markers (chm=F), for the body of the boxes: One set of adjustable-length horizontal line shape markers (chm=H) for the minimum, 50th, and 100th percentile lines: Optionally some circle shape markers (chm=o) to show outliers in the data set. Put them all together, and you have a box chart!

The base chart type for box charts is any of the bar chart types (bhs, bvs, bhg, bvg) or line chart types (lc, ls, lxy). But if you are hiding the base chart type by adding a zero in the data format parameter (for example: chd=t0: or chd=s0:), it doesn't matter which chart type you choose.

A box chart must have at least five data series: four for the boxes and the maximum and minimum markers; one for the 50% marker; plus any additional data series for any additional markers that you might want, such as outlier markers. Here is the recommended series order. Note that if the value in series 1 is more than the corresponding value in series 2, the box will be filled with the chm=F marker color; if the value in series 1 is less than the value in series 2, the box will be unfilled. See Candlestick Markers for more information.

Series order for an unfilled box:

  1. Minimum value
  2. 25% marker (75% for a filled box)
  3. 75% marker (25% for a filled box)
  4. Maximum value
  5. 50% marker
  6. Series six and beyond are for any additional marker data, such as outliers.

You can actually put the additional marker series before or after the candlestick marker data, but it is simpler to put them all last.

You can make different styles of box charts by specifying different markers, different base chart types, or ordering the data differently

Description Example

This is a standard box chart, but with different colors assigned to the different chart elements to highlight which marker is being used to create each chart element.

  • cht=bvs - The base chart type is bvs, but no bars from this base chart are actually shown. We could have specified any compound chart type here.
  • chd=t0: - The t0 hides all lines in this line chart. All data will be used only for markers. In the data, the first and last values are -1 to avoid having markers that overlap the left and right edges of the chart. All values in the second series are lower than the corresponding values in the third series, so all boxes are unfilled.
    • -1,5,10,7,12,-1 - Minimum value: bottom point of lower orange sticks; also the height of the horizontal green lines.
    • -1,25,30,27,24,-1 - 25% value: bottom horizontal edge of orange boxes.
    • -1,40,45,47,39,-1 - 75% value: top horizontal edge of orange boxes.
    • -1,55,63,59,80,-1 - Maximum value: top point of upper orange sticks; also the height of the horizontal blue lines.
    • -1,30,40,35,30,-1 - Black horizontal "Median" lines inside the candlesticks.
    • -1,-1,5,70,90,-1 - Outlier data (red circles)
    • -1,-1,-1,80,5,-1 - More outliers data (red circles). The outliers data is broken into two sets because you cannot have two markers, one above the other, specified in the same series without using offsets or other complicated tricks.
  • chm= - Marker data, as described below:
    • F,FF9900,0,1:4,40 - Orange candlestick markers (F) using four data series starting at the first series (0), on points 1—4, size 40.
    • H,0CBF0B,0,1:4,1:20 - Green horizontal line markers showing the min value. These come from the first series.
    • H,0000FF,3,1:4,1:20 - Blue horizontal line markers showing the max value. These come from series 3.
    • H,000000,4,1:4,1:40 - Black horizontal line markers showing the 50% value. These come from series 4.
    • o,FF0000,5,-1,7 - Red circles assigned to the sixth data series for outliers. Markers are assigned to all elements in this series, which uses -1 for boxes without an outlier.
    • o,FF0000,6,-1,7 - More outliers. Another data series is required when you want to stack outliers on top of each other around the same box.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue

cht=bvs
chd=t0:
  -1,5,10,7,12,-1|
  -1,25,30,27,24,-1|
  -1,40,45,47,39,-1|
  -1,55,63,59,80,-1|
  -1,30,40,35,30,-1|
  -1,-1,5,70,90,-1|
  -1,-1,-1,80,5,-1
chm=
  F,FF9900,0,1:4,40|
  H,0CBF0B,0,1:4,1:20|
  H,000000,4,1:4,1:40|
  H,0000FF,3,1:4,1:20|
  o,FF0000,5,-1,7|
  o,FF0000,6,-1,7

The lc chart type will always show axis lines. To create a chart without axis lines, specify a chart type of ls.
Chart type lc shows borders
  cht=lc
Chart type ls doesn't show borders
   cht=ls
To create a filled box, make the point in the second series greater than the corresponding point in the third series. The larger value is marked in red in the code shown on the right. Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
chd=t0:
  -1,5,10,7,12,-1
  -1,40,30,27,24,-1
  -1,25,45,47,39,-1
  -1,55,63,59,80,-1

Back to top

 

Embedded Charts

Pie chart embedded in a line chart

You can embed any chart type inside a bar, line, radar, or scatter chart using dynamic icons. See the Embedded Charts section of the Dynamic Icons (chem) marker documentation.

Back to top

 

Standard Features

The rest of the features on this page are standard chart features.

Line Markers chm=D [Bar, Candlestick, Line, Radar, Scatter]

You can add a line that traces data in your chart. Most often, this is used in compound charts.

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.

Syntax

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
Indicates that this is a line marker.
<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).
<size>
The width of the line in pixels.
<opt_z_order>
[Optional] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

 

Examples

Description Example

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.
Bar chart with line marker
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.

See Compound Charts for more information.

Bar chart with line marker
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

Back to top

Shape Markers chm [Bar, Line, Radar, Scatter]

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 in which they appear in the chm parameter. You can also create text markers on data points, which is covered in Data Point Markers.

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.

Shape markers behave slightly differently in scatter charts. See that documentation for more information.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[Optional] If you precede the marker type with the optional @ character, then <opt_which_points> should use the x:y format.
<marker_type>
The type of marker to use. Specify one of the following types:
  • a - Arrow
  • 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. <size> specifies the width of the rectangle, in pixels.
  • d - Diamond
  • E - Error-bar marker ( ) This marker requires two data series to create, one value for the bottom, and the corresponding point in the second series for the top. It also exposes an extended <size> syntax: line_thickness[:top_and_bottom_width] where top_and_bottom_width is optional. See the examples below.
  • h - Horizontal line across the chart at a specified height. (The only valid format for <opt_which_points> parameter is n.d.)
  • H - Horizontal line through the specified data marker. This supports an extended <size> syntax that lets you specify an exact line length: line_thickness[:length] where :length is optional, and defaults to the full chart area width.
  • o - Circle
  • s - Square
  • v - Vertical line from the x-axis to the data point
  • V - Vertical line of adjustable length. This supports an extended <size> value syntax that lets you specify an exact line length: line_thickness[:length] where :length is optional, and defaults to the full chart area height. The marker is centered on the data point.
  • 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.
<opt_which_points>
[Optional] Which point(s) to draw markers on. Default is all markers. Use one of the following values:
  • n.d - Where to draw the marker. The meaning depends on the marker type:
    • All types except h - Which data point to draw the marker on, where n.d is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
    • h - A number from 0.0 to 1.0, where 0.0 is the bottom of the chart, and 1.0 is the top of the chart.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.
  • -n - Draw a marker on every n-th data point. Floating point value; if n is less than 1 the chart will calculate additional intermediary points for you. For example, -0.5 will put twice as many markers as data points.
  • start:end:n - Draw a marker on every n-th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first:last:1. 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). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
  • x:y - Draw a marker at a specific x/y point on the chart. This point does not have to be on a line. Add the @ character before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15.
<size>
The size of the marker, in pixels. Most take a single number value for this parameter; the V, H, and S markers support the syntax <size>[:width] where the optional second part specifies the line or marker length.
<opt_z_order>
[Optional] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
<opt_offset>
[Optional] Let you specify horizontal and vertical offsets from the specified location. Here is the syntax, which uses a : delimiter: reserved:<horizontal_offset>:<vertical_offset>. If specified, you can include an empty ,, value in the chm parameter string for <opt_z_order>. Examples: o,FF9900,0,4,12,,:10 o,FF9900,0,4,12.0,,:-10:20 o,FF9900,0,4,12,1,::20
  • reserved - Leave blank.
  • <horizontal_offset> - A positive or negative number specifying the horizontal offset, in pixels. Optional; leave blank if not used.
  • <vertical_offset> - A positive or negative number specifying the vertical offset, in pixels. Optional; leave blank if not used.

 

Examples

Description Example

Here's an example of several of the shape and line markers.

  • a,990066,0,0.0,9.0 - Purple arrow, first series, first point, size 9.
  • c,FF0000,0,1.0,20.0 - Red cross, first series, second point, size 9.
  • d,80C65A,0,2,20.0 - Green diamond, first series, third point, size 9.
  • H,000000,0,3,1:40 - Black horizontal line, first series, data point 3, one pixel wide, forty pixels long.
  • o,FF9900,0,4.0,12.0 - Orange circle, first series, fifth point, size 12.
  • s,3399CC,0,5.0,11.0 - Blue square, first series, sixth point, size 11.
  • v,BBCCED,0,6.0,1.0 - Vertical line up to point, first series, seventh point, one pixel wide.
  • V,3399CC,0,7.0,1.0 - Vertical line bottom to top of chart, first series, eighth point, one pixel wide.
  • x,FFCC33,0,8.0,20.0 - Yellow 'X', first series, ninth point, size 20.
  • H,FFFF00,0,9,2 - Horizontal yellow line the width of the chart at data point 9.
  • h,FF0000,0,0.5,1 - Red horizontal line at designated height, first series, halfway up the chart, one pixel wide.
Line chart with markers
chm=
  a,990066,0,0.0,9.0|
  c,FF0000,0,1.0,20|
  d,80C65A,0,2.0,20.0|
  H,000000,0,3,1:40|
  o,FF9900,0,4.0,12.0|
  s,3399CC,0,5.0,11.0|
  v,BBCCED,0,6,1.0|
  V,3399CC,0,7,1.0|
  x,FFCC33,0,8,20|
  H,FFFF00,0,9,2|
  h,FF0000,0,0.5,1

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

If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. Here, the circle is the first marker specified with chm, so it is drawn first. The diamond is specified and drawn second, which results in it being drawn on top of the circle.

Line chart, one line has 15 pixel circles on each data point the other line has 10 pixel diamonds. A diamond is drawn on the point that is common to both lines
chm=
  o,FF9900,0,-1,15.0|
  d,FF0000,1,-1,10.0

Here's a line chart with a marker on every second data point (-2 means every other point).

Line chart with marker on every second point
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-2,6
Here's a line chart with twice as many markers as data points (-0.5 means every half point). Line chart with marker on every second point
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-.5,6
This example shows how to use h and v markers to create grid lines with custom colors and thickness. The z-order value (the last value) is set to -1 so that the grid lines are drawn beneath the data line.
Line chart with marker on every second point
chm=
  h,76A4FB,0,0:1:.2,2,-1|
  V,76A4FB,0,::2,0.5,-1

This chart adds vertical fill lines to a line chart:

  • v - Vertical lines to the chart
  • FF0000 - Red lines
  • 0 - Series index
  • : :.5 - Range specifier: from start to end, every 0.5 points.
  • 2 - Thickness 2 pixels.
Line chart with marker on every second point
chm=
  v,FF0000,0,::.5,2
This example adds an arrow and text marker to the chart using exact coordinates. The first D marker is the trace line under the bars. The second marker is the arrow, and the third marker is the arrow text.
chm=
  D,003971,1,0,3|
  @a,000000,0,.25:.75,7|
  @tExpected,000000,0,.35:.85,10
A horizontal line fixed to a specific data point (H) can be useful for showing relative values, or emphasizing the height of a data value on a chart.
chm=H,FF0000,0,18,1

This graph demonstrates the markers that can specify line thickness and length in the <size> parameter.

  • E,000000,0,6,1:20 - Black error bar with 1 pixel wide lines, top and bottom bars 20 pixels long. The bottom is anchored to series 0 point 8, the top is anchored to series 1 point 8.
  • H,990066,1,2,5:50 - Purple, horizontal line five pixels wide, fifty pixels long centered on data point 2.
  • V,3399CC,0,8,3:50- Blue, vertical line 3 pixels wide, fifty pixels long, centered on data point 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50%7CV,3399CC,0,8,3:50%7CE,000000,0,6,1:20" src="/chart/image/images/chart_95.png" />
chm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

Back to top

Candlestick Markers chm=F [Bar, Line]

Candlestick markers indicate variance and direction change in a data series. Often they are used to show stock values during the course of a day. The marker includes segments that show the high and low value, as well as the opening and closing value for a specific time period (typically a day). For more about candlestick markers, see here.

A candlestick marker is drawn as a rectangle bisected by a vertical line. It requires four data series to draw a candlestick marker; here is what each series specifies:

  • Series 1 and 4 specify the bottom and top of the vertical line, respectively. These typically represent the low and high values for the day.
  • Series 2 and 3 specify the vertical borders of the rectangle. Series 2 is the opening value, and series 3 is the closing value. The color of the rectangle depends on which is higher: when the opening value (series 2) is lower than the closing value (series 3), the price has increased, and the rectangle is filled with solid green by default; when the opening value (series 2) is higher than the closing value (series 3), the price has decreased, and the rectangle is filled with solid red by default. You can only specify a fill color for the rectangle with decreasing value. When you specify that, the rectangle with increasing value is unfilled (empty). Note that series 2 can be either the top or the bottom of the rectangle, depending on whether the price has gone up or down.

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

Note: If you do not want the lines for the data used to draw the markers to appear in the chart, you must include a 0 after the format type. For example: chd=t0:10,20,30,40 in a text format data string. See Compound Charts for more information.

Here's an example, showing the lines for each series:

Syntax

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
F
Indicates that this is a candlestick marker.
<opt_declining_color>
[Optional] Fill color for the rectangles when the value is decreasing (when series 2 value > corresponding series 3 value). This is an RRGGBB format hexadecimal number. When the values increase, the rectangle will be empty. Default is solid green for increasing, solid red for decreasing (you cannot specify a custom fill color for increasing values).
<data_series_index>
The index of the data series to use as the first series for your candlestick markers. This is a zero-based index. So, if you specify 1 here, and you have six series, the second, third, fourth and fifth will be used to draw candlestick markers.
<opt_which_points>
[Optional] Specifies which data points are used to draw markers. Default is all markers. Use one of the following formats:
  • n.d - Draw a marker on a single point in the series, where n.d is the index of the point in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all markers.
  • -n - Draw a marker on every n-th data point.
  • start:end:n - Draw a marker on every n-th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first:last:1. 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). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
<width>
The width of all rectangles, in pixels.
<opt_z_order>
[Optional] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

 

Examples

Description Example

Here's an example of candlestick markers on a line chart with four series. The custom fill color 0000FF (blue) is specified, and this color is used to fill the rectangles when the point in series 3 is smaller than the equivalent point in series 2.

The first and last rectangle are trimmed by the chart. To eliminate these values, you could specify 1:4 for the fourth parameter of chm.

Note the zero in the data string, to hide the lines for the series: chd=t0. This indicates that all chart data is to be used for markers.

The <which_point> parameter is blank, which draws candlesticks on all data points.

Line chart with four orange lines and four financial markers

chd=t0:
  0, 5,10, 7,12, 6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,60
chm=F,0000FF,0,,20

Here's an example of the same chart, using the default colors, and removing the first and last item.

This is a compound chart: it is a combination of a line chart (the base chart type) and candlestick markers. The value of 1 in cht=t:1 means that all data series after the first should be hidden from the basic chart type (line chart). The first 1 in chm=F,,1,1:4,20 means that the candlestick data comes from series 2, 3, 4, and 5 (the 1 is zero-based). See Compound Charts for more information on how to draw a compound chart like this.

Line chart with one orange line and four financial markers.
cht=lc
chm=
  F,,1,1:4,20

chd=t1:
  15,40,30,27,39,54|
  ...

Back to top