Chartjs-ChartJS 3 get height of stacked vertical bar

by

0👍

✅

The behaviour comes from this part in the code:

const properties = {
        horizontal,
        base: vpixels.base,
        enableBorderRadius: !stack || isFloatBar(parsed._custom) || (me.index === stack._top || me.index === stack._bottom),
        x: horizontal ? vpixels.head : ipixels.center,
        y: horizontal ? ipixels.center : vpixels.head,
        height: horizontal ? ipixels.size : undefined,
        width: horizontal ? undefined : ipixels.size
      };

It sets the height on undefined for normal bar charts and the width on undefined on horizontal bar charts. Putted in a pr (https://github.com/chartjs/Chart.js/pull/9208) for fix so this should be fixed by the next release of chart.js

Then to get the bar height you have to change your mode to index and then you can use this function to get the total bar height:

onClick: function(event) {
        var bar = this.getElementsAtEventForMode(event, 'index', {intersect: true}, true);
        if (!bar.length) return; //return if not clicked on bar
        var barHeight = bar.reduce((acc , val) => (acc + val.element.height), 0)
        document.getElementById('myHeight').innerHTML = barHeight;
      }

Example: https://codepen.io/leelenaleee/pen/qBrpLjX

Leave a comment