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