How to fix the cutting graph in ESM build?

[golubvladimir]

Expected Behavior

I want to display a bar chart of 158 values,

Current Behavior

But a cut occurs at 110.

Possible Solution

Steps to Reproduce

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js3'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels';

export default {
  props: ['items'],
  mounted() {
    var ctx = document.getElementById('myChart');

    const dataGraph = {
      labels: this.items.map(item => item['date']),
      datasets: [
        {
          data: this.items.map(item => item['actual'] || item['forecast'] || 0),
          backgroundColor: '#698ED1'
        }
      ]
    };

    const optionsGraph = {
      maintainAspectRatio: false,
      animation: {
        duration: 0
      },
      legend: {
        display: false,
      },
      scales: {
        x: {
          grid: {
            color: '#000'
          }
        },
        y: {
          ticks: {
            display: false
          },
          grid: {
            color: function(context) {
              return '#000';
            }
          }
        }
      },
      // plugins: {
      //   datalabels: {
      //     color: '#768CB7',
      //     font: {
      //       family: 'Roboto',
      //       size: '11',
      //       weight: '700'
      //     },
      //     anchor: 'end',
      //     align: 'top',
      //     textAlign: 'center',
      //     offset: '-3',
      //   }
      // }
    };

    Chart.register(...registerables);
    //Chart.register(ChartJsPluginDataLabels);

    var myChart = new Chart(ctx, {
      type: 'bar',
      data: dataGraph,
      options: optionsGraph
    });
  }
}
</script>

Context

I tried the same with the second version but got the same error.
When I use ChartJsPluginDataLabels, I have error: Cannot read property 'skip' of undefined

Environment

• Chart.js version: 3.5.1
• Browser name and version: Chrome
• Demo - https://codesandbox.io/s/broken-star-1yyjf?file=/pages/index.vue

[LeeLenaleee]

Seems like a duplication of #8309 also there is no version 3.5.1 of the lib, the latest version of chart.js is 3.3.2

[etimberg]

This is likely a problem with the canvas size; if you have a fiddle that reproduces this issue I can take a look and confirm.

[golubvladimir]

@etimberg I imported Chart .js like this

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
console.log(Chart.helpers) // undefined   

Helpers is external file

[kurkle]

Is your datalabels plugin version compatible with chart.js v3?

[golubvladimir]

@kurkle I don't use it.
My code

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js'
import * as helpers from 'chart.js/helpers';

export default {
  props: ['items'],
  mounted() {
    const ctx = document.getElementById('myChart');

    const dataGraph = {
      labels: this.items.map(item => item['date']),
      datasets: [
        {
          data: this.items.map(item => item['actual'] || item['forecast'] || 0),
          backgroundColor: '#698ED1'
        }
      ]
    };

    const optionsGraph = {
      maintainAspectRatio: false,
      animation: {
        duration: 0
      },
      legend: {
        display: false,
      },
      scales: {
        x: {
          grid: {
            color: '#000'
          }
        },
        y: {
          ticks: {
            display: false
          },
          grid: {
            color: function(context) {
              return '#000';
            }
          }
        }
      },
    };

    const clipper = {
      id: 'fix',
      beforeDatasetsDraw: function(chart) {
        helpers.clipArea(chart.ctx, chart.chartArea);
      },
      afterDatasetsDraw: function(chart) {
        helpers.unclipArea(chart.ctx);
      }
    };

    Chart.register(...registerables);
    Chart.register(clipper);

    const myChart = new Chart(ctx, {
      type: 'bar',
      data: dataGraph,
      options: optionsGraph
    });
  }
}
</script>

I tried use plugin, but it did'nt work.

[golubvladimir]

It doesn't work

    window.Chart.helpers.clipArea = function() {};
    window.Chart.helpers.unclipArea = function() {};

[golubvladimir]

It doesn't work

import Chart from 'chart.js/dist/chart';

    Chart.helpers.clipArea = function() {};
    Chart.helpers.unclipArea = function() {};

    const myChart = new Chart.Chart(ctx, {
      type: 'bar',
      data: dataGraph,
      options: optionsGraph
    });

[kurkle]

I'm not going to create a reproduce for you, but this could work:

import * as helpers from 'chart.js/helpers';
helpers.clipArea = function() {};
helpers.unclipArea = function() {};

[golubvladimir]

@kurkle Cannot set property clipArea of #<Object> which has only a getter

[golubvladimir]

In new version class Chart dont't have

    static helpers: {
        [key: string]: any;
    };

[kurkle]

Bug reports MUST be submitted with an interactive example:
https://codepen.io/pen?template=BapRepQ

I'm guessing codepen does not cut it in this case, so you might want to use codesandbox or equivalent with a build step.
If you can't do that, then you'll need to fugure out yourself how to replace the two functions with empty body with your toolchain.

[golubvladimir]

@kurkle
https://codesandbox.io/s/broken-star-1yyjf?file=/pages/index.vue
https://github.com/golubvladimir/nuxt-chartjsv3-scroll