LineChart container's scaling affects mouse events

[Gustavo]

Hi Telerik team!

I'm trying to scale my linechart by setting zoom Css property, but this is affecting mouse events and messing up the tooltip position and the marking wrong focused item.

As you can see here:

https://dojo.telerik.com/RQNGZUUK

So, is possible to scale linechart without affect mouse events?

Regards,

Gustavo

[Nikolay]

Hello Gustavo,

You're encountering a common issue when using CSS zoom or transform: scale() with interactive elements. The browser scales the visual appearance but the underlying coordinate system for mouse events remains unchanged, causing misalignment.  This is a known limitation when using CSS zoom with interactive components.

Instead of CSS scaling, control the chart size through Kendo's configuration:

chartArea: {
    background: "",
    height: 300,  // Set explicit height
    width: 600    // Set explicit width
},

Dojo demo: https://dojo.telerik.com/RYlhWhmg

If you need dynamic scaling, here's a complete example:

function createScaledChart(scaleFactor = 1) {
    // Destroy existing chart if any
    const chart = $("#chart").data("kendoChart");
    if (chart) {
        chart.destroy();
    }
    
    $("#chart").kendoChart({
        title: {
            text: "Gross domestic product growth \n /GDP annual %/"
        },
        legend: {
            position: "bottom"
        },
        chartArea: {
            background: "",
            height: 400 * scaleFactor,
            width: 800 * scaleFactor
        },
        seriesDefaults: {
            type: "line",
            style: "smooth"
        },
        series: [{
            name: "India",
            data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
        },{
            name: "World", 
            data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
        },{
            name: "Russian Federation",
            data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
        },{
            name: "Haiti",
            data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
        }],
        valueAxis: {
            labels: {
                format: "{0}%"
            },
            line: {
                visible: false
            },
            axisCrossingValue: -10
        },
        categoryAxis: {
            categories: [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024],
            majorGridLines: {
                visible: false
            },
            labels: {
                rotation: "auto"
            }
        },
        tooltip: {
            visible: true,
            format: "{0}%",
            template: "#= series.name #: #= value #"
        }
    });
}

// Create chart with 50% scale
$(document).ready(function() {
    createScaledChart(0.5);
});

This approach will maintain proper tooltip positioning and mouse event handling while giving you the scaled appearance you want.

Regards,
Nikolay
Progress Telerik