jahnvi25
Posts: 194
Joined: Thu Oct 04, 2012 12:16 pm

stock heatmap/treemap question

Tue May 17, 2022 3:16 pm

i have requirement where i need build stock treemap which looks similar to this url

https://finviz.com/map.ashx?t=sec

i am using layoutAlgorithm: 'squarified' which should work. is there a way i can control the color of each node ?

data format is as shown.

Code: Select all

{id: 'root', name: 'S&P 500', children: [
{id: 'Ag', name: 'Ag', children: [], data:{
	$area: 99063506184, $color: '#5E7D54', value: 1.2949762563131773, leaf: false, symbolCount: 4
}},
{id: 'Build Mad', name: 'Build Mad', children: [], data:{
$area: 43086911264, $color: '#5E7D54', value: 1.5590374401237133, leaf: false, symbolCount: 2
}}
]};
is there a way to specify which is my root ?
would above format of json work ? or do i have follow the json format and make it the way it shown in example ?
when user clicks on level1 i will have to load leaf level dynamically via ajax ? how can i do that ?
i do want to zoom in only when user clicks on 'title' of level -1 which is blue line in the image.. is that possible ?
Attachments
sample.png
sample.png (69.7 KiB) Viewed 96 times

User avatar
michal.f
Posts: 555
Joined: Thu Aug 12, 2021 12:04 pm

Re: stock heatmap/treemap question

Thu May 19, 2022 12:21 pm

Hello,

Answering your questions:
is there a way i can control the color of each node ?
Yes, you can set color property for the specific point when defining a series data.

Code: Select all

{
	name: 'Peter',
	parent: 'B',
	value: 1,
	color: 'lightyellow'
}
Demo: https://jsfiddle.net/BlackLabel/atpw325d/
is there a way to specify which is my root ?
Yes, a point that does not have a parent property is root
would above format of json work ? or do i have follow the json format and make it the way it shown in example ?
This formatting won't work, you have to follow the demo's and API examples
when user clicks on level1 i will have to load leaf level dynamically via ajax ? how can i do that ?
You mean something like this: https://jsfiddle.net/BlackLabel/mawx6ehn/ ?
i do want to zoom in only when user clicks on 'title' of level -1 which is blue line in the image.. is that possible ?
Unfortunately, such a line cannot be achieved in Highcharts.

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer

jahnvi25
Posts: 194
Joined: Thu Oct 04, 2012 12:16 pm

Re: stock heatmap/treemap question

Thu May 19, 2022 2:30 pm

Thanks a lot for detailed reply. Highchart is great product..

User avatar
michal.f
Posts: 555
Joined: Thu Aug 12, 2021 12:04 pm

Re: stock heatmap/treemap question

Fri May 20, 2022 12:45 pm

That's great to hear! In case of any further questions, feel free to contact us again.

Best regards!
Michał Filipiec
Highcharts Developer

Return to “Highcharts Stock”