Skip to main content

Grid Lines

You can specify solid or dotted grid lines on your chart using the chg parameter.

This parameter doesn't let you specify the thickness of the lines, if you need this please contact us with your requirements.

Grid lines are available on bar, line, radar and bubble charts.

Syntax​

chg=
  <x_axis_enabled>,<y_axis_enabled>,
  <opt_dash_length>,<opt_space_length>,<opt_lines_color>
  • <x_axis_enabled> if set to a number between 1 and 100 ([1;100]) enable vertical grid lines.
  • <y_axis_enabled> if set to a number between 1 and 100 ([1;100]) enable horizontal grid lines.
warning

Google Image charts use the two parameters above to calculate how many x or y grid lines to show on the chart, we decided not to implement this feature as it was hard to use and error prone when used with changing datasets. However the multiple axis feature can be leveraged to produce such result as demonstrated in the customize grid lines number example.

  • <opt_dash_length>, <opt_space_length> [Optional] Used to define dashed grid lines. The first parameter is the length of each line dash, in pixels. The second parameter is the spacing between dashes, in pixels. Specify 0 for <opt_space_length> for a solid line. Default values are 4,1.
  • <opt_lines_color> [Optional] The color of the grid lines (default color is black with 50% opacity: 0000001a)

Examples​

These examples use only the <x_axis_step_size> and <y_axis_step_size> parameters. The Chart API displays a dashed grid line by default.

cht=bvg
chg=20,50

chart

Hum, we can do much better, why not change the grid color #CECECE to and make it dashed:

chg=20,50,5,5,CECECE

Oh, and add some extra-colors and make bars rounded (8px):

chbr=8
chco=ffc107|67c23a|66b1ff|f56c6c|ffeb3b|00bcd4

chart

Grid lines also works on line charts:

cht=lc
chg=20,50,1,1,333333

chart

The following example uses larger spaces to display lighter grid lines (1,5):

chg=20,50,1,5

chart

Finally let's hide the vertical grid lines from previous example:

chg=0,50,1,5

chart

Oh, and let's also change the axis colors (see chxs). The y axis is the second displayed axis (so the 1 index) and we want the axis to have the 7FA5F4 color:

chg=0,50,1,5
chxt=x,y
chxs=1,33333,14,-1,l,FFFFFF,7FA5F4

chart

Customize grid lines number​
info

This following example requires features only available in the Enterprise+ subscriptions

Let's start our example with this compound chart:

compound chart

Let say we would like to display grid lines like this:

compound chart with custom grid lines

To customize the number of grid lines add first one more axis to the chart, leveraging the multiple axis (chxt) feature. chxt=x,y becomes chxt=x,y,y:

compound chart with multiple axis

Use axis ranges (chxr) to align the second y axis with our dataset. chxr=2,-500,2500:

compound chart with multiple axis and the same data range

Now let's customize the grid line numbers of the first y axis. In order to do that we will use again the axis ranges (chxr) feature and specify a count step of 100. chxr=2,-500,2500 becomes chxr=2,-500,2500|1,-500,2500,100:

compound chart with multiple axis and custom grid lines number

For the final touch, hide the first y axis that we used to customize our grid lines number. Axis styles (chxs) can hide both axis line and tick marks when <opt_axis_or_tick> optional parameter is set to _ for the first y axis. chxs=1,000000,0,_:

compound chart with custom grid lines number

Tada! Our compound chart now has custom grid lines count!