Funnel Shrinking

Top (default)

Code

export const top: ChartConfiguration<'funnel'> = {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
        shrinkAnchor: 'top',
      },
    ],
  },
  plugins: [ChartDataLabels],
};

Top (0.5 fraction)

Code

export const top5: ChartConfiguration<'funnel'> = {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
        shrinkAnchor: 'top',
        shrinkFraction: 0.5,
      },
    ],
  },
  plugins: [ChartDataLabels],
};

Top (0.25 fraction)

Code

export const top25: ChartConfiguration<'funnel'> = {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
        shrinkAnchor: 'top',
        shrinkFraction: 0.25,
      },
    ],
  },
  plugins: [ChartDataLabels],
};

Middle

Code

export const middle: ChartConfiguration<'funnel'> = {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
        shrinkAnchor: 'middle',
      },
    ],
  },
  plugins: [ChartDataLabels],
};

Bottom

Code

export const bottom: ChartConfiguration<'funnel'> = {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
        shrinkAnchor: 'bottom',
      },
    ],
  },
  plugins: [ChartDataLabels],
};

None

Code

export const none: ChartConfiguration<'funnel'> = {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
        shrinkAnchor: 'none',
      },
    ],
  },
  plugins: [ChartDataLabels],
};