function generateData(a,e){for(var t=0,r=[];t<a;){var n=(t+1).toString(),m=Math.floor(Math.random()*(e.max-e.min+1))+e.min;r.push({x:n,y:m}),t++}return r}var colors=["#1e84c4"],options={chart:{toolbar:{show:!1},height:380,type:"heatmap"},dataLabels:{enabled:!1},colors:colors,series:[{name:"Metric 1",data:generateData(20,{min:0,max:90})},{name:"Metric 2",data:generateData(20,{min:0,max:90})},{name:"Metric 3",data:generateData(20,{min:0,max:90})},{name:"Metric 4",data:generateData(20,{min:0,max:90})},{name:"Metric 5",data:generateData(20,{min:0,max:90})},{name:"Metric  6",data:generateData(20,{min:0,max:90})},{name:"Metric 7",data:generateData(20,{min:0,max:90})},{name:"Metric 8",data:generateData(20,{min:0,max:90})},{name:"Metric 9",data:generateData(20,{min:0,max:90})}],xaxis:{type:"category"}},chart=new ApexCharts(document.querySelector("#basic-heatmap"),options);function generateData(a,e){for(var t=0,r=[];t<a;){var n=(t+1).toString(),m=Math.floor(Math.random()*(e.max-e.min+1))+e.min;r.push({x:n,y:m}),t++}return r}chart.render();options={chart:{toolbar:{show:!1},height:380,type:"heatmap"},dataLabels:{enabled:!1},colors:colors=["#1e84c4","#53389f","#7f56da","#ff86c8","#ed5565","#ed5565","#f9b931","#1bb394","#1bb394"],series:[{name:"Metric 1",data:generateData(20,{min:0,max:90})},{name:"Metric 2",data:generateData(20,{min:0,max:90})},{name:"Metric 3",data:generateData(20,{min:0,max:90})},{name:"Metric 4",data:generateData(20,{min:0,max:90})},{name:"Metric 5",data:generateData(20,{min:0,max:90})},{name:"Metric 6",data:generateData(20,{min:0,max:90})},{name:"Metric 7",data:generateData(20,{min:0,max:90})},{name:"Metric 8",data:generateData(20,{min:0,max:90})},{name:"Metric 9",data:generateData(20,{min:0,max:90})}],xaxis:{type:"category"}};function generateData(a,e){for(var t=0,r=[];t<a;){var n=(t+1).toString(),m=Math.floor(Math.random()*(e.max-e.min+1))+e.min;r.push({x:n,y:m}),t++}return r}(chart=new ApexCharts(document.querySelector("#multiple-series-heatmap"),options)).render();options={chart:{toolbar:{show:!1},height:380,type:"heatmap"},plotOptions:{heatmap:{shadeIntensity:.5,colorScale:{ranges:[{from:-30,to:5,name:"Low",color:(colors=["#1e84c4","#ed5565","#f9b931","#1bb394"])[0]},{from:6,to:20,name:"Medium",color:colors[1]},{from:21,to:45,name:"High",color:colors[2]},{from:46,to:55,name:"Extreme",color:colors[3]}]}}},dataLabels:{enabled:!1},series:[{name:"Jan",data:generateData(20,{min:-30,max:55})},{name:"Feb",data:generateData(20,{min:-30,max:55})},{name:"Mar",data:generateData(20,{min:-30,max:55})},{name:"Apr",data:generateData(20,{min:-30,max:55})},{name:"May",data:generateData(20,{min:-30,max:55})},{name:"Jun",data:generateData(20,{min:-30,max:55})},{name:"Jul",data:generateData(20,{min:-30,max:55})},{name:"Aug",data:generateData(20,{min:-30,max:55})},{name:"Sep",data:generateData(20,{min:-30,max:55})}]};function generateData(a,e){for(var t=0,r=[];t<a;){var n=(t+1).toString(),m=Math.floor(Math.random()*(e.max-e.min+1))+e.min;r.push({x:n,y:m}),t++}return r}(chart=new ApexCharts(document.querySelector("#color-range-heatmap"),options)).render();options={chart:{toolbar:{show:!1},height:380,type:"heatmap"},stroke:{width:0},plotOptions:{heatmap:{radius:30,enableShades:!1,colorScale:{ranges:[{from:0,to:50,color:(colors=["#1e84c4","#1bb394"])[0]},{from:51,to:100,color:colors[1]}]}}},colors:colors,dataLabels:{enabled:!0,style:{colors:["#fff"]}},series:[{name:"Metric1",data:generateData(20,{min:0,max:90})},{name:"Metric2",data:generateData(20,{min:0,max:90})},{name:"Metric3",data:generateData(20,{min:0,max:90})},{name:"Metric4",data:generateData(20,{min:0,max:90})},{name:"Metric5",data:generateData(20,{min:0,max:90})},{name:"Metric6",data:generateData(20,{min:0,max:90})},{name:"Metric7",data:generateData(20,{min:0,max:90})},{name:"Metric8",data:generateData(20,{min:0,max:90})},{name:"Metric8",data:generateData(20,{min:0,max:90})}],xaxis:{type:"category"},grid:{borderColor:"#f1f3fa"}};(chart=new ApexCharts(document.querySelector("#rounded-heatmap"),options)).render();