3d column chart with scrollbar shows other points in top-left corner.

[marklofdahl]

Expected behaviour

http://jsfiddle.net/marklofdahl/r9j31ocn/
Behaves correctly in Highcharts 7.
No blue pixels in upper left of chart. Click on scrollbar animation shows column moving around from right to left, and vice versa.

Actual behaviour

http://jsfiddle.net/marklofdahl/r9j31ocn/
Highcharts 8.
Blue pixels representing points not in view are visible in upper left of chart. If you are very careful, you can even produce the tooltip by hovering over a specific pixel or 2. Click on scrollbar animation shows columns switching between plot area and this upper left corner.
There should not be visible blue pixels in upper left corner, and I should not be able to produce a tooltip by hovering.

Live demo with steps to reproduce

http://jsfiddle.net/marklofdahl/r9j31ocn/

Product version

Highstock 8

Affected browser(s)

Tested in Firefox, Chrome

[Izothep]

Hi @marklofdahl!

Thank you for reporting your issue. It looks that the problem is related to this b886b66 commit.

Internal Note:
I assume that the problem is related to setting min height of all columns to 1. It helps with the columns that are in visible area but cause related bug when columns are not visible. As a solution, the min height should be set only on columns that are in visible area.

[marklofdahl]

Any update on this bug? It doesn't appear to be fixed in Highcharts 8.2. Is there any workaround I can use?

[pawelfus]

No, it's still not fixed @marklofdahl

Could you try my workaround? Take a look:
Demo: http://jsfiddle.net/BlackLabel/ps8fxwc5/1/
Plugin:

(function(H) {
  H.wrap(
    H.seriesTypes.column.prototype,
    'drawPoints',
    function(p) {
      p.apply(this, Array.prototype.slice.call(arguments, 1));
      var extremes = this.xAxis.getExtremes();

      if (!this.visible) {
        return;
      }

      this.points.forEach(function(point) {
        if (point.x > extremes.max || point.x < extremes.min) {
          point.graphic.animate({
            opacity: 0
          });
        } else {
          point.graphic.animate({
            opacity: 1
          });
        }
      });
    }
  );


  H.wrap(
    H.seriesTypes.column.prototype,
    'translate3dShapes',
    function(p) {
      p.apply(this, Array.prototype.slice.call(arguments, 1));
      var extremes = this.xAxis.getExtremes();
      var series = this;

      if (!series.visible) {
        return;
      }

      series.points.forEach(function(point) {
        if (point.x > extremes.max || point.x < extremes.min) {
          point.shapeArgs.y = series.yAxis.len;
          point.shapeArgs.x = point.plotX;
        }
      });
    }
  );
})(Highcharts);

[marklofdahl]

Thanks for the response. The workaround fixes the issue, but introduces a different one. When scrolling the chart, the columns on the left/right edges are not shown when they would be partially in the view area. This looks quite strange when the label shows, but the column doesn't.

[pawelfus]

Good point! Added the same workaround to the data labels: http://jsfiddle.net/BlackLabel/ps8fxwc5/2/

Edit: It's still not perfect, it's just a workaround to hide the top left elements.

[marklofdahl]

Thank you. I appreciate the workarounds.

However, when I mouse-over where the hidden column would be, it draws the column (strange), but shifted down far lower than it should be (even stranger).

I realize this is a workaround - ideally the bug fix would still show the labels and columns if they are partially in the view area, like it did in the past.

[pawelfus]

Good point! Replaced attr({ opacity: 0/1 }) with show()/hide(): http://jsfiddle.net/BlackLabel/ps8fxwc5/3/

[marklofdahl]

Thanks for the update.
After discussing with other members of my team, I think we will live with the bug behavior until it is fully fixed. The workaround entirely hides the column if it is not 100% in the view area, and that behavior is more undesirable than the bug behavior of extra pixels showing in the upper left...

[marklofdahl]

Any chance this will be fixed in the next Highcharts release?
Thanks for all your hard work...

[KacperMadej]

@marklofdahl
I am sorry, but the chances are slim to none.
( FYI @Izothep )

[marklofdahl]

If you happen to have a workaround that fixes the issue, without changing other behaviors, it would be much appreciated. We are still affected by this bug. Thank you.

[Izothep]

Hi @marklofdahl!

I will work on the problem during the current/next week and hopefully we will find the workaround for this buggy functionality.

Best,

[marklofdahl]

Thank you! I appreciate it...

[Izothep]

@marklofdahl, could you please check if below code works for you?
https://jsfiddle.net/BlackLabel/48wu6xqr/4/

[marklofdahl]

Thanks for the fast response. Your example does work.
Interestingly, you have {plotOptions: {series: {borderWidth: 0}}}, which I was not using. If I don't use that option, the buggy behavior still happens.
But I can add that option to my code, and combined with your patch, it makes the problem go away in my app, so that is a good solution.
Thank you!

[Izothep]

Great to hear that! I will work more on preparing the full solution directly in Highcharts-3d code.

[Izothep]

Internal Note:

It looks that after changing borderLessBase to (shapeArgs)[d[0]] in below if statement:

if ((shapeArgs)[d[0]] < 0) {
          // If borderLessBase is smaller than 0, it is needed to set
          // its value to 0 or 0.5 depending on borderWidth
          // borderWidth may be even or odd.
          (shapeArgs)[d[1]] +=
          (shapeArgs)[d[0]] + borderCrisp;
          (shapeArgs)[d[0]] = -borderCrisp;
          borderlessBase = 0;
        }

the problem is not visible for columns with borderWidth as well.

If changing this if is not causing any other issues we may consider making this small change in the core code.

[marklofdahl]

Thanks for your continued work on this issue. I tried this change out on my project, and it appears to work fine.