Increasing Height of Row

[Prash]

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.

[Kameshwaran R]

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. 

[Prashant Waghela]

That worked perfectly.  Thank you!

[Shyam G]

Hi Prashant, 

We are happy to hear that your problem is resolved. 

Regards, 

Shyam G