When you move the cursor to a new series item, the tooltip position does not move until you leave the chart area and re-enter. It changes the content based on where the cursor is pointing, but does not change the position.
import { Component } from '@angular/core';
import {KENDO_CHARTS} from "@progress/kendo-angular-charts";
@Component({
selector: 'app-root',
imports: [KENDO_CHARTS],
template: `
<kendo-chart>
<kendo-chart-legend position="bottom"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item
type="donut"
[data]="data"
field="value"
categoryField="category"
colorField="color"
[holeSize]="60"
[tooltip]="{
visible: true,
format: '{0:C0}'
}"
[highlight]="{ visible: true }"
>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`,
})
export class App {
public data = [
{ category: "Electronics", value: 245000, color: "#0058e9" },
{ category: "Clothing", value: 189000, color: "#37b400" },
{ category: "Home & Garden", value: 156000, color: "#f59c1a" },
{ category: "Sports", value: 134000, color: "#ff6358" },
{ category: "Books", value: 98000, color: "#8c43ff" },
{ category: "Toys", value: 78000, color: "#00acc1" },
];
}
The Tooltip position only changes when you leave and reenter the Chart area. It does not change when you move the cursor from one series item to other, it updates the content displayed in the Tooltip though.
The Tooltip position should move with the cursor as seen in the screen recording below:
Hello ,
Kindly Have issue with stacked bar when try to draw two items in chart with specified with as the below
<kendo-chart-series>
<kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[97]">
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[7]">
</kendo-chart-series-item>
</kendo-chart-series>
Hi,
This documentation Stackblitz demo is broken (see screenshot below for details).
Expected: Clicking on an item in the legend is supposed to toggle it's visibility.
Using kendo-angular-charts 5.1.0, if you add a series input, this does not happen. A full, minimal reproduction of this issue is available At the StackBlitz link below. The top chart has no issues (hides series upon clicking) while the bottom does.
https://stackblitz.com/edit/angular-5it8qu?file=app%2Fapp.module.ts
Screenshots of above repro:
It appears that there is a line deep in the codebase that says:
const seriesComponent = this.seriesComponents.get(index);
if( !seriesComponent ){ return; }
seriesComponent.toggleVisibility();And the seriesComponents array is empty when you use the [series] binding.
We even went so far as to bind to the legend click event and toggle the visibility myself, but it is 100% ignored.
It was something like:
public onLegendClick(event: LegendClickEvent){
event.series.visibility = !event.series.visibility;
event.source.refresh();
event.source.changeDetector.markForCheck();
}Calling refresh did redraw the chart, but it was still visible/enabled. Even though digging into it with ng.getComponent on the kendo-chart, and looking at the series, it clearly showed series[0].visible to be false.
I had to make an assumption on version for this ticket since the dropdown on the bug report doesn't list 5.1.0. I wouldn't mind tips on understanding how to match up your marketing version name with your npm version. I spent 20 minutes looking around for that, but your versioning doc and release history don't seem to have anything about the actual version numbers used by package management.
Describe the bug
The <kendo-chart-series-item> component is missing settings for median and mean elements rendered by Box Plot series.
These are the two lines within each box (dashed line is mean):

Expected behavior
These series elements should be customizable and should accept an object containing color, width, dashType and opacity.