Why this rediculous amount of code to draw a simple rectangle?

[RoelRoel]

I have a bar chart in my application an I was examinating the DOM in the developer tools. I was a bit shocked by the elements that Apex Chart generate. This is only one bar at the bar chart. It draws a rectangle:

<path id="SvgjsPath4332" d="M 40.25980392156863 286.30301353708904L 40.25980392156863 90.90120679802578Q 40.25980392156863 90.90120679802578 40.25980392156863 90.90120679802578L 53.367647058823536 90.90120679802578Q 53.367647058823536 90.90120679802578 53.367647058823536 90.90120679802578L 53.367647058823536 90.90120679802578L 53.367647058823536 286.30301353708904L 53.367647058823536 286.30301353708904z" fill="rgba(57,143,83,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="round" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskqmqbjzgq)" pathTo="M 40.25980392156863 286.30301353708904L 40.25980392156863 90.90120679802578Q 40.25980392156863 90.90120679802578 40.25980392156863 90.90120679802578L 53.367647058823536 90.90120679802578Q 53.367647058823536 90.90120679802578 53.367647058823536 90.90120679802578L 53.367647058823536 90.90120679802578L 53.367647058823536 286.30301353708904L 53.367647058823536 286.30301353708904z" pathFrom="M 40.25980392156863 286.30301353708904L 40.25980392156863 286.30301353708904L 53.367647058823536 286.30301353708904L 53.367647058823536 286.30301353708904L 53.367647058823536 286.30301353708904L 53.367647058823536 286.30301353708904L 53.367647058823536 286.30301353708904L 40.25980392156863 286.30301353708904" cy="90.90120679802578" cx="58.985294117647065" j="2" val="68.25" barHeight="195.40180673906326" barWidth="13.107843137254902"></path>

All this is used to only render this one blue bar in this image below:

If I analyse it a bit the path has the 4 coordinates needed to draw it 4 times * 3.
And why does it use the complete path as a class? This must be very slow for the client if you have a lot of bars....

[junedchhipa]

Most of the code is just data-attributes (pathFrom, pathTo) which are used for the next re-render. The reason path is used instead of
rect is due to features like border-radius.

[RoelRoel]

Ok, but the path alone is drawing this rectangle multiple times. The coordinates of the corners seem to be repeated multiple times. Op vr 22 okt. 2021 18:14 schreef Juned Chhipa ***@***.***>:

…

Most of the code is just data-attributes (pathFrom, pathTo) which are used for the next re-render. The reason path is used instead of rect is due to features like border-radius. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2717 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEBWMCVYJSOC76WOVQJJVTUIGEYBANCNFSM5GQUQICQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.