minPointLength does not work correctly with stacked bar charts

[Glutexo]

If we have a stacked bar chart and want to see the zero values in it, we'd use the minPointLength option. If we have multiple zero values that would stack right one after another, only the first value is shown because they are not stacked correctly and are overlaping instead.

As you can see in http://jsfiddle.net/BND6t/

The second bar (Oranges) should have two zero stacks, one for Joe and one for Jane. But only the Joe's one is shown.

(Tested in Chrome and Firefox. Not fixed in master.)

[TorsteinHonsi]

Your suggested solution has a potential problem with stacked columns - what happens if we have ten series with 0 values and a minPointLength if 10? It would stack up to 100px. So any data above that would either be pushed up, or be covered altogether.

My suggestion is that we disable minPointLength for stacks, and in the docs rather encourage to use the tooltip.shared option so that the 0 values will be visible in the tooltip. Like http://jsfiddle.net/highcharts/BND6t/1/

What do you think about that?

[Glutexo]

I think that disabling minPointLength for stacks completely is not a good solution. Ten zero values stacked to the extent of 100 px is perfectly appropriate, if you set it up that way. If you don't want such behavior, then it is as simple as not using the minPointLength option, but why not to let users use it: It almost works, there is only a little glitch in the current implementation.

The suggestion with 0 values in the tooltip is good. With many categories the tooltips can grow unwantedly large though. I think that both cases, the minPointLength and the tooltip solution, have their applications.

[gildorwang]

+1 for the proposal from @Glutexo
In my scenario, I have several categories but only 3 series. So stacking them up to 30px is nothing at all. However, the shared tooltip solution is not good since when user see only one stack (one color) in the bar, he would assume the other series have value 0. Using the tooltip solution requires us to educate user to hover mouse on each bar to see the actual value. That's totally not practical and what's the use of chart at the first place? Please fix this!

[nljuba]

I see that this issue was submitted a long time ago, but I can still reproduce it with current version.

http://jsfiddle.net/rsPFu/

+1 for the proposal from @Glutexo

Any thoughts on this one?

[anuj-sahai]

Hi, just to add, this issue is quite troublesome. We have some data points with y values: 0~2000 (highest point 2000) on a stacked chart. Now, say a column is built of 5 stacks, with values [ 700, 1100, 10, 2, 8, 50, 60 ]. In this case, there is just a transparent stack for 10, 2 and 8 combined instead of atleast a pixel height (or minPointLength height). Setting minPointLength only gives a height to the stack on the bottom, the ones above are still blank. The charts also have drilldown, so it's even harder to click because the stack is not visible.

A point to note is that, when minPointLength is set to say, 5, then during the start animation when the chart appears, the low value stacks are visible but once the chart comes up fully, they disappear. So, it does appear like a bug.

Please find attached screenshots.

minPointLength: 0,

minPointLength: 5,

[anuj-sahai]

Never mind. Adding plotOptions: { column: { borderWidth: 0 } } to the chart fixed the issue, without needing minPointLength, as shown in issue #2996. Thanks.

[piercelive]

I also agree with @Glutexo.

I still think this should be addressed. Either as a bug, or as an added feature to allow the minPointLength to affect each series of a stacked bar chart.

See this fiddle: http://jsfiddle.net/gpierce90/qj3ty0hn/
For category A, I expect 4 bars to show with each width equal to the minPointLength.

[pawelfus]

Possible workaround: http://jsfiddle.net/qj3ty0hn/7/

function fixMinPointLength(e) {
    console.log(this);
    var chart = this,
        series = chart.series,
        sLen = series.length,
        mpl = chart.options.plotOptions.bar.minPointLength,
        mplValue = chart.yAxis[0].toValue(chart.yAxis[0].toPixels(0) + mpl, true),
        compareTranslations,
        sum, i, posNeg, s;
    for (j = sLen; j > 0; j--) {
        s = series[j - 1];
        s.translations = [];
        H.each(s.data, function (p) {
            posNeg = p.y < 0 ? 0 : 1;
            if (!s.visible) {
                s.translations.push(
                [0, 0]);
            } else if (p.y < 0) {
                s.translations.push(
                [p.x < mplValue ? mpl : p.shapeArgs.height, 0]);
            } else {
                s.translations.push(
                [0, p.x < mplValue ? -mpl : -p.shapeArgs.height]);
            }
            sum = 0;
            for (i = sLen - 1; i > s.index; i--) {
                compareTranslations = series[i].translations; //get previous translations
                sum += compareTranslations[p.x][posNeg];

            }
            if (p.graphic) {
                p.graphic.attr({
                    transform: 'translate(0, ' + sum + ')'
                });
            }
        });
    };
}

Far away from perfect solution: tested only with bar chart, unique minPointLength for separate series also not supported. But it shows general idea for workaround.

[TorsteinHonsi]

Here's also a possible fix, we may add it to the core but I want some discussion first.

Check out http://jsfiddle.net/highcharts/xkbz6mrs/.

Question:

• The Y axis labels are now completely bogus because the stacks are off. Is this really what you want? Note that the normal value in between small values is also off.
• With the suggested implementation we go in before translation, so we need to put a value instead of a pixel value. Is that acceptable?

[piercelive]

Thanks a lot for looking into this. It appears I can work with this code to fit my needs. For my purposes, I'm okay with the y-axis labels not being as accurate in this case.

If it would be possible to use a pixel value instead of value, that would make things easier. Specifying a minPointLength would guarantee the bar to be visible. If the highest value on the chart is too large, the minPointValue could still be invisible.

This is what it looks like when the highest value is too high for the minimum value to be visible.
http://jsfiddle.net/gghfymd6/

[rajeshSilpa]

Can someone look into this issue? This is very crucial issue for me. please do the needful.

[Jmaharman]

I find it all strange, what is the point in minPointLength if it is not enforced as such, stacked or otherwise.

I understand why there are reservations against it, but if someone is using minPointLength you would expect them to not be as interested in the scale anyway, otherwise why would you even want to use it?

Although a shared tooltip can help in some circumstances, in others it is not satisfactory, as you would have to hover over any of the stacks to see whether they have a value, rather than being able to see it immediately. The other problem it doesn't solve is the ability to interact with it, i.e. click the bar, which we need to do unfortunately.

Is there no patch we can apply to have this happen, whether it completely ruins the scale or not? It doesn't need to go into the codebase but just something others like all the users above could apply should they wish?

I did try your example of minValue but because our data is dynamic it's impossible to know ahead of time what would be an appropriate value. I have tried to adapt your example by using this.yAxis.toValue(minPointLength, true) to get a value that is reletive to the pixel length, however once you disable the larger series it leaves the much higher values in place.

I've spent numerous hours trying to resolve this myself but to no avail, any hints or tips of how to do what we have all been asking above would be appreciated @highslide-software .

[TorsteinHonsi]

So basically you are answering no to my question:

With the suggested implementation we go in before translation, so we need to put a value instead of a pixel value. Is that acceptable?

I'll have another look.

[TorsteinHonsi]

I did another effort, but have to leave it for now. This is what I've got so far: http://jsfiddle.net/highcharts/pdapwfrv/. Is this the way to go forward? Basically it moves all graphics to compensate for items lower in the stack. In the next run we also need to modify the scales.

[Jmaharman]

Ah so close, I've taken your great work and tweaked it slightly to suit our needs.

It takes into account visibility of a series and whether the y value of the otherPoint is null or not (which we were using when we didn't want to show the point at all).

http://jsfiddle.net/pdapwfrv/1/

Thank you Torstein!

P.S. your snippet tries to load your local highcharts, rather than a cdn

[Jmaharman]

Or this one without the console.log http://jsfiddle.net/pdapwfrv/2/

[sebastianbochan]

Seems that not work properly for some points: http://jsfiddle.net/d1zdm07e/3/. Morever stackLabels are not translated

[sebastianbochan]

Next example: http://jsfiddle.net/u8bn0jj0/, seems that minPointLength works well for 1+99 example but not 99+1.

[pawelfus]

I think you forget to set minPointLength: http://jsfiddle.net/u8bn0jj0/1/
Additionally, compare "Apples" and "Grapes" - both have the same values, but in a different order. To put it simply, first column is rendered and takes space so second doesn't have space since we display values up to 100%.

This demo explain better what really happens: http://jsfiddle.net/u8bn0jj0/2/ - column get minimum length, but are still translated according to the stacking. It's exactly as described here.

[aspunjabi]

Another issue with using minPointLenth in stacked charts: it borrows height from the stack immediately above it, so if I have values like (400k, 200k, 10k and 100), and I set a minPointLength of 10px, it increases the height of the (100) value, but the height of the 10k value decreases proportionately, such that now I can see values lower and higher than it. Seems like a flaw in the way minPointLength is implemented - it should not borrow height from any of the stacks above, and just increase the overall height to accommodate the non-zero value that needs to have some height.

[TorsteinHonsi]

Yes, that's just what the discussion above is about.

[AlexChirkin]

Hello, I have two similar graphics, vertical and horizontal.

In these graphs there are small values at which the signature is not displayed, in the vertical to solve this problem, I applied MinPointLength to the series and everything became as it should. In the horizontal in the jsfiddle all works as it should, and when I try to apply this option on the server, I just lose this series.

Before red series minPointLength: 100:

After:

http://jsfiddle.net/hooly/fhz7u0sk/39/

This happens only in the horizontal graph, the code for the vertical is almost the same, but everything works on it

[pawelfus]

Hi @AlexChirkin - let's continue discussion in #7516 - it looks like a separate issue.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[Glutexo]

😢

[ghous92]

@Glutexo @TorsteinHonsi - Hi Both Thank you for the above suggestion , In my scenario i wanted to hide the bar when the data is 0 in array , i was able to accomplished this one http://jsfiddle.net/ghous92/djnmr0f7/63/ , but now the problem which i am facing is i am using Angular Highcharts which is module based , i tried hard finding how to tweak wrap call back but was not able to do the same , Though there is one online suggestion given on stack overflow https://stackoverflow.com/questions/63672410/extending-highcharts-in-angular but that is also not working , Can you please help here , it is one of the thing which stopping me to go ahead with licensed version.

[TorsteinHonsi]

@mateuszkornecki Can you help the gentleman? ☝️

[mateuszkornecki]

@ghous92
I recreated your demo with the highcharts-angular and it looks that it is working correctly.

Live demo:
https://stackblitz.com/edit/highcharts-angular-custom-plugin-6qknpl?file=src%2Fapp%2Fapp.component.ts

Please let me know if it is what you were looking for!

If you want to find more examples with highcharts-angular usages I will encourage you to check out our online examples on the highcharts-angular repository.

More examples:
https://github.com/highcharts/highcharts-angular#online-examples

[ghous92]

@mateuszkornecki _ Thank you so much for helping out .Though there seems to be few issues , i am trying to check for solution , I need the use case for neg stacked chart (pyramid chart too )
@TorsteinHonsi - Thank you :)