How do I create a funnel chart in ChartJS 3.8.x

I'm trying to create a funnel with this chart, but I can't find a way to make it work. I'm using VueCLI (vue 2).

After doing npm install chart.js chartjs-chart-funnel an error appears on console even without importing the chart: Uncaught TypeError: Cannot read properties of undefined (reading 'helpers')

What I tried and the errors I get:

Setting my chart type to funnel:

this.chartLeads2 = new Chart(document.getElementById("graphLead2"), {
    type: 'funnel',
    data: {
        datasets: [{
            label: 'TOTAL LEADS',
            data: [this.data],
            fill: false,
            borderWidth: 1,
            datalabels: {
                anchor: 'end',
                align: 'right',
                clamp: true,
            }
        }]
    },
    plugins: [ChartDataLabels],
})

Gives: Error: "funnel" is not a registered controller.

Registering it inline as a plugin:

import ChartFunnel from 'chartjs-chart-funnel';

this.chartLeads2 = new Chart(document.getElementById("graphLead2"), {
    type: 'funnel',
    data: {
        datasets: [{
            label: 'TOTAL LEADS',
            data: [this.data],
            fill: false,
            borderWidth: 1,
            datalabels: {
                anchor: 'end',
                align: 'right',
                clamp: true,
            }
        }]
    },
    plugins: [ChartDataLabels,ChartFunnel],
})

Gives: TypeError: Cannot read properties of undefined (reading 'id')

Registering it as a plugin (with Chart.register(ChartFunnel)):

import ChartFunnel from 'chartjs-chart-funnel';
Chart.register(ChartFunnel)
this.chartLeads2 = new Chart(document.getElementById("graphLead2"), {
    type: 'funnel',
    data: {
        datasets: [{
            label: 'TOTAL LEADS',
            data: [this.data],
            fill: false,
            borderWidth: 1,
            datalabels: {
                anchor: 'end',
                align: 'right',
                clamp: true,
            }
        }]
    },
    plugins: [ChartDataLabels,ChartFunnel],
})

Gives: TypeError: Cannot read properties of undefined (reading 'prototype')

I'm not sure what I'm doing wrong, or what else I can try.

Solution

The GitHub for the package gives examples of how to initialise the plugin using ES Modules, which looks different to previous attempts - have you tried these approaches?

*"The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:"*

import Chart, { LinearScale, CategoryScale } from 'chart.js';
import { FunnelController, TrapezoidElement } from 'chartjs-chart-funnel';

// register controller in chart.js and ensure the defaults are set
Chart.register(FunnelController, TrapezoidElement, LinearScale, CategoryScale);

const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
      },
    ],
  },
});

Variant B:

import { FunnelChart } from 'chartjs-chart-funnel';

const chart = new FunnelChart(document.getElementById('canvas').getContext('2d'), {
  data: {
    //...
  },
});

So for you data something like:

import { FunnelChart } from 'chartjs-chart-funnel';
    
    const chart = new FunnelChart(document.getElementById('canvas').getContext('2d'), {
      data: {
        datasets: [{
          label: 'TOTAL LEADS',
          data: [this.data],
          fill: false,
          borderWidth: 1,
          datalabels: {
              anchor: 'end',
              align: 'right',
              clamp: true,
          }
      }]
    },
  });