We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Increasing Height of Row

How can you increase the height of each row with the HeatMap? I was unable to find documentation for this.  Here is the code that I am using

 HeatMapProperties Heatmap = new HeatMapProperties();
                List<HeatMapColorMapping> colorCollection = new List<HeatMapColorMapping>();
                colorCollection.Add(new HeatMapColorMapping() { Color = "#8ec8f8", Label = new HeatMapLabel() { Text = "0" }, Value = 0 });
                colorCollection.Add(new HeatMapColorMapping() { Color = "#0d47a1", Label = new HeatMapLabel() { Text = "100" }, Value = 100 });
                Heatmap.ColorMappingCollection = colorCollection;
                Heatmap.LegendCollection.Add("heatmapLegend");
                Heatmap.Width = "100%";
                Heatmap.Height = "auto";
                
                CellMapping CellMapping = new CellMapping();
                
                CellMapping.Column = new PropertyMapping() { PropertyName = "DayName", DisplayName = "Day" };
                CellMapping.Row = new PropertyMapping() { PropertyName = "Year", DisplayName = "Year" };
                CellMapping.Value = new PropertyMapping() { PropertyName = "Value"  };
                Collection columnMapping = new Collection();
                columnMapping.Add(new HeaderMapping() { PropertyName = "Monday", DisplayName = "Monday" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Tuesday", DisplayName = "Tuesday" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Wednesday", DisplayName = "Wednesday" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Friday", DisplayName = "Friday" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Saturday", DisplayName = "Saturday" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Sunday", DisplayName = "Sunday" });
                CellMapping.ColumnMapping = columnMapping;
                HeaderMapping headerMapping = new HeaderMapping() { PropertyName = "Year", DisplayName = "Year", ColumnStyle = new ColumnStyle() { Width = 105, TextAlign = HeatMapTextAlign.Right } };
                CellMapping.HeaderMapping = headerMapping;
                Heatmap.ItemsSource = collection;
                Heatmap.ItemsMapping = CellMapping;
                Heatmap.IsResponsive = true;
                ViewData["HeatMapModel"] = Heatmap;

                HeatMapLegendProperties legend = new HeatMapLegendProperties();
                legend.ColorMappingCollection = colorCollection;
                legend.Orientation = HeatMapLegendOrientation.Horizontal;
                legend.LegendMode = Syncfusion.JavaScript.DataVisualization.HeatMapEnums.HeatMapLegendMode.Gradient;
                legend.Height = "50px";
                legend.Width = "75%";
                legend.IsResponsive = true;
                ViewData["HeatMapLegendModel"] = legend;

Thank You.

3 Replies

KR Kameshwaran R Syncfusion Team March 2, 2017 09:15 AM UTC

Hi Prashant, 
 
We can achieve your requirement by modifying the CSS style. Please add the following code snippet on your view file to achieve your requirement.  
 
    <style> 
        /*  To increase the height of the row header */ 
        .e-heatmap.e-js.e-grid .e-headercell { 
            height: 50px; 
        } 
        /*  To increase the height of each row */ 
        .e-heatmap.e-js.e-grid .e-rowcell { 
            height: 50px; 
        } 
    </style> 
 
Regards, 
Kameshwaran R. 



PW Prashant Waghela March 2, 2017 03:28 PM UTC

That worked perfectly.  Thank you!


SG Shyam G Syncfusion Team March 3, 2017 12:49 PM UTC

Hi Prashant, 
We are happy to hear that your problem is resolved. 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon