Chart.js. Values in a big range. The smallest values are not available

Question

I use Chart.js (http://www.chartjs.org) to show traffic usage for different units using Bar Chart. If I have big range of usage (1 unit 2.5GB, 2 unit 2.5MB, 3 unit 2.5kB, 4 unit 0B) smallest values are not available (I cannot hover over or click on them) when bring them to one value, say to the GB (2.5,0.0024,2.38E-6,...,0) or MB (2560,2.5,0.0024,...,0). Please all ideas how to display them on one chart to maintain the proportions and the ability to click and hover over on each Bar (even 0)

Thanks in advance

Answer 1

ability to click and hover over on each Bar

Unfortunately, bars don't have a pointHitDetectionRadius equivalent. But you can override the inRange function for Chart.Rectangle to give a little more vertical detection range.

Chart.Rectangle.prototype.inRange = function (chartX, chartY) {
    return (chartX >= this.x - this.width / 2 && chartX <= this.x + this.width / 2) && (chartY >= this.y && chartY <= (this.base + 5));
};

I've extended the vertical area 5 units downward from the x axis, but you could change it to above the axis as well (just subtract it from this.y)

Fiddle - https://jsfiddle.net/etLfr9ka/

Please all ideas how to display them on one chart

As long as you don't set barShowStroke to false you would see a stroke for even 0 values.

The alternative would be pick a framework that supports logarithmic scales or one that allows you to split the y scale into sections - however IMO this would be a bad idea.