Skip to main content

Legend

The chart legend can be customized via options.legend in Chart.js v2, or options.plugins.legend in v3 and v4 (see chart legend in Chart.js v2 and chart legend in Chart.js v3+).

To display the legend, set display to true.

Valid legend position settings:

  • top (default)
  • left
  • bottom
  • right

Valid legend align settings:

  • center (default)
  • start
  • end

In the example below, we choose to show the legend by setting display to true, and then set the position and align properties to move it where we want to see it.