[Bug]: Generating charts in for loop not working as expected

[jrahim54]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

When generating a list of graphs in a for loop, only the very last one is being generated.

          <div v-for="graph in graphs" :key="graph.title">
            <ChartLine
              :chartId="graph.title" class="chart"
              :chart-data="graph"></ChartLine>
          </div>

In the above the ChartLine component implements the LineChart below, but only the very last graph is generated and displayed, this was working in version 3.5.12 but not anymore. Below is my template for the chart.

<template>
  <new-chart
    :chart-options="chartOptions"
    :chart-data="computedChartData"
    :chart-id="chartId"
    :dataset-id-key="chartId"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

Reproduction

https://codesandbox.io/s/distracted-currying-jq6bh1?file=/src/App.vue

chart.js version

v3.7.1

vue-chartjs version

v4.0.4

Possible solution

No response

[zbateson]

This is happening to me too having two charts on the same page. I scoured through the documentation trying to figure out if I missed something and couldn't find anything obvious.

[apertureless]

Have you tried passing a unique chart-id ?

[zbateson]

I did, yes

[zbateson]

Here's some more info if it helps:

Edit: I can pare it down to just the chart-data and chart-id and still happens with two charts on the same page.

<bar-chart
          :chart-data="programChartData"
          chart-id="program-chart"
        ></bar-chart>

Second:

<bar-chart
          :chart-data="totalsChartData"
          chart-id="totals-chart"
        ></bar-chart>

In developer tools I can see both 'canvas' elements have different IDs:

<div class=""><canvas id="program-chart" style="box-sizing: border-box;" width="400" height="400"></canvas></div>

<div class=""><canvas id="totals-chart" style="display: block; box-sizing: border-box; height: 920px; width: 920px;" width="920" height="920"></canvas></div>

For some reason the width of the first one doesn't get set also (viewport is 920).

[thabarbados]

@jrahim54 @zbateson Can you provide a repo of your error? In my sandbox, charts in a loop are drawn without errors

[zbateson]

Hi @thabarbados -- thanks, I've copied what you've done and moved it over to recreate the issue. Looks like it might be 'legacy'/vue 2 related.

https://codesandbox.io/s/vue-chartjs-legacy-issue-2ntnh9