PieChart rollover broken render

[iiPay]

Working in 2016.3 KendoMVC with jquery 3.1.1

Broken in 2018.1.117 KendoMVC with jquery 3.1.1

Render code from our Razor view:

    @(Html.Kendo().Chart(Model.PieChartElements)
          .Name("pieChart")
          .Legend(false)
          .Series(series =>
          {
              series.Pie(
                  model => model.BarChartValue,
                  model => model.Name,
                  model => model.PieSegmentColor)
                  .Labels(labels => labels
                      .Template($"#= category #: #= value # {Model.Currency}")
                      .Background("transparent")
                      .Visible(true))
                  .Tooltip(tooltip => tooltip
                      .Format("{0}%")
                      .Template($"#= category #: #= value # {Model.Currency}")
                      .Visible(true));
          })
          )

I've attached screenshots with the various mis renderings on rollover.

Is this a bug in the newest version or a change in the required config? Looks like a bug to me but I'm keeping an open mind.

 

[iiPay]

Additional to the above:

Browser used: Microsoft Edge 38.14393.1066.0

Tests on IE11 (11.2007.14393.0) return the same results, working with cleanly rendered rollovers with code that uses 2016.3 and broken when using 2018.1.117

These two browsers represent a third of users for our product so we consider it significant.

[iiPay]

Further browser testing:

render issues not seen with 2018.1.117 and jquery 3.1.1 on

Firefox 57.0.4 (64-bit)

or

Chrome 63.0.3239.132 (Official Build) (64-bit)

[Stefan]

Hello, Tess,

Thank you for the details and the test results.

I made an example with the Kendo UI version 2018.1.117, the 3.1.1 version of jQuery and the application is working as expected when tested on IE 11 and Edge.

As we have slightly different versions of the mentioned browsers, please advise if this example is working on your end:

https://dojo.telerik.com/ONaBoL

If this is working, then I can assume that there is a factor which we are overlooking at this moment and providing an example reproducing the issue oн your end will be very helpful during the investigation.

Regards,
Stefan
Progress Telerik

[iiPay]

Hi Stephan, I can see your javascript example working on ie and edge however, you are using a different product to render it. The example I listed in my initial entry shows I am using the MVC / razor wrapper, not the javascript based notation. Unfortunately, I cannot give you access to any real world examples as it is on a secure site available only to registered users.

However, this is the generated html from the example I gave you screenshot for:

<div class="text-center">
    <h1>UK - November 2016</h1>
    <h4>The pie chart below shows how your gross pay was distributed for this pay run</h4>
    <div class="k-chart" id="pieChart" style="position: relative; touch-action: none;" data-role="chart"><svg xmlns="http://www.w3.org/2000/svg" style="left: -0.03px; top: -0.69px; width: 100%; height: 100%; overflow: hidden;" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="kdef53" gradientUnits="userSpaceOnUse" cx="469" cy="200" r="136.5"><stop style="stop-color:#fff;stop-opacity:0.06;" offset="0.33" /><stop style="stop-color:#fff;stop-opacity:0.2;" offset="0.83" /><stop style="stop-color:#fff;stop-opacity:0;" offset="0.95" /></radialGradient></defs><g><path fill="#fff" stroke="none" d="M 0 0 L 938 0 L 938 400 L 0 400 Z" /><path fill="#fff" fill-opacity="0" stroke="none" d="M 0 0 L 0 0 L 0 0 L 0 0 Z" /><g><g /></g><g><g><path fill="none" stroke="#939393" stroke-width="1" d="M 530.013 73.439 L 542.759 47 L 555.785 47" /><path fill="none" stroke="#939393" stroke-width="1" d="M 594.739 137.31 L 618.658 125 L 622.658 125" /><path fill="none" stroke="#939393" stroke-width="1" d="M 608.232 181.17 L 624.277 179 L 635.968 179" /><path fill="none" stroke="#939393" stroke-width="1" d="M 370.46 300.151 L 351.143 323 L 347.143 323" /><g><path fill="#a93226" stroke="none" d="M 469 63.5 C 489.439 63.5 509.865 68.166 528.276 77.042 C 546.688 85.918 563.06 98.992 575.791 114.982 L 469 200 Z" /><path fill="url(#kdef53)" stroke="none" d="M 469 63.5 C 489.439 63.5 509.865 68.166 528.276 77.042 C 546.688 85.918 563.06 98.992 575.791 114.982 L 469 200 Z" /></g><g><path fill="#c0392b" stroke="none" d="M 575.791 114.982 C 587.685 129.923 596.393 147.389 601.167 165.88 L 469 200 Z" /><path fill="url(#kdef53)" stroke="none" d="M 575.791 114.982 C 587.685 129.923 596.393 147.389 601.167 165.88 L 469 200 Z" /></g><g><path fill="#cd6155" stroke="none" d="M 601.167 165.88 C 603.856 176.296 605.308 187.031 605.482 197.787 L 469 200 Z" /><path fill="url(#kdef53)" stroke="none" d="M 601.167 165.88 C 603.856 176.296 605.308 187.031 605.482 197.787 L 469 200 Z" /></g><g><path fill="#52be80" stroke="none" d="M 605.482 197.787 C 605.98 228.519 595.72 259.321 576.893 283.615 C 558.065 307.909 530.798 325.531 500.913 332.717 C 471.029 339.903 438.731 336.604 410.917 323.526 C 383.102 310.447 359.96 287.677 346.432 260.078 C 332.904 232.48 329.083 200.239 335.783 170.243 C 342.484 140.246 359.661 112.697 383.647 93.477 C 407.633 74.258 438.264 63.5 469 63.5 L 469 200 Z" /><path fill="url(#kdef53)" stroke="none" d="M 605.482 197.787 C 605.98 228.519 595.72 259.321 576.893 283.615 C 558.065 307.909 530.798 325.531 500.913 332.717 C 471.029 339.903 438.731 336.604 410.917 323.526 C 383.102 310.447 359.96 287.677 346.432 260.078 C 332.904 232.48 329.083 200.239 335.783 170.243 C 342.484 140.246 359.661 112.697 383.647 93.477 C 407.633 74.258 438.264 63.5 469 63.5 L 469 200 Z" /></g></g></g><g><path fill="none" stroke="#000" stroke-opacity="0.5" stroke-width="0" d="M 560.285 40.5 L 676.285 40.5 L 676.285 53.5 L 560.285 53.5 Z" /><text style="font:11px Arial,Helvetica,sans-serif;" fill="#000" fill-opacity="1" stroke="none" x="560.2855" y="50.5">Tax: 408.47 GBP</text></g><g><path fill="none" stroke="#000" stroke-opacity="0.5" stroke-width="0" d="M 627.158 118.5 L 820.158 118.5 L 820.158 131.5 L 627.158 131.5 Z" /><text style="font:11px Arial,Helvetica,sans-serif;" fill="#000" fill-opacity="1" stroke="none" x="627.1579" y="128.5">Social Security EEs: 190.83 GBP</text></g><g><path fill="none" stroke="#000" stroke-opacity="0.5" stroke-width="0" d="M 640.468 172.5 L 800.468 172.5 L 800.468 185.5 L 640.468 185.5 Z" /><text style="font:11px Arial,Helvetica,sans-serif;" fill="#000" fill-opacity="1" stroke="none" x="640.4679" y="182.5">Pension EEs: 107.49 GBP</text></g><g><path fill="none" stroke="#000" stroke-opacity="0.5" stroke-width="0" d="M 207.643 316.5 L 342.643 316.5 L 342.643 329.5 L 207.643 329.5 Z" /><text style="font:11px Arial,Helvetica,sans-serif;" fill="#000" fill-opacity="1" stroke="none" x="207.643" y="326.5">Salary: 2149.86 GBP</text></g></g></svg></div><script>
    jQuery(function(){jQuery("#pieChart").kendoChart({"legend":{"visible":false},"series":[{"name":"Bar Chart Value","tooltip":{"format":"{0}%","template":"#= category #: #= value #\u0026nbsp;GBP","visible":true},"type":"pie","field":"BarChartValue","categoryField":"Name","colorField":"PieSegmentColor","labels":{"background":"transparent","template":"#= category #: #= value #\u0026nbsp;GBP","visible":true}}],"dataSource":{"schema":{"model":{"fields":{"Name":{"type":"string"},"Value":{"type":"number"},"Category":{"type":"number"},"IsDeduction":{"editable":false,"type":"boolean"},"PayrollName":{"type":"string"},"PayrunName":{"type":"string"},"PieSegmentColor":{"type":"string"},"BarChartValue":{"editable":false,"type":"number"}}}},"data":[{"Name":"Tax","Value":-408.47,"Category":1,"IsDeduction":true,"PayrollName":null,"PayrunName":null,"PieSegmentColor":"#A93226","BarChartValue":408.47},{"Name":"Social Security EEs","Value":-190.83,"Category":1,"IsDeduction":true,"PayrollName":null,"PayrunName":null,"PieSegmentColor":"#C0392B","BarChartValue":190.83},{"Name":"Pension EEs","Value":-107.49,"Category":1,"IsDeduction":true,"PayrollName":null,"PayrunName":null,"PieSegmentColor":"#CD6155","BarChartValue":107.49},{"Name":"Salary","Value":2149.86,"Category":0,"IsDeduction":false,"PayrollName":null,"PayrunName":null,"PieSegmentColor":"#52BE80","BarChartValue":2149.86}]}});});
</script>
</div>

[Stefan]

Hello, Tess,

Thank you for the code.

I have used the generated code and made an example from it, which is still working as expected on my end:

https://dojo.telerik.com/AyEMU

As there are may be factors which we are overlooking, please provide an isolated example with dummy data reproducing the issue, as this will help us to locate what may be the reason for it.

Thank you in advance for the cooperation.

Regards,
Stefan
Progress Telerik