chart.jsvue-cli

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:

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.

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')

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,
              }
          }]
        },
      });