How to Hide Legend in ChartJS 2 and 3 (with React Examples)
Jasser Mark Arioste
Hello! In this tutorial, you'll learn how to remove the legend from ChartJS 2 and 3. I'll also be giving react examples and demos.
Introduction #
ChartJS is a very popular charting library for web applications and I guess that you're using it in your project as well.
By default, ChartJS renders the legend when displaying the charts. However, sometimes we want to remove this legend because maybe our chart is too small or lacks space.
This is demonstrated by the image below:
Tutorial Objectives #
- Remove legend in ChartJS 2 and below
- Remove legend in ChartJS 3 and above
- Remove legend through global settings
- Usage with react-chartjs-2 library.
Removing the legend in ChartJS 2 #
To remove the legend in ChartJS 2, you can set it through the options property. For example:
var MyChart = new Chart(canvas, { type: "line", data: {...}, options: { legend: { display: false, }, }, });123456789
Removing the legend in ChartJS 3 #
Removing the legend in ChartJS 3 is slightly different since you have to specify it through the options.plugins property now. The legend, title, and tooltip options are all moved to options.plugins starting from version 3.
var MyChart = new Chart(canvas, { type: "pie", data: {...}, options: { plugins: { legend: { display: false, }, }, }, });1234567891011
Version 4 and 5 have no difference from ChartJS 3 in this regard.
Removing the legend through Global Settings #
You can also set the default legend display to false by using ChartJS's global settings.
For v2 and below:
Chart.defaults.global.legend.display = false;1
For v3 and above:
Chart.defaults.plugins.legend.display = false;1
Usage with react-chart-js-2 library. #
The react-chart-js-2 library is a component wrapper for ChartJS. It uses components like Pie, Line, Bar, etc to easily display the charts. First, I suggest considering upgrading the version of your chart.js package to v3 so that it will use the latest options.
yarn add chart.js@^3.6.0 react-chartjs-2@^4.0.0
Now, you can render your chart component:
import React from "react"; import Chart, { CategoryScale } from "chart.js/auto"; import { Line } from "react-chartjs-2"; Chart.register(CategoryScale); //Line chart needs the CategoryScale plugin so lets register it here. //... const MyChart = () => { // ...omitted for brevity return ( <Line data={data} options={{ plugins: { legend: { display: false, }, }, }} /> ); };123456789101112131415161718192021
That's basically it!
Conclusion #
You learned how to remove the legend from ChartJS 2 and 3. You also learned how to render it with the react-chartjs-2 library.
If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.
Resources #
Read through the respective documentation for more info!
Credits: Image by Jürgen from Pixabay
