Point Markers on Line Charts

A line chart draws nothing at its data points, only the line between them. chm puts a shape on each point. There is one group per series, and each group names a shape, a colour and a size in pixels.

What chm Draws on a Line Chart

The point marker form of chm is chm=<shape>,<color>,<series_index>,<which_points>,<size>, and several groups are joined with |.

  • shape is one of the five letters in the table below.
  • color is a hex colour written without a leading #. It fills the whole marker, which is drawn as a solid shape with no separate outline.
  • series_index picks the series the markers go on, counting from 0.
  • which_points has to be -1, meaning every point of that series. Image-Charts does not draw markers on a subset of the points, and a group that asks for one is dropped, so the series comes back with no markers on it at all.
  • size is the diameter of the marker in pixels, so 12 draws a marker six pixels from its centre to its edge.

The Five Shapes

The shape is the first field of the group, and it is a single letter.

Point marker shapes and the chm letter that selects each one
LetterShape
oCircle
sSquare
dDiamond, a square turned 45 degrees
cCross, an upright plus sign
XCross turned 45 degrees, so an X

https://image-charts.com/chart?cht=lc&chd=a:10,14,12,18,16%7C22,26,24,30,28%7C34,38,36,42,40%7C46,50,48,54,52%7C58,62,60,66,64&chco=1F3B99,00A550,E8622A,8581FF,273078&chm=o,1F3B99,0,-1,12%7Cs,00A550,1,-1,12%7Cd,E8622A,2,-1,14%7Cc,8581FF,3,-1,14%7CX,273078,4,-1,14&chls=1&chs=700x320&chxt=x,y&chdl=o+circle%7Cs+square%7Cd+diamond%7Cc+cross%7CX+cross+turned&chdlp=b

Line chart with five series, each carrying a different point marker shape
One group per series, five groups joined by pipes. Each group names its own shape, colour and size.

Markers on One Series

Markers are usually worth adding when the reader has to read individual values off the chart rather than follow a trend. One group is enough, and the marker colour is independent of the line colour set by chco, which is how you make the points stand out against their own line.

https://image-charts.com/chart?cht=lc&chd=a:31,42,38,55,61,58,72&chco=1F3B99&chls=3&chm=o,E8622A,0,-1,16&chs=700x260&chxt=x,y

Blue line chart three pixels wide with large orange circular markers on every point
A three pixel blue line from chco=1F3B99 and chls=3, with sixteen pixel orange circles on top of it.

Markers on an lxy Chart

An lxy chart takes both coordinates of every point, as alternating x and y series, so the points are no longer evenly spaced along the axis. Markers matter more there, because the position of each point along the x-axis carries information.

https://image-charts.com/chart?cht=lxy&chd=a:5,18,32,47,61,78,90%7C22,35,28,49,41,63,58&chco=8581FF&chls=1&chm=d,273078,0,-1,14&chs=700x260&chxt=x,y

An lxy chart with unevenly spaced points, each marked with a dark blue diamond
The x values come from the first series and the y values from the second, so the spacing between points varies.

The Other Things chm Does

chm is also the parameter that fills the area under a line, that draws a tracking line across a bar chart and that prints the data values next to each point. Those forms take different arguments in the same group.

  • b and B fill the area under a line, taking a colour and the indices of the lines to fill between.
  • D draws one series as a line over a bar chart, which is how you overlay a trend on top of bars.
  • N prints the value of each point as text, with an optional format string for currency, decimals and thousand separators.

The optional z-order field that Google documented after size is accepted and ignored, and the arrow and line prefixes it allowed have no Image-Charts equivalent. The reference documentation gives the full grammar of each form.

Add Markers to a Chart

Build a Chart