ChartJs x axis labels on waterfall chart

Question

Using ChartJS is it possible to force the chart to display X Axis labels for each dataset? Below my attempt at reproducing waterfall chart using chart js library. As you can see there are no labels for each of the bars on the datasets. Is it possible to turn them on?

 var ctx = document.getElementById("myChart").getContext('2d');
        const dat = {
            datasets: [
                {
                    label: 'Purchase Price',
                    data: [750],
                    backgroundColor: '#d29baf',
                    stack: 'stack 1',
                },
                {
                    data: [200],
                    waterfall: {
                        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',
                },
            ],
        };

        var chart = new Chart(ctx, {
            type:'bar',
            plugins: [chartjsPluginWaterfall],
            data: dat
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-waterfall.min.js"></script>

<div>
<canvas id="myChart"></canvas>
</div>

uminder uminder · Accepted Answer · 2020-05-10T06:11:36

You could get rid of chartjs-plugin-waterfall and use floating bars instead where individual bars may be specified with the syntax [min, max]. This feature is available since Chart.js v2.9.0.

You will then have to overwrite the default value shown in the tooltip by defining the following callback function.

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      const v = data.datasets[0].data[tooltipItem.index];
      return Array.isArray(v) ? v[1] - v[0] : v;
    }
  }
},

Please have a look at the code sample below.

new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['Purchase Prise', 'Opening Loan Blance', 'Initial Cash Investment'],
    datasets: [{
      data: [750, [200, 750], 200],
      backgroundColor: ['#d29baf', '#bb6987', '#a53860'],
      barPercentage: 1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          const v = data.datasets[0].data[tooltipItem.index];
          return Array.isArray(v) ? v[1] - v[0] : v;
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 400px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>

If you prefer a generic approach, please check my answer I gave to a similar question.

ChartJs x axis labels on waterfall chart

1 Answers