Treemap width

Question

HiIm currently working with a treemap.When setting the width to 100% the following is displayed:The blue area is the padding of the parent div. As you can see, the treemaps items overlap with it. The treemap itself (the small white bar in the top left and bottom) doesn't. Is there a way to fix this?This problem is worsened when using a navigation bar. the first screenshot is with the bar minimized.The following screenshot is with the bar extended:Here the blue area is the treemaps div.The same behaviour is found in other charts (bar/column chart, Pyramid, ...)RegardsSimon

Swetha Babu · Accepted Answer

Hi Simon,

Thank you for contacting Syncfusion support.

Please find the details for your queries below.

Query 1: When setting the width to 100% the following is displayed. This problem is worsened when enabling the navigation bar.

When we tried to reproduce the reported issue with the mentioned scenarios, we are unable to reproduce them. We have recorded a video when we tried to reproduce the issues and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/164512/ze/TREEMA~3410029585

Please find the sample Blazor application which we used for trying to reproduce the reported issue below.

https://www.syncfusion.com/downloads/support/forum/164512/ze/TreeMap-183727867

Please provide the code snippet or modify the above sample and share the same to us to reproduce the reported issue. It will be helpful for us to analyze further and assist you better.

Query 2: the small white bar in the top left and bottom doesn't hide. Is there a way to fix this?

The white space within the TreeMap component is due to the default margin value. We can modify the margin values using the properties available in the TreeMapMargin class. Please find the code snippet to remove the margin from the TreeMap component below.

Please let us know if you need any further assistance.

Regards,

Swetha Babu

Simon Balling · Answer

Hiafter comparing your example with my code I found the following:When resizing the browser the treemap will resize correctlyWhen expanding the sidebar the treemap will not resize.When opening the page the first time the treemap is not sized correctly.Here is a clip to show what I mean:https://youtu.be/DXwX_niWbEARegardsSimon

Swetha Babu · Answer

Hi Simon,Thank you for your update.We are not able to reproduce the reported issue with the SideBar component. We rendered the TreeMap component inside the Blazor DashboardLayout component same as in the provided video. We tried browser resize and SideBar collapse and expand. The reported issue is not reproduced with our sample application. However, please find the sample Blazor application in which we tried to reproduce the reported issue below.https://www.syncfusion.com/downloads/support/forum/164512/ze/TreeMap_(2)1165544524Please provide us the code snippet or modify the above sample application and share it to us to reproduce the reported issue. It will be helpful for us to analyze further and assist you better.Regards,Swetha Babu

Simon Balling · Answer

Hi,I dont use use the Dashboard layout component. those are simple divs (using bootstrap grid). In your example when changing the size of a dashboard panel it wont resize the treemap. Not until i resize the whole windowThis is pretty much the same behaviour.RegardsSimon

Swetha Babu · Answer

Hi Simon,Thank you for your update.We are able to reproduce the reported issue when rendering the TreeMap component inside a div element with bootstrap style. Please confirm whether the below screenshot is the issue that you are facing in your application. 
However, we are currently analyzing this issue. We will check and update you with further details on April 20, 2021.RegardsSwetha Babu

Simon Balling · Answer

Hi Swetha,from the screenhot it looks like the issue I am experiencing.RegardsSimon

Swetha Babu · Answer

Hi Simon, 
 
Thank you for your confirmation. We are checking on the reported issue. We will update you with further details on April 20, 2021. 
 
Regards, Swetha Babu

Swetha Babu · Answer

Hi Simon, 
 
Thank you for your patience. 
 
We have analyzed the reported issue further. We are not able to reproduce the reported issue with the bootstrap classes. The screenshot that we have provided in the previous update is when we drag the web browser for resizing the web page. But once the resizing is completed, the TreeMap gets resized correctly based on the parent div element. However, we have created a Blazor sample application when we tried to reproduce the reported issue and it can be downloaded from the below link. 
 
https://www.syncfusion.com/downloads/support/forum/164512/ze/TreeMap_(4)-1888933125 
 
In the above sample, we have rendered the TreeMap in the bootstrap div element. Please provide us the sample code snippet or modify the above sample to reproduce the reported issue. If not, we can also schedule a meeting to look into the reported issue. Please provide us your convenient time and date to schedule the meeting. We will make all necessary efforts to schedule the meeting on the mentioned date and time. 
 
Regards, Swetha Babu

Simon Balling · Answer

Hi Swetha,I updated your example to show my behaviourRegardsSimonAttachment: BlazorApp2_53d19c97.zip

Swetha Babu · Answer

Hi Simon,

Thank you for your update.

We are able to reproduce the reported issue with the provided application. However, we can fix the reported issue in the application level by calling the Refresh() method of the Treemap component when the side bar component is created because before the bootstrap style applies to the div element that encloses the TreeMap, the TreeMap component gets started to render. So the size of the parent div element will not be received properly for the TreeMap. We must refresh the TreeMap in the Created event of SideBar component. Please find the below steps to resolve the reported issue in the application level.

We must create the TreeMap instance for all the four TreeMap components in the application. We must create a static method in the "Index.razor" file to refresh all the TreeMap components.

public static SfTreeMap<LeafData> map1 { get; set; }

public static SfTreeMap<LeafData> map2 { get; set; }

public static SfTreeMap<LeafData> map3 { get; set; }

public static SfTreeMap<LeafData> map4 { get; set; }

public string[] LeafColor = new string[] {"#9cbb59"};

public class LeafData

{

public string State { get; set; }

public int GDP { get; set; }

public double Percentage { get; set; }

public int Rank { get; set; }

};

public List<LeafData> Economics = new List<LeafData>

{

new LeafData {State = "United States", GDP = 50000, Percentage = 11.08, Rank = 1},

new LeafData {State = "China", GDP = 10866, Percentage = 28.42, Rank = 2},

new LeafData {State = "Italy", GDP = 19866, Percentage = 15.42, Rank = 3},

new LeafData {State = "Brazil", GDP = 30000, Percentage = 10.42, Rank = 4},

};

protected override Task OnAfterRenderAsync(bool firstRender)

{

return base.OnAfterRenderAsync(firstRender);

}

public static async Task Refresh()

{

await map1.Refresh();

await map2.Refresh();

await map3.Refresh();

await map4.Refresh();

System.Threading.Thread.Sleep(500);

}

We can call the above static method in the Created event function of SideBar component in the "MainLayout.razor" file. Please find the code snippet for the same below.

private void changed(object args)

{

BlazorApp2.Pages.Index.Refresh();

}

However, we have modified the provided application to resolve the reported issue and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/directtrac/164512/ze/BlazorTreeMap-1905464756

Please let us know if the above sample meets your requirement.

Regards,

Swetha Babu