chartjs-plugin-gridline-background

Plugin for Chart.js to display colored backgrounds per gridline.

This plugin fills the background of gridlines with configurable colors. Actually, it fills each space between two gridlines. The gridlines already had configurable foreground colors, and this plugin completes that function with background colors.

(Click on the images to see jsfiddles.

Tested with Chart.js 2.7.2, and only with linear, time and category axes. Might work with logarithmic. Expected to fail with other type axes.

Installation

Download or link to https://rawgit.com/sfrauenfelder/chartjs-plugin-gridline-background/master/chartjs-plugin-gridline-background.js I don't have a minified version, and it's just one file. Include into your html, after Chart.js.

Configuration

The plugin has two settings, which should be given under the gridLines, in turn under each scale, just like the gridline foreground color. See here.

Name	Type	Default	Description
backgroundColor	Color/Color[]	'rgba(0, 0, 0, 0.0)'	The color of the space between this grid line and the next. More details below the table.
backgroundColorRepeat	true/false	false	Whether the colors should be repeated. So for example you can specify two colors, which will then be repeated for all gridlines.

Detailed explanation of settings:

backgroundColor	backgroundColorRepeat
	false	true
<not set>	By default, i.e. if you specify no settings, the plugin will not render anything visible.
Single color (string)	All gridline backgrounds for that axis will be colored with that color. The backgroundColorRepeat has no effect in this case.
List of colors (array)	The first color applies to the first grid line background, the second to the second grid line background and so on. If there are not enough colors, remaining backgrounds will be left empty.	The first color applies to the first grid line background, the second to the second grid line background and so on, until there are no more colors; then we repeat the colors from the first.

Note: For y axes, you have to specify colors from top to bottom, because that's the order in which gridlines are drawn. That's how it works for the gridline foreground colors, and I have followed that for the background colors. Note: If you use opaque (not transparent) colors, only the last drawn colors will be visible, as they are drawn over any previous colors, which are then hidden.

Example

The following example would give you alternating grey and white background for an x-axis:

options: {
   scales: {
      xAxes: [{
         gridLines: {
            backgroundColor: [ 'lightgrey', 'white' ],
            backgroundColorRepeat: true
         }
      }]
   }
}