This is a migrated thread and some comments may be shown as answers.

Chart mouseevents invalid positions after parent container scaling

1 Answer 18 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Piotr
Top achievements
Rank 1
Piotr asked on 16 Mar 2020, 10:41 AM

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'
          });

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 18 Mar 2020, 08:05 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
Piotr
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or