chart.js plugin for making waterfall charts

Question

I want to create a chart.js plugin to create waterfall charts.

I am new to working with chart.js. I was thinking to extend the bar-chart to create a waterfall chart.

Answer 1

I created a chartjs plugin for waterfall charts.

See https://github.com/MartinDawson/chartjs-plugin-waterfall

This plugin works by checking if any of your datasets contain a property called dummyStack that is set to true. The stack property must be used in conjunction with dummyStack for this plugin to work properly. If dummyStack is true then it hides the label, tooltip and sets the color invisible. When you use stacking with this it creates the affect of a floating bar as shown in the image above that we can use for waterfall charts as chartjs-2 doesn't support waterfall charts by default.

import waterFallPlugin from 'chartjs-plugin-waterfall';

var chart = new Chart(ctx, {
    plugins: [waterFallPlugin]
});

const data = {
  datasets: [
    {
      label: 'Closing Costs',
      data: [50],
      backgroundColor: '#e8cdd7',
      stack: 'stack 1',
    },
    {
      label: 'Purchase Price',
      data: [700],
      backgroundColor: '#d29baf',
      stack: 'stack 1',
    },
    {
      data: [200],
      dummyStack: true,
      stack: 'stack 2',
    },
    {
      label: 'Opening Loan Balance',
      data: [550],
      backgroundColor: '#bb6987',
      stack: 'stack 2',
    },
    {
      label: 'Initial Cash Investment',
      data: [200],
      backgroundColor: '#a53860',
      stack: 'stack 3',
    },
  ],
};

It also has line steps from bar to bar.