jessicasmith26

Hi Mennims The startValue and endValue properties are used to define the range start and end value. The minColor and maxColor properties represent the colors of given range. It’s possible to set the cell color for the value not in the given range using the fillColor property. In Fixed type, the minColor value is used for cell color. import { HeatMap, Legend } from '@syncfusion/ej2-heatmap'; HeatMap.Inject(Legend); let heatmapData: any [] = [ [73, 39, 26, 39, 94, 1], [93, 58, 53, 38, 26, 68], [99, 28, 22, 4, 66, 90], [14, 26, 97, 69, 69, 3], [7, 46, 47, 47, 88, 6], [41, 55, 73, 23, 3, 79], [56, 69, 21, 86, 3, 33], [45, 7, 53, 81, 95, 79], [60, 77, 74, 68, 88, 51], [25, 25, 10, 12, 78, 14], [25, 56, 55, 58, 12, 82], [74, 33, 88, 23, 86, 59]]; let heatmap: HeatMap = new HeatMap({ titleSettings: { text: 'Sales Revenue per Employee (in 1000 US$)', textStyle: { size: '15px', fontWeight: '500', fontStyle: 'Normal', fontFamily: 'Segoe UI' } }, xAxis: { labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'], }, yAxis: { labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'], }, paletteSettings: { palette: [ { startValue:1, endValue:30, minColor: '#C2E7EC', maxColor: '#AEDFE6' }, { startValue:30, endValue:60, minColor: '#9AD7E0', maxColor: '#72C7D4' }, { startValue:60, endValue:90, minColor: '#5EBFCE', maxColor: '#4AB7C8' } ], type: "Gradient" }, dataSource: heatmapData, legendSettings: { visible: true, } }); heatmap.appendTo('#element');