Chart mouseevents invalid positions after parent container scaling

[Piotr]

Hello, I have a problem with chart rendering after scale parent container of chart.

 

Example is presented in dojo: https://dojo.telerik.com/aqEdofAZ

 

I am transforming chart parent container with code below, chart is looking great but there is something wrong with mouse events. It looks like mouse events are pinned to non transformed chart. For example mouse hover on 2006 (green line) selects 2004 (green line). I tried to refresh and redraw chart but nothing changed. Can you help me with this case?

 

        $(".demo-section").css({
            'transform': 'scale(0.5)',
            '-ms-transform': 'scale(0.5)',
            '-moz-transform': 'scale(0.5)',
            '-webkit-transform': 'scale(0.5)',
            'transform-origin': '0 0',
            '-ms-transform-origin': '0 0',
            '-moz-transform-origin': '0 0',
            '-webkit-transform-origin': '0 0'
          });

[Tsvetomir]

Hi Piotr,

Thank you for taking the time to explain and demonstrate the behavior you are observing. It is important to point out that the Kendo UI Chart utilizes the SVG HTML element, internally. The browsers' support for CSS transform rule and scaling of SVG elements is not complete. 

As a workaround, what I can recommend is that you set the dimensions of the widget - height and width in pixels. This would cause all the inner elements to scale down and eventually achieve the same appearance. More information on the responsiveness of the Chart widget could be found in the following article:

https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#enhancing-responsiveness

 

Regards,
Tsvetomir
Progress Telerik