search

telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
466 stars 215 forks source link

Zooming through selection behavior in multiple panes chart won't synchronize whole panes #3561

Open winstonitgf opened 2 years ago

winstonitgf commented 2 years ago

zooming won't synchronize multiple panes at the same time I can synchronize multiple panes by zooming in through mouse-wheel perfectly, but can not through selection behavior, it's will only zoom in the particular pane chart that I selected.

To Reproduce


 <kendo-chart [pannable]="true" [zoomable]="{ mousewheel: { lock: 'y' }, selection: { lock: 'y' } }"
    [ngStyle]="{'height': dimentionHeight}" *ngIf="seriesData.length > 0">
    <kendo-chart-pane-defaults>
      <kendo-chart-pane-defaults-title font="700 18px sans-serif" position="center">
      </kendo-chart-pane-defaults-title>
    </kendo-chart-pane-defaults>
    <kendo-chart-panes>
      <kendo-chart-pane name="{{x}}" [clip]="false" title="{{x}}" [height]="150" *ngFor="let x of seriesDimentions">
      </kendo-chart-pane>
    </kendo-chart-panes>
    <kendo-chart-value-axis>
      <kendo-chart-value-axis-item name="{{x}}" pane="{{x}}" *ngFor="let x of seriesDimentions">
        <kendo-chart-value-axis-item-labels [visual]="labelVisual" step="5">
        </kendo-chart-value-axis-item-labels>
      </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>

    <kendo-chart-series *ngFor="let x of seriesDimentions">
      <kendo-chart-series-item axis="{{x.axe}}" categoryAxis="{{x.axe}}" *ngFor="let x of seriesData" [stack]="true"
        opacity="0.5" [data]="x.items" field="value" categoryField="Date" type="line" [highlight]="{ visible: false }"
        [markers]="{ visible: false }">
        <kendo-chart-series-item-tooltip>
          <ng-template let-value="value" let-category="category">
            <div>{{x.axe}}_{{x.value}}: {{ value }}</div>
            <div>{{category | date:"shortTime"}}</div>
          </ng-template>
        </kendo-chart-series-item-tooltip>
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-category-axis>
      <kendo-chart-category-axis-item [labels]="{ format: 'HH:mm' }" [maxDivisions]="24" name="{{x}}" pane="{{x}}"
        *ngFor="let x of seriesDimentions">
      </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
  </kendo-chart>

Expected behavior I can zoom in through selection behavior in any pane, and will synchronize all panes by the selection range at the same time.

Browser

tsvetomir commented 2 years ago

Thanks for reporting this problem. The axis range should be synchronized for both mousewheel and selection zoom.

Add a runnable example based on your snippet for reference.

winstonitgf commented 2 years ago

Thanks for reporting this problem. The axis range should be synchronized for both mousewheel and selection zoom.

Add a runnable example based on your snippet for reference.

@mbechev @tsvetomir thanks for your reply. The runnable example still can not be synchronized for selection zoom. I can not find anything useful information on document that can fix this problem.