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>
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:
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.
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>
Can Anyone help on that ?
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,
In the current implementation of the Kendo Chart, I'm utilizing the "panable" feature to enable movement of the chart horizontally. However, after zooming, I would prefer to utilize scrollbars instead of dragging to navigate through the chart. I would like to request a feature that allows for this behavior.
Thank you for your consideration.
Hi,
Please provide an option that allows forcing the chart to use whole numbers for its value axis when zooming in or out. It's not something uncommon to have charts that can't have decimals (eg. number of people).
Thank you
Currently, the Radar Chart cannot be zoomed in/out. Please, provide a zoomable property that would allow the developer to achieve this functionality.
Hi,
Can you improve the behaviour of AxisDefaultLabels content to automatically use multiple lines when labels are overlapped instead of split them manually by using the function ?
Actual :
Expected :
Thank you for your consideration.
Hi Kendo Theme,
The current behavior will re-render the Chart and the tooltip or crosshair disappear and the user will need again to hover over the series. This behavior can be observed in the following example:
https://stackblitz.com/edit/angular-dmpexe-sf8zoj?file=src%2Fapp%2Fapp.component.ts
The desired behavior would be to keep the popup open or the crosshair present when updating the data.
Thank you for your consideration.
Hi,
Is it possible to have synchronized crosshairs for the category axis when there are two or more chart panes in the same chart?
The desired effect I would like to have would look something like this (attached in kendo crosshair.png). Even better if a tooltip can also appear in the other chart pane at the same time (the one not being hovered over).
So far, I have seen that this isn't possible based on this post elated post for jQuery: https://www.telerik.com/forums/stacked-plot-with-separate-y-axis
What I have tried so far to no avail is to take the chart's plotAreaHoverEvent: https://www.telerik.com/kendo-angular-ui/components/charts/api/PlotAreaHoverEvent/, grab the instance of the chart (event.sender) and try to look for a way to make the other chart pane's crosshair appear, but it appears this isn't doable as the crosshair appears to only be rendered when the mouse enters the chart pane area.
Thanks!
Currently, the width property is available only for horizontally oriented legend:
Provide an option to set the width of the legend when orientation is set to vertical.