Multiple charts

[rogiervandongen]

When using multiple graphs on a single page and only configure the datalabels for use on a single dataset (no globals, no chart wide configuration) in one specific graph, the datalabels implementation crashes and keeps the rest of the javascript code fro running due to an error on the following:

var expando = chart[EXPANDO_KEY];

This evaluation, hence the variable "expando" will be undefined.
Any code depending on this variable, or the existence of chart[EXPANDO_KEY], will inherently fail.

I personally ended up by adding "if (expando === undefined) {return;}" after each of these calls for my report pages to continue working as intended.

Please resolve

[simonbrunel]

Please provide a jsfiddle that reproduces your issue.

[simonbrunel]

@rogiervandongen can you post a jsfiddle or a link to the code that generates this issue?

[simonbrunel]

Closing because no test case provided. Feel free to reopen with the code that reproduces this issue.

[cifuentesmx]

I'm experiencing the same problem. Is this still relevant in 2021? should I open a new issue?

[simonbrunel]

Hi @RobertoCifuentes. I don't know if it's still relevant because I haven't been able to reproduce the error reported by @rogiervandongen. If you think it's the same issue, you can post a fiddle or codepen or link to a repo that reproduces this issue. Make sure that you use the latest version (1.0.0 for Chart.js 2 or 2.0.0-rc.1 for Chart.js 3).

[cifuentesmx]

I debugged further and I believe it's related with my VUE implementation, so I'm closing this. Thanks!

[d-k-lippert]

Don't know if this is helping, but the error occurred when i had multiple charts. One chart used datalabels, the other didn't. Everytime I hovered over the chart, that didn't use datalabels triggered the error in the console. I believe the error is related with the registration of the ChartDataLabels. Once I switched from global to local registration the error didn't occure.
Here is an example for local registration:

<template>
  <Bar
    :options="chartOptions"
    :data="chartData"
    :plugins="[ChartDataLabels]"
  />
</template>
<script setup lang="ts">
import { Bar } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import ChartDataLabels from 'chartjs-plugin-datalabels'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

So deleting ChartDataLabels from ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ChartDataLabels) and passing it as property to the Bar-Component :plugins="[ChartDataLabels]" did the trick