Completed
Last Updated: 13 Feb 2025 09:47 by ADMIN
Michael D
Created on: 14 Jun 2024 07:59
Category: Chart
Type: Feature Request
1
Chart - allow custom styling of focus highlight

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.

3 comments
ADMIN
Nikolay
Posted on: 13 Feb 2025 09:47

Hi Jeffrey,

I have great news! This feature has been added and is available in the Chart through the following properties:

Please let me knwo if you ahve any questions.

Regards,


Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Jeffrey
Posted on: 06 Feb 2025 14:20
We are looking for the same feature. There is no way to style the focus border when navigating with the keyboard to an individual chart element. Only the highlight color of the entire series.

The function below just hardcodes either black or white based on the chart background via the autoTextColor function.
We use CSS color variables so the parsing actually fails so the focus (stroke) color is always white...

    ChartElement.prototype.toggleFocusHighlight = function toggleFocusHighlight (show) {
        var options = ((this.options || {}).accessibility || {}).highlight || {};
        var focusHighlight = this._focusHighlight;

        if (!show && !focusHighlight) {
            return;
        }

        if (!focusHighlight) {
            var rootBackground = this.getRoot().options.background;
            var highlightColor = autoTextColor(rootBackground);
            var focusHighlightOptions = {
                fill: {
                    opacity: options.opacity,
                    color: options.color
                },
                stroke: Object.assign({}, {color: highlightColor}, options.border),
                zIndex: options.zIndex
            };

            focusHighlight = this._focusHighlight = this.createFocusHighlight(focusHighlightOptions);

            this.appendVisual(focusHighlight);
        }

        focusHighlight.visible(show);
    };
ADMIN
Nikolay
Posted on: 20 Jun 2024 12:57

Hello Michael,

This is a valid feature request and as for now customization of the focus indicator for the Chart is not possible. 

We will consider this in the upcoming planning.

Regards,
Nikolay
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources