Set each block a color depending on variable

I am testing the TreeMap and using the the code from:

http://mvc.syncfusion.com/demos/web/treemap/customization

I would like to know how I can make each block a specific color depending on a variable value.

Example is a string value of "A" or "B", then the block is either green or red.

Thanks

Neill

2 Replies

NE Neill June 20, 2018 02:01 PM UTC

For anybody else, I got this working using int and not strings. If there is an easier or better way, let me know.

Set the variable to an int value depending on the string and then:

    @(Html.EJ().TreeMap("container")
                .DataSource(ViewData["Data"])

                .ColorValuePath("Status")
                .WeightValuePath("Weight")
                    .LeafItemsSetting(lls =>
                    {
                        lls.ShowLabels(true)
                            .ItemTemplate("imageTemplate")
                            .LabelPath("Description");
                    })
    .TreeMapRangeColorMappings(cm =>
    {
        cm.From(0).To(0).Color("Grey").Add();
        cm.From(1).To(1).Color("Green").Add();
        cm.From(2).To(2).Color("Red").Add();
    }) 
    )

the bold portion is what I was looking for.

Regards,

Neill


SK Saravana Kumar Kanagavel Syncfusion Team June 21, 2018 12:59 PM UTC

Hi Neill, 
 
Thanks for contacting Syncfusion Support. 
 
We have analyzed your query. Currently we have provided the four types of treemap color mapping support such as RangeColorMapping, GroupColorMapping, UniColorMapping and PaletteColorMapping. Your requirement can be achieved by using EqualColorMapping. But this feature is not available now in treemap control. So we will consider this as a feature requirement to meet your requirement. And this feature will be included in any one of our upcoming Essential Studio release. You can also check our website periodically to know the status of the feature. 

Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K. 


Loader.
Up arrow icon