Hi ,
i want to create heat map and i am facing weird issue when doing that . All my points show the same color though they have different values . Can you please help me in fixing the issue ? i am letting the user choose min max and median color and i donot want to set default value to min and max. instead i want highcharts to do that based on the values . Here is my chart options
var heatMapOptions = {
chart: {
type: 'heatmap',
//marginTop: 0,
//marginBottom: 0,
//marginLeft: 0,
//marginRight: 0,
//borderWidth: 0,
//plotBorderWidth: 0,
//backgroundColor: '#e8e8e8',
},
tooltip: {
borderWidth: 0,
borderRadius: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
formatter: function () {
return ("<span><b>End Time : </b>" + Highcharts.dateFormat('%m/%d/%Y %l:%M:%S %p', this.point.x) + " <br/> <b> Power Generated :</b>" + this.point.value +
" <br/> <b> Device Name :</b>" + this.point.name + "</span > ");
}
},
plotOptions: {
heatmap: {
// Markers were turned off in my case in plotOptions.series, so heatmap also used it and the colors were not rendered
marker: { enabled: true }
}
},
yAxis: {
categories: [],
// className: 'highcharts-heatmap-yaxis-grid',
//alternateGridColor: '',
labels: {
enabled: true
},
tickLength: 0,
gridLineWidth: 2,
// minPadding: 0,
//maxPadding: 0,
//startOnTick: false,
//endOnTick: false,
//tickWidth: 1,
//min: 0,
//max: 15,
reversed: true
},
series: [{
// specific options for this series instance
borderWidth: 5,
colsize: 24 * 36e5,
rowsize: 1,
keys: ['x', 'y', 'value'],
dataLabels: { // Skip showing data labels for heat map
enabled: false,
color: '#000000'
},
data: []
//className: 'highcharts-heatmap-custom-series'
}],
colorAxis: {
//stops: [
// [0, minColor], //'#E6532E'],
// [0.41, medianColor], //'#fffbbc'],
// [0.71, maxColor] //'#9DFF9D']
//],
//stops: [
// [0, '#3060cf'],
// [0.5, '#fffbbc'],
// [0.9, '#c4463a'],
// [1, '#c4463a']
//],
labels: {
format: '{value} '
},
startOnTick: false,
endOnTick: false,
className: 'highcharts-heatmap-coloraxis',
min: null,
max:null
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
//verticalAlign: 'bottom',
//margin: 0,
//y: 16,
//x: 10,
//borderWidth: 0
},
xAxis: {
tickPixelInterval: 150,
type: 'datetime',
gridLineWidth: 1,
minorGridLineColor: '#E0E0E0',
minorGridLineWidth: 2,
minorTickLength: 0,
minorTickInterval: 24 * 3600 * 1000 ,// every day
lineWidth: 0,
showFirstLabel: true,
showLastLabel: true,
tickmarkPlacement: 'on',
labels: {
staggerLines: 1,
overflow: 'justify',
enabled: true
},
dateTimeLabelFormats: { // don't display the dummy year
millisecond: '%b %e %l:%M:%S %p',
second: '%l:%M:%S %p',
minute: '%l:%M %p',
hour: '%l:%M %p',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%Y',
year: '%Y'
}
}
};
return heatMapOptions;