Chartjs-ChartJs x axis labels on waterfall chart

by

2👍

✅

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.

Leave a comment