Pirsch Funnel Visualization Example (ChartJS)

sample.js

// Incomplete ChartJS demo code.

import {Chart} from "chart.js";
import {
    BarController,
    BarElement,
    CategoryScale,
    Chart,
    Filler,
    LinearScale,
    LineController,
    LineElement,
    PointElement,
    Tooltip
} from "chart.js";
import {FunnelChart, FunnelController, TrapezoidElement} from "chartjs-chart-funnel";

// Register ChartJS plugins (you probable don't need all of these).
Chart.register(
    LineController,
    BarController,
    CategoryScale,
    LineElement,
    BarElement,
    PointElement,
    LinearScale,
    Tooltip,
    Filler,
    FunnelChart,
    FunnelController,
    TrapezoidElement
);

function createChart(f) {
    // "f" is the funnel definition and data returned from the API.
    const labels = f.definition.steps.map(step => step.name);
    const data = f.data.map(step => Math.round(step.relative_visitors * 1000) / 1000);

    // Current period.
    const datasets = [
        {
            data, // from the API
            borderWidth: 2,
            fill: true,
            align: "right"
        }
    ];

    // For the comparison mode.
    if (previousData.length) {
        datasets.push({
            data: previousData,
            borderWidth: 2,
            fill: true,
            align: "right"
        });
    }

    chart = new Chart(canvas.value, {
        type: "funnel", // Plugin name.
        data: {
            labels,
            datasets
        },
        options: {
            scales: {
                x: {
                    stacked: true,
                }
            },
            maintainAspectRatio: false,
            animation: {
                duration: 200
            },
            plugins: {
                tooltip: {
                    enabled: false
                }
            }
        }
    });
}