ChartDataLabels is globally active for some reason

Question

So i have made this chart as shown below with Chart.js and it works pretty much as intended for now, but I'm having an issue with the ChartDataLabel plugin.For some reason now the ChartDataLabels are displaying on "all" other charts? without me having it implemented, imported or anything.

Is there a way to disable the "plugin" on everything else besides where I want to use it?

import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";
import ChartDataLabels from "chartjs-plugin-datalabels";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ChartDataLabels
);

export const options = {
  plugins: {
    title: {
      display: false,
      text: "Invitations to review conversion",
    },
    tooltip: {
      enabled: false,
    },
    legend: {
      display: false,
    },
  },

  responsive: true,
  interaction: {
    mode: "index",
    intersect: false,
  },
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
  plugins: [ChartDataLabels],
};

const labels = [
  "Invitations delivered",
  "Invitations opened",
  "Invitation-link clicked",
  "Reviews",
];

export const data = {
  labels,
  datasets: [
    {
      label: "Sent",
      data: labels.map(() => faker.datatype.number({ min: 0, max: 50 })),
      backgroundColor: "rgb(0 177 136)",
      stack: "Stack 0",
      datalabels: {
        color: "#fff",
        font: {
          size: 16,
        },
      },
    },
    {
      label: "Missing",
      data: labels.map(() => faker.datatype.number({ min: 0, max: 50 })),
      backgroundColor: "rgb(0, 177, 136, 0.2)",
      stack: "Stack 0",
      datalabels: {
        font: {
          size: 16,
        },
      },
    },
  ],
};

export default function App() {
  return <Bar options={options} data={data} />;
}

Does this answer your question? https://stackoverflow.com/a/56169678/2358409 — uminder, Apr 16 '22 at 14:52

score 1 · Answer 1 · answered Apr 15 '22 at 12:55

As described here in the docs if you use Chart.register(ChartDatalabels) you register it as a global plugin which means it applies to all your charts.

If you want to register it locally to only a single you need to register it locally by providing it to the plugins array like so:

import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";
import ChartDataLabels from "chartjs-plugin-datalabels";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  plugins: {
    title: {
      display: false,
      text: "Invitations to review conversion",
    },
    tooltip: {
      enabled: false,
    },
    legend: {
      display: false,
    },
  },

  responsive: true,
  interaction: {
    mode: "index",
    intersect: false,
  },
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
  plugins: [ChartDataLabels],
};

const labels = [
  "Invitations delivered",
  "Invitations opened",
  "Invitation-link clicked",
  "Reviews",
];

export const data = {
  labels,
  datasets: [
    {
      label: "Sent",
      data: labels.map(() => faker.datatype.number({ min: 0, max: 50 })),
      backgroundColor: "rgb(0 177 136)",
      stack: "Stack 0",
      datalabels: {
        color: "#fff",
        font: {
          size: 16,
        },
      },
    },
    {
      label: "Missing",
      data: labels.map(() => faker.datatype.number({ min: 0, max: 50 })),
      backgroundColor: "rgb(0, 177, 136, 0.2)",
      stack: "Stack 0",
      datalabels: {
        font: {
          size: 16,
        },
      },
    },
  ],
};

export default function App() {
  return <Bar options={options} data={data} plugins={[ChartDataLabels]}/>;
}

ChartDataLabels is globally active for some reason

1 Answers1