Skip to main content


The chart legend can be customized via the options.legend property (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.