Description: When 'shared' tooltip is enabled (tooltip: {shared: true}) keyboard navigation through chart triggers JavaScript error and tooltip on focus is not shown, neither shared nor regular tooltip. It works without issues when 'shared' is disabled, but when it is enabled errors are triggered.
Steps to reproduce:
Stack trace of the issue:
kendo.all.js:290271 Uncaught TypeError: Cannot read properties of undefined (reading 'format') at init.show (kendo.all.js:290271:1) at init._displayTooltip (kendo.all.js:302830:1) at init._focusFirstPoint (kendo.all.js:302653:1) at init._navigatePoints (kendo.all.js:302577:1) at init._keydown (kendo.all.js:302540:1) show @ kendo.all.js:290271 _displayTooltip @ kendo.all.js:302830 _focusFirstPoint @ kendo.all.js:302653 _navigatePoints @ kendo.all.js:302577 _keydown @ kendo.all.js:302540
Versions of KendoUI with the issue: 2024.2.514, 2024.3.806
Chart Series provide a toggleVisibility() method that allows to hide some data points of the series (or all of them) from the user. However, setting the first series to invisible breaks the chart's keyboard navigation.
This DOJO demonstrates the behavior: For the sake of simplicity, the first of the two series is toggled invisible right after the chart is rendered, but this may happen at any other point in time. Click anywhere in the DOJO's output area. Press TAB to focus the chart. The following error is logged in the browser console:
Uncaught TypeError: Cannot read properties of undefined (reading 'options') at init.focusVisual (kendo.all.min.js:9:4230266) at init._focusElement (kendo.all.min.js:9:4410242) at init._focusFirstPoint (kendo.all.min.js:9:4409100) at init._focus (kendo.all.min.js:9:4407358)
Dear support team,
we are facing an issue when trying to use "setOptions" to update a Chart.
It works fine when using a normal bar chart but seems to be broken when using stacked bars:
https://dojo.telerik.com/AKEWaLIR
Are we doing something wrong or is this a bug?
Charts support keyboard navigation. Currently, the focus indicator is rendered as a thick black border around the different chart items. Is there any way to customize it? We usually use dashed red borders throughout our application to indicate focused elements and it would be great to stay consistent.
I found this article which leverages the highlight and saw that the series.highlight.toggle setting allows modifying the highlight's visual element, but options are very limited and do not allow sufficient customization.
In the Kendo UI Chart Widget, if labels are too close to each other, they end up overlapping, making the labels unreadable (as visible in the attached screenshot), thus rendering the widget unusable.
It would be really useful to have implemented a feature similar to Smart Labels (included in the WPF version and also documented in the attached screenshot)
Hi, For example, if you look at this chart in 10 days zoom view, you will notice they skip the weekends, means, they are not drawing empty data points for weekends. It is normal requirements for candle charts in stock market. https://mbshighway.com/features/interactive-charts
The stack bar chart is not rendered as expected when stack.type is set
The Chart is not rendered correctly, the bars are misaligned.
The bars should be aligned.
In Excel, there is an option for Sparkline to set a marker for the highest point, lowest point, first point, last point, and negative point.
I know that it is possible to customize the appearance of the markers using the markers.visual. However, I would like to have the option as a built-in configuration to ensure better performance.
When the zIndex is set the the chart marker in the legend is misaligned.
The line and the marker in the legend are misaligned.
The line and the marker should be aligned even when the zindex is set.
In case you are using a chart with the following configuration:
$("#chart").kendoChart({
series: [{
type: "radarLine",
missingValues: "gap",
data: [1, null, null, null, 5]
}]
});
There is no line between the last and the first data point of the series.
But when the 2nd and 4th data points are set as well, this connection is added:
$("#chart").kendoChart({
series: [{
type: "radarLine",
missingValues: "gap",
data: [1, 3, null, 3, 5]
}]
});
Expected behaviour: As the chart displays a "circle", all data points next to each other should be connected in case they are having a value.
The same issue can be seen in this DOJO, where the fifth data point is not connected to the rest of the points. This only happens if "missingValues" is set to "gap".
Hi Team,
I would like to see a no-data-template be included for the Kendo UI Chart when there is no data.
Thank you!
Setting the visibility using the toggleVisibility method in the legendItemHover event leads to legendItemHover being triggered multiple times. Thus, the legendItemLeave method is never called.
If you try to move the cursor slightly the legendItemHover event is fired multiple times and the legendItemLeave event is never called.
The legendItemHover should be fired a single time when the mouse enters the legend and also the legendItemLeave should be fired even if the visibility of the legend is set through the toggleVisibility method.
function onLegendItemHover(e){
e.preventDefault();
console.log("Hover");
let chart = e.sender;
let seriesIndex = e.seriesIndex;
for(let i = 0; i < chart.options.series.length; i++){
if(i !== seriesIndex){
let series = chart.findSeriesByIndex(i);
if (series._options.visible) {
chart.findSeriesByIndex(i).toggleVisibility(false);
}
}
}
}
function onLegendItemLeave(e){
e.preventDefault();
let chart = e.sender;
console.log("Leave");
for(let i = 0; i < chart.options.series.length; i++){
let series = chart.findSeriesByIndex(i);
if (!series._options.visible) {
chart.findSeriesByIndex(i).toggleVisibility(true);
}
}
}
Dojo with workaround - https://dojo.telerik.com/@NeliKondova/EpOYadid
I need that the point will be in the start of chart (like justified property behavior) and the line style of "rangeArea" type property will be "step".
In this example the point in the start and the justified property works as expected.
https://dojo.telerik.com/IZuXOyAZ
but in the second example, when I added property: line: {style: "step"} to "rangeArea" type, the point start in the middle of labels, and justified property not working.
https://dojo.telerik.com/ILOxehAB/3
So I need that my chart will be like the second example, but the start point of the line will be like the first example.
Currently each of the labels for the:
Provide their own "font" property setting. However, it would be beneficial if there is a default configuration that can apply a font for each of the aforementioned Chart Label compartments.
Bug report
Chart with log valueAxis allows to deem zoom and throws an error: Uncaught Error: Non positive values cannot be used for a logarithmic axis
Reproduction of the problem
Dojo: https://dojo.telerik.com/OCuziYOr
Expected/desired behavior
The Chart shall not allow this deep zoom
Environment
Kendo UI version:[all]
Browser: [all ]
Several forum posts have mentioned that the best way to customize a legend is to hide Kendo's and make our own. I would be so great if we could just customize the legend similarly to most other areas of the chart that can be customized.
When the user tries to zoom the Chart and a zero range is selected, an error (Uncaught TypeError: Cannot read properties of undefined (reading 'min')) is thrown in the browsers console.
Shift
key and select a range. Try the min and max of the range to be almost the same.Uncaught TypeError: Cannot read properties of undefined (reading 'min') error is thrown in the console.
screencast - https://somup.com/c06lloBaw2
There should be no error in the browsers console, no matter of the selected range.
Hi Team,
I would like to request the functionality to plot a chart with panes side-by-side instead of only top to bottom.
Thank you!
We already have click events for the plot area, axis labels, etc., but a click event for the chart title is conspicuously absent. I have received development requests that would require this, but currently have no available workaround to allow it.