Usage

Registering

The plugin does not automatically register. Register it either for all charts, or for a single chart instance.

All charts

Chart.register(gradient)

Single chart

const chart = new Chart(ctx, {
  // ...
  plugins: [gradient]
});

Configuration

Gradient colors are configured under the gradient key of a dataset, with a separate entry for backgroundColor and/or borderColor. Each entry selects the scale the gradient follows, and a map of scale values to colors.

Option	Description
axis	Axis (scale) the gradient follows: x, y, or r.
colors	Map of scale value to color, sorted and used as the gradient’s color stops.

const chart = new Chart(ctx, {
  data: {
    datasets: [{
      // data
      gradient: {
        backgroundColor: {
          axis: 'y',
          colors: {
            0: 'red',
            50: 'yellow',
            100: 'green'
          }
        },
        borderColor: {
          axis: 'x',
          colors: {
            0: 'black',
            1: 'white',
            2: 'black',
            3: 'white'
          }
        }
      }
    }]
  }
});

See the editable background, border, and both samples.