Description

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.

Steps To Reproduce

1. Create a new Angular application
2. Add the Kendo UI Chart and paste the following code in the app.component.ts file:

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" },
  ];
}

3. Run the application

Screenshots or video

Actual Behavior

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.

Expected Behavior

The Tooltip position should move with the cursor as seen in the screen recording below:

https://stackblitz.com/edit/angular-sdmdrbjt-5yunmeo2

Currently, in Kendo UI for Angular Charts, when using multiple axes of the same orientation (e.g., two Y axes), only the major grid lines of the first axis are displayed. The grid lines of the second axis (Y2) are ignored, even if enabled in the configuration. This limits the readability of multi-axis charts, as it is not possible to visually distinguish the graduations of each axis.

Add an option (for example, showGridLinesOnAllAxes: true) that would allow displaying major grid lines on all axes, not just the primary one.

The Kendo team suggests using plot bands to simulate the grid lines of the second axis, but this solution is less convenient and requires manual configuration.

Below is a screenshot of what it might look like; the first graph shows what is currently possible, and the second shows what would be possible if this feature were added.

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>

When setting the color using a function, a TypeScript error will occur because the property expects a value of type string.

Type '(e: SeriesLabelsContentArgs) => string' is not assignable to type 'string'.

The color properties of the Chart components should support a callback to prevent such errors, as this is a valid feature to implement. The current workaround is to skip type checking.

          <kendo-chart-series-item-labels
            [color]="$any(labelColor)"
          >

Colour gradient on AreaChart would look great - see workaround below:

https://stackblitz.com/edit/angular-x1vrhq?file=app/app.component.ts

Provide support for dynamic label positions for the Donut chart.

Some labels to be displayed inside the Donut, and other (which couldn't fit) to be outside, similar to:

It will be a good addition to the chart types if the Marimekko Chart was introduced. This chart type is useful for visualizing categorical data distributions with variable column widths.

https://datavizcatalogue.com/methods/marimekko_chart.html

Implementing a Lollipop Chart type would improve data representation. This chart type enhances readability by combining a dot and a line to emphasize data points, making comparisons clearer.

https://datavizproject.com/data-type/lollipop-chart/

The introduction of an Alluvial Diagram chart type would be beneficial. This type of chart helps visualize changes in categorical data over different stages, supporting insights into process flows and transitions.

https://datavizproject.com/data-type/waterfall-plot/

The introduction of an Alluvial Diagram chart type would be beneficial. This type of chart helps visualize changes in categorical data over different stages, supporting insights into process flows and transitions.

https://datavizproject.com/data-type/alluvial-diagram/

Adding a Parallel Sets chart type would enhance data visualization capabilities. This type of chart effectively displays categorical data flows and relationships, making it useful for comparative analysis.

https://datavizcatalogue.com/methods/parallel_sets.html

I would like to modify the crosshair tooltip to display the interpolated y value for the given x position of the crosshair (see data below the chart)

https://stackblitz.com/edit/angular-gv97jtt9-zedgrxxy?file=src%2Fapp%2Fmy-chart%2Fmychart.component.html,src%2Fstyles.css

Hi Team

I was using Kendo UI for Angular to render a Sankey chart.

I checked with the technical support and currently there is no way to adjust the width of link lines in Sankey Chart API for Angular.

In many cases because of data , the link lines appear too big for the whole canvas and does not look good, leading me to use another chart types or alternate libraries.

Request you to please look into this and provide a way as soon as possible.

Thanks

Mohit

It will be a good addition to the Title element if the underlined text option is added.

Currently, it can be added to the font property, but it will break the background property:

https://stackblitz.com/edit/angular-j1wzef?file=src%2Fapp%2Fapp.component.ts

I would like to be able to use a texture, a pattern, or an image as the background of a Kendo chart.

One use-case where this would come handy is a stacked bar chart where all segments of the bar have the same color. A way to visually separate them could be via different textures.

See image below for an example reference:

The legend in the kendo charts has limited customization available via geometry and layouts (inherited from Group <- Element) using the visual property. But this does not allow a complete range of customization equivalent to html templates such as :

1. Table containing multiple information against each legend item. (eg : If the above legend consists of multiple items in a row could use Kendo grid in it).

2. No hyperlinks support in the text for routing to different pages on the UI or anywhere else.(eg : In the above Offline could be a hyperlink to navigate to other detailed page).

This point I think is important. Also an hyperlink (or maybe a click on an svg hide navigate to a separate legend in place).

3. Some other features supported in html such as sliders in a legend to display more info on icon click. (eg : clicking on an icon should expand the details for each legend item ).

4. Not sure if there is an svg support too. (eg:  In the above I would like to place an svg icon in place of circle geometry for colored indicators).

Also it would be much convenient to allow an html template inside the legend instead of coding geometries. The above points are in support for the need for a custom html template to be either accepted as the property of the legend or to allow to construct an html code under the <kendo-chart-legend></kendo-chart-legend>

We have this feature in Kendo Grid:

<ng-template kendoGridNoRecordsTemplate>
  <fa-icon [icon]="faCloudXmark" class="fa-2x"></fa-icon>
  <p>There is no data to display.</p>
</ng-template>

Currently, the label renders to the right:

However, it would be good to have an option to manage the alignment to the left, similar to the RTL mode:

Enhance the chart's Panes configuration to include support for displaying Heatmap charts.