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.

Hi,

I have prepared a forked stackblitz example for a navigator selection with a shared tooltip:

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

(I also included a screenshot)
There seems to be now way to have a shared tooltip in this scenario that makes sense, clearly no one needs the duplicated items in the tooltip that origins from the navigator selection pane.

So I would propose a flag for a pane to configure if a pane is included in the shared tooltip.

Or alternatively on the series item level a flag that allows for enable / disable or visible / invisible regarding the shared tool tip.

I think there are other cases where this might come handy to have a shared tooltip for several serieses only over one pane, or exclude specific panes and or serieses.

I tried to make the tooltip invisible, on the series level of the navigator pane but something like:

[tooltip]="{ visible: false }"

inside the navigator series seems to be only applicable to the current series tooltips but not the shared ones.

I need to change the background of an area chart at certain values. 

I want to display critical threshold. It could be like in the attached photo with some gradient but normal color blocks or even just some straight lines at the thresholds would be okay. Is there any option to achiev something like that?

We have enjoyed using Kendo UI and the chart tooling that is provided, but our business cases are beginning to need advanced data visualization beyond the chart types currently available.

The additional chart types we need are:

• Marimekko Chart
• Parallel Sets
• Alluvial Diagram
• Waterfall Plot (not the same as the waterfall chart currently available, which is great too!)
• Lollipop Chart

This feature request is already logged in the Kendo UI for jQuery portal and upon implementation would be nice to bring the feature also to Kendo UI for Angular Charts.

https://feedback.telerik.com/kendo-jquery-ui/1358671-support-quarters-in-date-series-just-like-weeks

We have noticed that the labels on the y-axis are rendered too close together, almost touching each other. This can be configured by setting the step option.

However, it could be ideal in such cases for the step to be determined automatically by the Chart based on the available space (similar to the rotation option which rotates the label, but in this case to control the step).

Please provide an option to automatically render the labels based on the available space.

We've already implemented several Kendo Chart performance optimization techniques, including:

• Canvas Rendering.
• Inline Series Binding.
• Disabling Animated Transitions.
• Disabling Gradients.
• Hiding Minor Grid Lines.
• Date Grouping using Category Axis in Date Mode.

However we are still experiencing issues when using large amounts of data.

Hi team,

Please provide an animate property part of the Tooltip interface and all tooltip-related components:

https://www.telerik.com/kendo-angular-ui/components/charts/api/TooltipComponent/

https://www.telerik.com/kendo-angular-ui/components/charts/api/ValueAxisCrosshairTooltipComponent/

https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesTooltipComponent/

..etc

Currently, the tooltip animations can be disabled through the tooltipInstance.tooltip property of the Chart reference:

@ViewChild('chart') public chart: ChartComponent;
ngAfterViewInit() {
    this.chart.tooltipInstance.animate = false;
}

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>

I would like to request a component similar to the old TreeMap widget, but with some added functionality.  It would be great if there were native functionality in the component to drill deeper into a hierarchy rather than always having to look at the top level view (i.e. clicking a sub node would "zoom in" to view it as the new root level node).

This example treemap and sunburst (implemented using d3.js) are along the lines of what I'm suggesting.

http://mbostock.github.io/d3/talk/20111018/treemap.html 
http://bl.ocks.org/mbostock/4348373

Hi,

Please provide an ability to set the axis range in the drag/zoom events.

Thanks

Please provide the Charts selection functionality for vertical category axis as well.

thank you

I want to align the Chart Plot Area on the left side (similar to the position property of the Legend component).

Currently, the same can be achieved only with the Drawing API in render event handler. Here is an example:

https://stackblitz.com/edit/angular-ucwo6p

Providing a built-in position option for alignment of the Plot Area will be an easier and intuitive appraoch. 

Thanks.

It would be great if your pan and zoom had sliders to more easily navigate a long duration chart.  

See these couple examples: https://www.amcharts.com/demos/line-chart-with-range-slider/  https://www.amcharts.com/demos/zoomable-value-axis/