This is a migrated thread and some comments may be shown as answers.

Angular Kendo chart Plot Bands after zoom in / zoom out

1 Answer 10 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Samvel
Top achievements
Rank 1
Samvel asked on 19 Apr 2021, 02:10 PM

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>

1 Answer, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 21 Apr 2021, 07:51 AM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
Charts
Asked by
Samvel
Top achievements
Rank 1
Answers by
Yanmario
Telerik team
Share this question
or