Chart.js: min-height for bars in bar chart

[barsh]

It's very difficult to get your mouse in the right spot to make the tooltip to appear in the screenshot below. Is there a way to set the min-height to say 5px?

Here's the example, try to get the tooltip to appear.
http://codepen.io/barsh/pen/grXXVO

[cidylle]

Also need help on this. Any progress on a solution ?

[simonbrunel]

@barsh @cidylle: #3400 does not implement the min-height but brings some solutions to that case (see the new tooltip mode and intersect options).

[cidylle]

@simonbrunel Thanks a lot for your input. Do you mean to use a different mode for the tooltip that would show these values?

In my case the bar would not even appear on the chart (even a pixel of it) if the smallest values are less than 1% of the biggest values in the datasets. So there's actually nothing to hover over even if the data is actually there, it appears as it is 0.

Would love a clarification or a hint if possible for these use cases. Thanks.

[barsh]

@simonbrunel I forked the codepen listed above and experimented with the mode and intersect options but I couldn't see see any difference. Suggestion: maybe you could fork it try your fix? http://codepen.io/barsh/pen/grXXVO

[simonbrunel]

@barsh the new tooltip options will be released in version 2.4, available in the next few days. I uploaded a custom build for testing: http://codepen.io/anon/pen/qqBNgd ({mode: 'index', intersect: false}). Do you think that can be an acceptable solution to your reported issue?

@cidylle yes, but mainly by using intersect: false that doesn't require to hover the (almost inaccessible) bar. These new options haven't been released yet (but very soon).

[cidylle]

@simonbrunel What would happen in the case of a stacked chart with intersect: false?

Also you mentioned this would work for of an almost inaccessible bar. In my case the bar does not show up (for values too small relative to max value). Would the enhancements work in that case? Is there any way to show just a line to indicate to the user that there is at least a non-zero value there ?

For example this other charting library shows a line you can hover over even for values that are extremely small. That is the behavior I would like in chart.js, however for the same set of values, no bar or line shows up.

[simonbrunel]

@cidylle you can use this fiddle to experiment the new modes / intersect options with a stacked bars containing value '0'. I hope it will give you a good idea of these new features.

The minHeight idea (or alternatives) still open for discussion of course :) @chartjs/maintainers

[cidylle]

Any updates/plans for a PR for the minHeight idea? Would be really useful.

[etimberg]

I'm not sure what the best way to implement min height would be. A simple approach of simply rendering the bar larger in some cases would technically make the chart show incorrect information (the bar would look larger than it actually was until a user hovered over it and read the tooltip). That could be misleading.

Another option could be to have the y scale start at a negative value and fill to the bottom rather than filling to 0 (use a mode to toggle this, like how line fill is configurable)

[CharlesStover]

In my use case, I am using the data labels plugin to render the X-axis text atop the bar instead of in the axis. This makes the X-axis text unreadable without a minimum width. Misleading data is completely worth the trade-off of unreadable data.
Furthermore, I have event listeners bound to when the bar is clicked. It is impossible to click some bars that are rendering as 0 pixels (y value 1 out of a max of 10,500) and is extremely difficult to click bars that are only a few pixels tall. I think the click event listener functionality is the most readable for a minimum width.
I'm going to try extending the minimum to below 0 so as to force a larger bar, but I'm throwing in my vote for a minimum width, letting users harness it at their own risk.

[luckylooke]

+1 for min-height, due to design reasons.. here is what we get now

See the weird dots in small values? :/

With min-height I would expect this result

Thank you all ❤️ :)

[idevwebs]

Where are the bar heights set? I'd rather mod the code to set a min pixel value than have non-zero value bars that are completely invisible. Even the lowest value should have minimum visibility. Zero values are one thing, but non-zero values not visible on the chart...?

In this chart, the invisible bar value is not 0, but actually 1600, yet not visible.

A suggestion based on the attached image.

if lowest bar value height in pixels is < 1 (or something... border count?) bar height = bar value as % of first tick. In the above image, would make it 3px. Personally, I agree there should be a min-height option. That is what developers logically look for.

Please add min-height to datasets.

{
    label: 'Dataset Name',
    backgroundColor: '...',
    borderColor: '...',
    borderWidth: 1,
    minHeight: 5, // <----- px
    data: [1,2,3]
}

That would allow to handle the issue by calculation or just a static px.

UPDATE:

Found another post containing a plugin to handle 0 value bars. Modified it and is working to do what is needed.

        var showZeroPlugin = {
            beforeRender  : function (chartInstance) {
                var datasets = chartInstance.config.data.datasets;

                for (var i = 0; i < datasets.length; i++) {
                    var meta = datasets[i]._meta;
                    // It counts up every time you change something on the chart so
                    // this is a way to get the info on whichever index it's at
                    var metaData = meta[Object.keys(meta)[0]];
                    var bars = metaData.data;

                    for (var j = 0; j < bars.length; j++) {
                        var model = bars[j]._model;

                        if (metaData.type === "horizontalBar" && model.base === model.x) {
                            model.x = model.base + 2;
                        } 
                        if (model.base === model.y) {
                            model.y = model.base - 2;
                        }
                        if ((model.base - model.y)<3) {
                            model.y = model.base - 3;
                        }
                    }
                }
            }
        };
        Chart.pluginService.register(showZeroPlugin);