Series Tooltip shown intermittently

[Aleksandr]

Hi Everyone,

I'm using Angular 6 and Kendo UI for Angular. 

When I have chart with more than one series item in it, tooltips are not shown. They are appear for a microsecond(you cant see the full content of a tooltip) then it disappears and then it is redrawn again. So every time I hover over the chart area, the tool tip is redrawn multiple times (it doesnt stop while I hover).

Any help would be much appreciated.

 

The component HTML is:

 

  <div class="row">
    <div class="col-lg-12 text-center pv-lg col align-self-center">
      <!-- <kendo-chart class="catProdSales" [transitions]="false"> -->
      <kendo-chart [transitions]="true">
        <kendo-chart-area background="none" [height]="height"></kendo-chart-area>

        <kendo-chart-tooltip format="Default Content {0}" [shared]="true">
        </kendo-chart-tooltip>

        <kendo-chart-legend position="right" orientation="vertical">
        </kendo-chart-legend>

        <kendo-chart-value-axis>
          <kendo-chart-value-axis-item>
            <kendo-chart-value-axis-item-labels culture="en-GB" format="c">
            </kendo-chart-value-axis-item-labels>
          </kendo-chart-value-axis-item>
          <kendo-chart-value-axis-item name="secondAxis">
            <!-- <kendo-chart-value-axis-item-labels culture="en-GB" format="c">
                      </kendo-chart-value-axis-item-labels>                   -->
          </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>

        <kendo-chart-category-axis>
          <kendo-chart-category-axis-item [labels]="categoryAxisLabelConf" [categories]="data?.LabelData.slice(1)" [axisCrossingValue]="[0, 1110]">
          </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

        <kendo-chart-series>
          <kendo-chart-series-item type="column" [data]="data?.ColumnData?.slice(1)" axis="secondAxis" name="Packs">
            <kendo-chart-series-item-tooltip>
              <ng-template let-value="value">
                {{ value
                < 1000 ? value : (value / 1000).toFixed(1) + 'k' }} </ng-template>
            </kendo-chart-series-item-tooltip>
          </kendo-chart-series-item>
          <kendo-chart-series-item *ngFor="let item of data?.LineData;" type="line" [data]="item.slice(1)" [name]="item[0]">
            <kendo-chart-series-item-tooltip>
              <ng-template let-value="value">
                {{ value
                < 1000 ? value : (value / 1000).toFixed(1) + 'k' }} </ng-template>
            </kendo-chart-series-item-tooltip>
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    </div>
  </div>

[Aleksandr]

The chart is redrawn every time Tooltips are enabled and mouse inside the chart area.

[Aleksandr]

This is what it looks like.

[Daniel]

Hello,

The problem occurs because of the way the data is set. Using the slice method in the binding will produce a new instance on each change detection. Because the options are changed, the chart will redraw itself on each change detection which occurs when the tooltip is shown. Processing the data in advance and binding the same data instance should fix the problem - example.

Regards,
Daniel
Progress Telerik