Angular Kendo chart Plot Bands after zoom in / zoom out

[Samvel]

I have an Angular kendo chart, where I use the "[plotBands]" attribute, in order to have some part of my chart in another color. You can see it in the attached image.
If periods are highlighted (past/current periods), then after zoom, the chart component uses the original indexes and highlights the wrong periods.
picture chart1. (no zoom) : current period is 03-2020 (third period

After zoom, I have this image
picture chart2. With zoom: current becomes 07-2020 (the third one according to indexes).

 

 

So how can I show the real selected (03-2020 third period) part and hide it after zoom?
I have tested and found that it does not work only with the "kendo-chart-category-axis".
When I set "plotbands" to "kendo-chart-value-axis" and then zoom the chart, then it worked as expected<stdytrp-widget-1618841306601 style="all: unset; position:absolute !important;top:0 !important;left:0 !important;"></stdytrp-widget-1618841306601>

[Yanmario]

Hi Samvel,

I've noticed that this question is duplicated and answered earlier by our support.

For public knowledge, I will provide the same answer in this forum post.

The reason for the demonstrated behavior is that the PlotBand is configured to be displayed from one to another index of the category axis units:

 public categoryPlotBands: any[] = [
    {
      from: 1,
      to: 2,
      color: "#ffd246",
      opacity: 0.8
    }
  ];

However, when zooming and/or panning the Category axis units are recomputed and their indexes are no longer the same as initially.

https://www.telerik.com/kendo-angular-ui/components/charts/elements/plot-bands/#toc-custom-plot-bands

In the provided screenshots I see that you are using dates for the CategoryAxis divisions instead of strings as demonstrated in the provided example. If you are using dates indeed, then you could pass a specific date for the to and from properties and that will ensure the Plot band stays rendered for the same CategoryAxis division when zooming:

  public categoryPlotBands: any[] = [
    {
      from: new Date(2020, 7, 8),
      to: new Date(2020, 7, 9),
      color: "#ffd246",
      opacity: 0.8
    }
  ];

Please see the following updated example demonstrating this:

https://stackblitz.com/edit/angular-2sosv5-wvexuf?file=app/app.component.ts

I hope this helps.

Regards,
Yanmario Menev
Progress Telerik