How do I remove the 10px border around any treemap?

In another post you provided a link to a worked example of generating two chart from a pivotview instance.  That works great, thanks.  

What I'm finding is that the treemap graphic (the squares not the legend and other information) is drawn with a 10px border.  I can't find a property that controls this border.  Is there one?

Attached are two images that try to illustrate the problem.  The first shows the block of squares which is a <g> element in an <svg> document.  The other shows the containing <rect> element.  These screenshots are taken from the worked example you provided so you can be sure the border is something created by the treemap not something I'm doing and so you can use the example to see the effect yourself.

The border is a problem because it means the graphic does not line up when used as part of a dashboard.  It occurs because the 'path' attribute of the <g> elements define this gap from the edge of the <svg> document so its not something that's easy to remove.





1 Reply 1 reply marked as answer

IR Indumathi Ravi Syncfusion Team July 4, 2023 06:31 PM UTC

Hi Bill,


When we analyzed the provided images, we suspect that you need to reduce the space between the legend and the TreeMap items. We provide that space between the legend and the TreeMap items to ensure a proper appearance and to avoid overlapping. This space is not customizable.


Meanwhile, we have created a sample and added the TreeMap control to the dashboard panel. Please find the sample from the below link.

https://stackblitz.com/edit/f2yz9v?file=index.ts


We are not facing any issue in the TreeMap component due to that space in the above sample. Please let us know the exact issue that you are facing in the component. You can modify the above sample and share the same to us or provide a video to explain the reported issue. It will be helpful for us to analyze and assist you better.


Marked as answer
Loader.
Up arrow icon