Heatmap chart is not showing properly for large data points - highcharts
I want to show the heatmap chart but for the large data points chart is not coming correctly. I have 36 categories [for now, it can be more] on X-axis and Y-axis and according to this, I have generated the heatmap chart.
Please refer this fiddle:
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 30,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ["offer", "Brand Launch Sale", "Women's wear", "Brand", "Weekday bonanza offer", "Women's ddd", "Home fashion sae", "Women fff", "Fashion fiesta offer", "Fashion", "Weekday", "Fashion fies", "Local", "Home le", "Weekdayfff", "Women jena", "Week off", "Women's jewlly", "Brand Launch", "Local brand", "Fashion bazaa", "Women gadf", "Weekend look", "Home fashion avtar", "Weekend ohhh", "Week log", "Local phinomy", "Weekend dhamaka", "Fashionghanae", "Weekday dhamaka", "Womejnfv", "Brandrr Sale", "Demo", "defe", "Otherc", "c3"]
},
yAxis: {
categories: ["offer", "Brand Launch Sale", "Women's wear", "Brand", "Weekday bonanza offer", "Women's ddd", "Home fashion sae", "Women fff", "Fashion fiesta offer", "Fashion", "Weekday", "Fashion fies", "Local", "Home le", "Weekdayfff", "Women jena", "Week off", "Women's jewlly", "Brand Launch", "Local brand", "Fashion bazaa", "Women gadf", "Weekend look", "Home fashion avtar", "Weekend ohhh", "Week log", "Local phinomy", "Weekend dhamaka", "Fashionghanae", "Weekday dhamaka", "Womejnfv", "Brandrr Sale", "Demo", "defe", "Otherc", "c3"],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 55,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0,0,100],[0,1,"11.07"],[0,2,"8.33"],[0,3,"13.38"],[0,4,"23.56"],[0,5,"17.28"],[0,6,"12.92"],[0,7,"13.54"],[0,8,"26.97"],[0,9,"10.46"],[0,10,"7.72"],[0,11,"9.33"],[0,12,"46.18"],[0,13,"7.27"],[0,14,"34.16"],[0,15,"44.15"],[0,16,100],[0,17,"23.33"],[0,18,"11.55"],[0,19,"9.39"],[0,20,"34.58"],[0,21,"13.97"],[0,22,100],[0,23,"29.96"],[0,24,100],[0,25,100],[0,26,"9.56"],[0,27,100],[0,28,"19.1"],[0,29,"17.42"],[0,30,"13.84"],[0,31,"8.15"],[0,32,"15.37"],[0,33,"10.12"],[0,34,"21.1"],[0,35,"6.9"],[1,0,"11.07"],[1,1,100],[1,2,"42.18"],[1,3,100],[1,4,"28.77"],[1,5,"37.34"],[1,6,"45.63"],[1,7,"44.29"],[1,8,"25.22"],[1,9,"48.41"],[1,10,"40.19"],[1,11,"45.24"],[1,12,"12.67"],[1,13,"38.62"],[1,14,"19.35"],[1,15,"13.61"],[1,16,"33.03"],[1,17,"3.65"],[1,18,100],[1,19,"45.43"],[1,20,"6.17"],[1,21,"43.4"],[1,22,"2.53"],[1,23,"22.55"],[1,24,"25.25"],[1,25,"47.02"],[1,26,"45.91"],[1,27,"22.89"],[1,28,"34.52"],[1,29,"37.11"],[1,30,"43.66"],[1,31,100],[1,32,"40.67"],[1,33,"47.5"],[1,34,"31.77"],[1,35,"37.32"],[2,0,"8.33"],[2,1,"42.18"],[2,2,100],[2,3,"37.02"],[2,4,"22.76"],[2,5,100],[2,6,"37.97"],[2,7,100],[2,8,"19.74"],[2,9,"43.74"],[2,10,"47.95"],[2,11,"46.89"],[2,12,"9.57"],[2,13,"46.31"],[2,14,"14.89"],[2,15,100],[2,16,"26.46"],[2,17,100],[2,18,"41.02"],[2,19,"46.7"],[2,20,"4.58"],[2,21,100],[2,22,"1.86"],[2,23,"17.52"],[2,24,"19.77"],[2,25,"39.3"],[2,26,"46.22"],[2,27,"17.8"],[2,28,"27.78"],[2,29,"30.09"],[2,30,100],[2,31,"49.42"],[2,32,"33.33"],[2,33,"44.64"],[2,34,"25.36"],[2,35,"44.94"],[3,0,"13.38"],[3,1,100],[3,2,"37.02"],[3,3,100],[3,4,"33.38"],[3,5,"42.51"],[3,6,"48.99"],[3,7,"49.66"],[3,8,"29.5"],[3,9,"43.06"],[3,10,"35.13"],[3,11,"39.97"],[3,12,"15.26"],[3,13,"33.65"],[3,14,"22.94"],[3,15,"16.35"],[3,16,"37.96"],[3,17,"4.49"],[3,18,100],[3,19,"40.15"],[3,20,"7.55"],[3,21,"48.75"],[3,22,"3.12"],[3,23,"26.53"],[3,24,"29.54"],[3,25,"47.59"],[3,26,"40.62"],[3,27,"26.92"],[3,28,"39.55"],[3,29,"42.27"],[3,30,"49.02"],[3,31,100],[3,32,"45.96"],[3,33,"42.17"],[3,34,"36.62"],[3,35,"32.43"],[4,0,"23.56"],[4,1,"28.77"],[4,2,"22.76"],[4,3,"33.38"],[4,4,100],[4,5,"40.39"],[4,6,"32.49"],[4,7,"33.68"],[4,8,"45.5"],[4,9,"27.48"],[4,10,100],[4,11,"25.02"],[4,12,"26.43"],[4,13,"20.26"],[4,14,100],[4,15,"28.06"],[4,16,"45.02"],[4,17,"8.58"],[4,18,"29.75"],[4,19,"25.16"],[4,20,"14.01"],[4,21,"34.5"],[4,22,"6.03"],[4,23,"41.89"],[4,24,"45.55"],[4,25,"31.27"],[4,26,"25.53"],[4,27,"42.36"],[4,28,"43.37"],[4,29,100],[4,30,"34.26"],[4,31,"22.35"],[4,32,"37.08"],[4,33,"26.76"],[4,34,"46.45"],[4,35,"19.39"],[5,0,"17.28"],[5,1,"37.34"],[5,2,100],[5,3,"42.51"],[5,4,"40.39"],[5,5,100],[5,6,"41.53"],[5,7,100],[5,8,"36.13"],[5,9,"35.87"],[5,10,"28.6"],[5,11,"32.99"],[5,12,"19.58"],[5,13,"27.27"],[5,14,"28.7"],[5,15,100],[5,16,"45.28"],[5,17,100],[5,18,"38.46"],[5,19,"33.16"],[5,20,"9.94"],[5,21,100],[5,22,"4.17"],[5,23,"32.82"],[5,24,"36.18"],[5,25,"40.17"],[5,26,"33.59"],[5,27,"33.25"],[5,28,"46.94"],[5,29,"49.76"],[5,30,100],[5,31,"29.81"],[5,32,"46.51"],[5,33,"35.03"],[5,34,"43.86"],[5,35,"26.19"],[6,0,"12.92"],[6,1,"45.63"],[6,2,"37.97"],[6,3,"48.99"],[6,4,"32.49"],[6,5,"41.53"],[6,6,100],[6,7,"48.65"],[6,8,"28.66"],[6,9,"44.06"],[6,10,"36.06"],[6,11,"40.94"],[6,12,"14.74"],[6,13,100],[6,14,"22.23"],[6,15,"15.8"],[6,16,"37.01"],[6,17,"4.32"],[6,18,"46.81"],[6,19,"41.13"],[6,20,"7.27"],[6,21,"47.74"],[6,22,"3"],[6,23,100],[6,24,"28.7"],[6,25,"48.6"],[6,26,"41.6"],[6,27,"26.13"],[6,28,"38.59"],[6,29,"41.29"],[6,30,"48.01"],[6,31,"37.42"],[6,32,"44.96"],[6,33,"43.16"],[6,34,"35.69"],[6,35,"33.32"],[7,0,"13.54"],[7,1,"44.29"],[7,2,100],[7,3,"49.66"],[7,4,"33.68"],[7,5,100],[7,6,"48.65"],[7,7,100],[7,8,"29.78"],[7,9,"42.73"],[7,10,"34.82"],[7,11,"39.64"],[7,12,"15.43"],[7,13,"33.35"],[7,14,"23.18"],[7,15,100],[7,16,"38.28"],[7,17,100],[7,18,"45.47"],[7,19,"39.83"],[7,20,"7.64"],[7,21,100],[7,22,"3.16"],[7,23,"26.8"],[7,24,"29.82"],[7,25,"47.25"],[7,26,"40.29"],[7,27,"27.19"],[7,28,"39.87"],[7,29,"42.6"],[7,30,100],[7,31,"36.17"],[7,32,"46.3"],[7,33,"41.84"],[7,34,"36.94"],[7,35,"32.13"],[8,0,"26.97"],[8,1,"25.22"],[8,2,"19.74"],[8,3,"29.5"],[8,4,"45.5"],[8,5,"36.13"],[8,6,"28.66"],[8,7,"29.78"],[8,8,100],[8,9,100],[8,10,"18.47"],[8,11,100],[8,12,"30.09"],[8,13,"17.5"],[8,14,"41.57"],[8,15,"31.84"],[8,16,"40.61"],[8,17,"10.1"],[8,18,"26.12"],[8,19,"21.92"],[8,20,100],[8,21,"30.54"],[8,22,"7.14"],[8,23,"46.33"],[8,24,"49.95"],[8,25,"27.53"],[8,26,"22.25"],[8,27,"46.82"],[8,28,100],[8,29,"36.36"],[8,30,"30.32"],[8,31,"19.37"],[8,32,"32.97"],[8,33,"23.38"],[8,34,"42"],[8,35,"16.72"],[9,0,"10.46"],[9,1,"48.41"],[9,2,"43.74"],[9,3,"43.06"],[9,4,"27.48"],[9,5,"35.87"],[9,6,"44.06"],[9,7,"42.73"],[9,8,100],[9,9,100],[9,10,"41.73"],[9,11,100],[9,12,"11.99"],[9,13,"40.14"],[9,14,"18.38"],[9,15,"12.88"],[9,16,"31.64"],[9,17,"3.43"],[9,18,"47.22"],[9,19,"47.01"],[9,20,100],[9,21,"41.85"],[9,22,"2.37"],[9,23,"21.46"],[9,24,"24.07"],[9,25,"45.45"],[9,26,"47.49"],[9,27,"21.79"],[9,28,100],[9,29,"35.64"],[9,30,"42.1"],[9,31,"43.16"],[9,32,"39.14"],[9,33,"49.09"],[9,34,"30.41"],[9,35,"38.82"],[10,0,"7.72"],[10,1,"40.19"],[10,2,"47.95"],[10,3,"35.13"],[10,4,100],[10,5,"28.6"],[10,6,"36.06"],[10,7,"34.82"],[10,8,"18.47"],[10,9,"41.73"],[10,10,100],[10,11,"44.86"],[10,12,"8.88"],[10,13,"48.36"],[10,14,100],[10,15,"9.57"],[10,16,"24.89"],[10,17,"2.48"],[10,18,"39.05"],[10,19,"44.67"],[10,20,"4.23"],[10,21,"34"],[10,22,"1.71"],[10,23,"16.36"],[10,24,"18.5"],[10,25,"37.36"],[10,26,"44.19"],[10,27,"16.63"],[10,28,"26.16"],[10,29,100],[10,30,"34.24"],[10,31,"48.53"],[10,32,"31.54"],[10,33,"42.62"],[10,34,"23.83"],[10,35,"46.98"],[11,0,"9.33"],[11,1,"45.24"],[11,2,"46.89"],[11,3,"39.97"],[11,4,"25.02"],[11,5,"32.99"],[11,6,"40.94"],[11,7,"39.64"],[11,8,100],[11,9,100],[11,10,"44.86"],[11,11,100],[11,12,"10.7"],[11,13,"43.24"],[11,14,"16.54"],[11,15,"11.51"],[11,16,"28.95"],[11,17,"3.03"],[11,18,"44.06"],[11,19,"49.81"],[11,20,100],[11,21,"38.78"],[11,22,"2.1"],[11,23,"19.39"],[11,24,"21.82"],[11,25,"42.31"],[11,26,"49.32"],[11,27,"19.69"],[11,28,100],[11,29,"32.78"],[11,30,"39.03"],[11,31,"46.31"],[11,32,"36.15"],[11,33,"47.73"],[11,34,"27.78"],[11,35,"41.89"],[12,0,"46.18"],[12,1,"12.67"],[12,2,"9.57"],[12,3,"15.26"],[12,4,"26.43"],[12,5,"19.58"],[12,6,"14.74"],[12,7,"15.43"],[12,8,"30.09"],[12,9,"11.99"],[12,10,"8.88"],[12,11,"10.7"],[12,12,100],[12,13,"8.37"],[12,14,"37.69"],[12,15,"47.95"],[12,16,"22.74"],[12,17,"20.7"],[12,18,"13.21"],[12,19,100],[12,20,"31.2"],[12,21,"15.91"],[12,22,"15.16"],[12,23,"33.27"],[12,24,"30.05"],[12,25,"14.05"],[12,26,100],[12,27,"32.83"],[12,28,"21.58"],[12,29,"19.73"],[12,30,"15.77"],[12,31,"9.37"],[12,32,"17.47"],[12,33,"11.61"],[12,34,"23.76"],[12,35,"7.95"],[13,0,"7.27"],[13,1,"38.62"],[13,2,"46.31"],[13,3,"33.65"],[13,4,"20.26"],[13,5,"27.27"],[13,6,100],[13,7,"33.35"],[13,8,"17.5"],[13,9,"40.14"],[13,10,"48.36"],[13,11,"43.24"],[13,12,"8.37"],[13,13,100],[13,14,"13.12"],[13,15,"9.02"],[13,16,"23.68"],[13,17,"2.33"],[13,18,"37.5"],[13,19,"43.05"],[13,20,"3.98"],[13,21,"32.55"],[13,22,"1.6"],[13,23,100],[13,24,"17.53"],[13,25,"35.84"],[13,26,"42.57"],[13,27,"15.74"],[13,28,"24.91"],[13,29,"27.08"],[13,30,"32.78"],[13,31,"46.89"],[13,32,"30.14"],[13,33,"41.02"],[13,34,"22.66"],[13,35,"48.62"],[14,0,"34.16"],[14,1,"19.35"],[14,2,"14.89"],[14,3,"22.94"],[14,4,100],[14,5,"28.7"],[14,6,"22.23"],[14,7,"23.18"],[14,8,"41.57"],[14,9,"18.38"],[14,10,100],[14,11,"16.54"],[14,12,"37.69"],[14,13,"13.12"],[14,14,100],[14,15,"39.63"],[14,16,"32.73"],[14,17,"13.64"],[14,18,"20.1"],[14,19,"16.65"],[14,20,"21.52"],[14,21,"23.83"],[14,22,"9.75"],[14,23,"45.18"],[14,24,"41.53"],[14,25,"21.28"],[14,26,"16.92"],[14,27,"44.7"],[14,28,"31.27"],[14,29,100],[14,30,"23.64"],[14,31,"14.6"],[14,32,"25.93"],[14,33,"17.84"],[14,34,"34"],[14,35,"12.5"],[15,0,"44.15"],[15,1,"13.61"],[15,2,100],[15,3,"16.35"],[15,4,"28.06"],[15,5,100],[15,6,"15.8"],[15,7,100],[15,8,"31.84"],[15,9,"12.88"],[15,10,"9.57"],[15,11,"11.51"],[15,12,"47.95"],[15,13,"9.02"],[15,14,"39.63"],[15,15,100],[15,16,"24.21"],[15,17,100],[15,18,"14.18"],[15,19,"11.59"],[15,20,"29.46"],[15,21,100],[15,22,"14.13"],[15,23,"35.11"],[15,24,"31.8"],[15,25,"15.07"],[15,26,"11.79"],[15,27,"34.67"],[15,28,"23"],[15,29,"21.07"],[15,30,100],[15,31,"10.09"],[15,32,"18.69"],[15,33,"12.47"],[15,34,"25.28"],[15,35,"8.58"],[16,0,100],[16,1,"33.03"],[16,2,"26.46"],[16,3,"37.96"],[16,4,"45.02"],[16,5,"45.28"],[16,6,"37.01"],[16,7,"38.28"],[16,8,"40.61"],[16,9,"31.64"],[16,10,"24.89"],[16,11,"28.95"],[16,12,"22.74"],[16,13,"23.68"],[16,14,"32.73"],[16,15,"24.21"],[16,16,100],[16,17,"7.13"],[16,18,"34.09"],[16,19,"29.11"],[16,20,"11.77"],[16,21,"39.14"],[16,22,100],[16,23,"37.12"],[16,24,100],[16,25,100],[16,26,"29.51"],[16,27,100],[16,28,"48.33"],[16,29,"45.52"],[16,30,"38.89"],[16,31,"26"],[16,32,"41.84"],[16,33,"30.85"],[16,34,"48.57"],[16,35,"22.7"],[17,0,"23.33"],[17,1,"3.65"],[17,2,100],[17,3,"4.49"],[17,4,"8.58"],[17,5,100],[17,6,"4.32"],[17,7,100],[17,8,"10.1"],[17,9,"3.43"],[17,10,"2.48"],[17,11,"3.03"],[17,12,"20.7"],[17,13,"2.33"],[17,14,"13.64"],[17,15,100],[17,16,"7.13"],[17,17,100],[17,18,"3.82"],[17,19,"3.06"],[17,20,"36.54"],[17,21,100],[17,22,"40.63"],[17,23,"11.52"],[17,24,"10.08"],[17,25,"4.09"],[17,26,"3.12"],[17,27,"11.32"],[17,28,"6.7"],[17,29,"6.03"],[17,30,100],[17,31,"2.63"],[17,32,"5.24"],[17,33,"3.31"],[17,34,"7.52"],[17,35,"2.21"],[18,0,"11.55"],[18,1,100],[18,2,"41.02"],[18,3,100],[18,4,"29.75"],[18,5,"38.46"],[18,6,"46.81"],[18,7,"45.47"],[18,8,"26.12"],[18,9,"47.22"],[18,10,"39.05"],[18,11,"44.06"],[18,12,"13.21"],[18,13,"37.5"],[18,14,"20.1"],[18,15,"14.18"],[18,16,"34.09"],[18,17,"3.82"],[18,18,100],[18,19,"44.25"],[18,20,"6.46"],[18,21,"44.57"],[18,22,"2.65"],[18,23,"23.39"],[18,24,"26.16"],[18,25,"48.21"],[18,26,"44.73"],[18,27,"23.74"],[18,28,"35.61"],[18,29,"38.23"],[18,30,"44.83"],[18,31,100],[18,32,"41.82"],[18,33,"46.31"],[18,34,"32.81"],[18,35,"36.22"],[19,0,"9.39"],[19,1,"45.43"],[19,2,"46.7"],[19,3,"40.15"],[19,4,"25.16"],[19,5,"33.16"],[19,6,"41.13"],[19,7,"39.83"],[19,8,"21.92"],[19,9,"47.01"],[19,10,"44.67"],[19,11,"49.81"],[19,12,100],[19,13,"43.05"],[19,14,"16.65"],[19,15,"11.59"],[19,16,"29.11"],[19,17,"3.06"],[19,18,"44.25"],[19,19,100],[19,20,"5.19"],[19,21,"38.96"],[19,22,"2.11"],[19,23,"19.51"],[19,24,"21.95"],[19,25,"42.5"],[19,26,100],[19,27,"19.82"],[19,28,"30.5"],[19,29,"32.95"],[19,30,"39.22"],[19,31,"46.12"],[19,32,"36.33"],[19,33,"47.92"],[19,34,"27.94"],[19,35,"41.7"],[20,0,"34.58"],[20,1,"6.17"],[20,2,"4.58"],[20,3,"7.55"],[20,4,"14.01"],[20,5,"9.94"],[20,6,"7.27"],[20,7,"7.64"],[20,8,100],[20,9,100],[20,10,"4.23"],[20,11,100],[20,12,"31.2"],[20,13,"3.98"],[20,14,"21.52"],[20,15,"29.46"],[20,16,"11.77"],[20,17,"36.54"],[20,18,"6.46"],[20,19,"5.19"],[20,20,100],[20,21,"7.9"],[20,22,"28.26"],[20,23,"18.44"],[20,24,"16.3"],[20,25,"6.9"],[20,26,"5.29"],[20,27,"18.14"],[20,28,100],[20,29,"10.03"],[20,30,"7.83"],[20,31,"4.48"],[20,32,"8.76"],[20,33,"5.62"],[20,34,"12.38"],[20,35,"3.77"],[21,0,"13.97"],[21,1,"43.4"],[21,2,100],[21,3,"48.75"],[21,4,"34.5"],[21,5,100],[21,6,"47.74"],[21,7,100],[21,8,"30.54"],[21,9,"41.85"],[21,10,"34"],[21,11,"38.78"],[21,12,"15.91"],[21,13,"32.55"],[21,14,"23.83"],[21,15,100],[21,16,"39.14"],[21,17,100],[21,18,"44.57"],[21,19,"38.96"],[21,20,"7.9"],[21,21,100],[21,22,"3.27"],[21,23,"27.52"],[21,24,"30.59"],[21,25,"46.34"],[21,26,"39.42"],[21,27,"27.91"],[21,28,"40.75"],[21,29,"43.49"],[21,30,100],[21,31,"35.33"],[21,32,"47.2"],[21,33,"40.96"],[21,34,"37.79"],[21,35,"31.35"],[22,0,100],[22,1,"2.53"],[22,2,"1.86"],[22,3,"3.12"],[22,4,"6.03"],[22,5,"4.17"],[22,6,"3"],[22,7,"3.16"],[22,8,"7.14"],[22,9,"2.37"],[22,10,"1.71"],[22,11,"2.1"],[22,12,"15.16"],[22,13,"1.6"],[22,14,"9.75"],[22,15,"14.13"],[22,16,100],[22,17,"40.63"],[22,18,"2.65"],[22,19,"2.11"],[22,20,"28.26"],[22,21,"3.27"],[22,22,100],[22,23,"8.18"],[22,24,100],[22,25,100],[22,26,"2.15"],[22,27,100],[22,28,"4.69"],[22,29,"4.21"],[22,30,"3.24"],[22,31,"1.81"],[22,32,"3.64"],[22,33,"2.29"],[22,34,"5.27"],[22,35,"1.52"],[23,0,"29.96"],[23,1,"22.55"],[23,2,"17.52"],[23,3,"26.53"],[23,4,"41.89"],[23,5,"32.82"],[23,6,100],[23,7,"26.8"],[23,8,"46.33"],[23,9,"21.46"],[23,10,"16.36"],[23,11,"19.39"],[23,12,"33.27"],[23,13,100],[23,14,"45.18"],[23,15,"35.11"],[23,16,"37.12"],[23,17,"11.52"],[23,18,"23.39"],[23,19,"19.51"],[23,20,"18.44"],[23,21,"27.52"],[23,22,"8.18"],[23,23,100],[23,24,"46.28"],[23,25,"24.69"],[23,26,"19.81"],[23,27,"49.51"],[23,28,"35.57"],[23,29,"33.03"],[23,30,"27.31"],[23,31,"17.18"],[23,32,"29.81"],[23,33,"20.85"],[23,34,"38.47"],[23,35,"14.77"],[24,0,100],[24,1,"25.25"],[24,2,"19.77"],[24,3,"29.54"],[24,4,"45.55"],[24,5,"36.18"],[24,6,"28.7"],[24,7,"29.82"],[24,8,"49.95"],[24,9,"24.07"],[24,10,"18.5"],[24,11,"21.82"],[24,12,"30.05"],[24,13,"17.53"],[24,14,"41.53"],[24,15,"31.8"],[24,16,100],[24,17,"10.08"],[24,18,"26.16"],[24,19,"21.95"],[24,20,"16.3"],[24,21,"30.59"],[24,22,100],[24,23,"46.28"],[24,24,100],[24,25,100],[24,26,"22.29"],[24,27,100],[24,28,"39.05"],[24,29,"36.4"],[24,30,"30.36"],[24,31,"19.4"],[24,32,"33.02"],[24,33,"23.41"],[24,34,"42.05"],[24,35,"16.75"],[25,0,100],[25,1,"47.02"],[25,2,"39.3"],[25,3,"47.59"],[25,4,"31.27"],[25,5,"40.17"],[25,6,"48.6"],[25,7,"47.25"],[25,8,"27.53"],[25,9,"45.45"],[25,10,"37.36"],[25,11,"42.31"],[25,12,"14.05"],[25,13,"35.84"],[25,14,"21.28"],[25,15,"15.07"],[25,16,100],[25,17,"4.09"],[25,18,"48.21"],[25,19,"42.5"],[25,20,"6.9"],[25,21,"46.34"],[25,22,100],[25,23,"24.69"],[25,24,100],[25,25,100],[25,26,"42.97"],[25,27,100],[25,28,"37.26"],[25,29,"39.93"],[25,30,"46.61"],[25,31,"38.75"],[25,32,"43.57"],[25,33,"44.54"],[25,34,"34.41"],[25,35,"34.58"],[26,0,"9.56"],[26,1,"45.91"],[26,2,"46.22"],[26,3,"40.62"],[26,4,"25.53"],[26,5,"33.59"],[26,6,"41.6"],[26,7,"40.29"],[26,8,"22.25"],[26,9,"47.49"],[26,10,"44.19"],[26,11,"49.32"],[26,12,100],[26,13,"42.57"],[26,14,"16.92"],[26,15,"11.79"],[26,16,"29.51"],[26,17,"3.12"],[26,18,"44.73"],[26,19,100],[26,20,"5.29"],[26,21,"39.42"],[26,22,"2.15"],[26,23,"19.81"],[26,24,"22.29"],[26,25,"42.97"],[26,26,100],[26,27,"20.13"],[26,28,"30.92"],[26,29,"33.38"],[26,30,"39.68"],[26,31,"45.64"],[26,32,"36.78"],[26,33,"48.4"],[26,34,"28.33"],[26,35,"41.23"],[27,0,100],[27,1,"22.89"],[27,2,"17.8"],[27,3,"26.92"],[27,4,"42.36"],[27,5,"33.25"],[27,6,"26.13"],[27,7,"27.19"],[27,8,"46.82"],[27,9,"21.79"],[27,10,"16.63"],[27,11,"19.69"],[27,12,"32.83"],[27,13,"15.74"],[27,14,"44.7"],[27,15,"34.67"],[27,16,100],[27,17,"11.32"],[27,18,"23.74"],[27,19,"19.82"],[27,20,"18.14"],[27,21,"27.91"],[27,22,100],[27,23,"49.51"],[27,24,100],[27,25,100],[27,26,"20.13"],[27,27,100],[27,28,"36.02"],[27,29,"33.47"],[27,30,"27.7"],[27,31,"17.46"],[27,32,"30.22"],[27,33,"21.17"],[27,34,"38.93"],[27,35,"15.02"],[28,0,"19.1"],[28,1,"34.52"],[28,2,"27.78"],[28,3,"39.55"],[28,4,"43.37"],[28,5,"46.94"],[28,6,"38.59"],[28,7,"39.87"],[28,8,100],[28,9,100],[28,10,"26.16"],[28,11,100],[28,12,"21.58"],[28,13,"24.91"],[28,14,"31.27"],[28,15,"23"],[28,16,"48.33"],[28,17,"6.7"],[28,18,"35.61"],[28,19,"30.5"],[28,20,100],[28,21,"40.75"],[28,22,"4.69"],[28,23,"35.57"],[28,24,"39.05"],[28,25,"37.26"],[28,26,"30.92"],[28,27,"36.02"],[28,28,100],[28,29,"47.18"],[28,30,"40.49"],[28,31,"27.31"],[28,32,"43.48"],[28,33,"32.3"],[28,34,"46.9"],[28,35,"23.9"],[29,0,"17.42"],[29,1,"37.11"],[29,2,"30.09"],[29,3,"42.27"],[29,4,100],[29,5,"49.76"],[29,6,"41.29"],[29,7,"42.6"],[29,8,"36.36"],[29,9,"35.64"],[29,10,100],[29,11,"32.78"],[29,12,"19.73"],[29,13,"27.08"],[29,14,100],[29,15,"21.07"],[29,16,"45.52"],[29,17,"6.03"],[29,18,"38.23"],[29,19,"32.95"],[29,20,"10.03"],[29,21,"43.49"],[29,22,"4.21"],[29,23,"33.03"],[29,24,"36.4"],[29,25,"39.93"],[29,26,"33.38"],[29,27,"33.47"],[29,28,"47.18"],[29,29,100],[29,30,"43.23"],[29,31,"29.61"],[29,32,"46.27"],[29,33,"34.81"],[29,34,"44.1"],[29,35,"26.01"],[30,0,"13.84"],[30,1,"43.66"],[30,2,100],[30,3,"49.02"],[30,4,"34.26"],[30,5,100],[30,6,"48.01"],[30,7,100],[30,8,"30.32"],[30,9,"42.1"],[30,10,"34.24"],[30,11,"39.03"],[30,12,"15.77"],[30,13,"32.78"],[30,14,"23.64"],[30,15,100],[30,16,"38.89"],[30,17,100],[30,18,"44.83"],[30,19,"39.22"],[30,20,"7.83"],[30,21,100],[30,22,"3.24"],[30,23,"27.31"],[30,24,"30.36"],[30,25,"46.61"],[30,26,"39.68"],[30,27,"27.7"],[30,28,"40.49"],[30,29,"43.23"],[30,30,100],[30,31,"35.58"],[30,32,"46.94"],[30,33,"41.22"],[30,34,"37.54"],[30,35,"31.58"],[31,0,"8.15"],[31,1,100],[31,2,"49.42"],[31,3,100],[31,4,"22.35"],[31,5,"29.81"],[31,6,"37.42"],[31,7,"36.17"],[31,8,"19.37"],[31,9,"43.16"],[31,10,"48.53"],[31,11,"46.31"],[31,12,"9.37"],[31,13,"46.89"],[31,14,"14.6"],[31,15,"10.09"],[31,16,"26"],[31,17,"2.63"],[31,18,100],[31,19,"46.12"],[31,20,"4.48"],[31,21,"35.33"],[31,22,"1.81"],[31,23,"17.18"],[31,24,"19.4"],[31,25,"38.75"],[31,26,"45.64"],[31,27,"17.46"],[31,28,"27.31"],[31,29,"29.61"],[31,30,"35.58"],[31,31,100],[31,32,"32.82"],[31,33,"44.06"],[31,34,"24.92"],[31,35,"45.52"],[32,0,"15.37"],[32,1,"40.67"],[32,2,"33.33"],[32,3,"45.96"],[32,4,"37.08"],[32,5,"46.51"],[32,6,"44.96"],[32,7,"46.3"],[32,8,"32.97"],[32,9,"39.14"],[32,10,"31.54"],[32,11,"36.15"],[32,12,"17.47"],[32,13,"30.14"],[32,14,"25.93"],[32,15,"18.69"],[32,16,"41.84"],[32,17,"5.24"],[32,18,"41.82"],[32,19,"36.33"],[32,20,"8.76"],[32,21,"47.2"],[32,22,"3.64"],[32,23,"29.81"],[32,24,"33.02"],[32,25,"43.57"],[32,26,"36.78"],[32,27,"30.22"],[32,28,"43.48"],[32,29,"46.27"],[32,30,"46.94"],[32,31,"32.82"],[32,32,100],[32,33,"38.28"],[32,34,"40.45"],[32,35,"28.99"],[33,0,"10.12"],[33,1,"47.5"],[33,2,"44.64"],[33,3,"42.17"],[33,4,"26.76"],[33,5,"35.03"],[33,6,"43.16"],[33,7,"41.84"],[33,8,"23.38"],[33,9,"49.09"],[33,10,"42.62"],[33,11,"47.73"],[33,12,"11.61"],[33,13,"41.02"],[33,14,"17.84"],[33,15,"12.47"],[33,16,"30.85"],[33,17,"3.31"],[33,18,"46.31"],[33,19,"47.92"],[33,20,"5.62"],[33,21,"40.96"],[33,22,"2.29"],[33,23,"20.85"],[33,24,"23.41"],[33,25,"44.54"],[33,26,"48.4"],[33,27,"21.17"],[33,28,"32.3"],[33,29,"34.81"],[33,30,"41.22"],[33,31,"44.06"],[33,32,"38.28"],[33,33,100],[33,34,"29.64"],[33,35,"39.69"],[34,0,"21.1"],[34,1,"31.77"],[34,2,"25.36"],[34,3,"36.62"],[34,4,"46.45"],[34,5,"43.86"],[34,6,"35.69"],[34,7,"36.94"],[34,8,"42"],[34,9,"30.41"],[34,10,"23.83"],[34,11,"27.78"],[34,12,"23.76"],[34,13,"22.66"],[34,14,"34"],[34,15,"25.28"],[34,16,"48.57"],[34,17,"7.52"],[34,18,"32.81"],[34,19,"27.94"],[34,20,"12.38"],[34,21,"37.79"],[34,22,"5.27"],[34,23,"38.47"],[34,24,"42.05"],[34,25,"34.41"],[34,26,"28.33"],[34,27,"38.93"],[34,28,"46.9"],[34,29,"44.1"],[34,30,"37.54"],[34,31,"24.92"],[34,32,"40.45"],[34,33,"29.64"],[34,34,100],[34,35,"21.71"],[35,0,"6.9"],[35,1,"37.32"],[35,2,"44.94"],[35,3,"32.43"],[35,4,"19.39"],[35,5,"26.19"],[35,6,"33.32"],[35,7,"32.13"],[35,8,"16.72"],[35,9,"38.82"],[35,10,"46.98"],[35,11,"41.89"],[35,12,"7.95"],[35,13,"48.62"],[35,14,"12.5"],[35,15,"8.58"],[35,16,"22.7"],[35,17,"2.21"],[35,18,"36.22"],[35,19,"41.7"],[35,20,"3.77"],[35,21,"31.35"],[35,22,"1.52"],[35,23,"14.77"],[35,24,"16.75"],[35,25,"34.58"],[35,26,"41.23"],[35,27,"15.02"],[35,28,"23.9"],[35,29,"26.01"],[35,30,"31.58"],[35,31,"45.52"],[35,32,"28.99"],[35,33,"39.69"],[35,34,"21.71"],[35,35,100]],
dataLabels: {
enabled: false,
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 800px; min-width: 510px; max-width: 800px; margin: 0 auto"></div>
That issue is caused by turboThreshold property. You need to increase it:
series: [{
turboThreshold: 9e9,
...
}]
Live demo: http://jsfiddle.net/BlackLabel/1vxm7eou/
API Reference: https://api.highcharts.com/highcharts/series.heatmap.turboThreshold
Related
Highcharts - add custom information to tooltip what caused price raise or price drop
I am working a chart and need to add information to the tooltip pop-up box to each point marker. For example, I have a chart with Y: price X: date. If the price of a product rises because of some event (for example an earthquake), I would like to show that information when someone points their mouse to that specific chart point. Is this possible in wpdatatables or highcharts? I am a webdesigner looking for some coding help. Thanks in advance for your help. Best Regards, Kevin Tried looking for this option in jsfiddle and https://jsfiddle.net/Kaige/huo1vyzs/2/ https://cloud.highcharts.com/edit/249857 Highcharts.chart('container', { title: { text: 'Pricing chart' }, subtitle: { text: 'Price information' }, yAxis: { title: { text: 'Vitamin pricing' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Vitamin A', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: 'Vitamin B', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: 'Vitamin C', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: 'Vitamin D', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); #container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto } <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container"></div>
You can add some additional property to your data, map it by keys option and finally show it in a tooltip by customizing pointFormat: series: [{ keys: ['x', 'y', 'event'], data: [ [1, 2, 'event1'], [2, 3, 'event2'], [3, 4] ] }], tooltip: { pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b> {point.event} <br/>' } Live demo: https://jsfiddle.net/BlackLabel/acugvkqh/ API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormat https://api.highcharts.com/highcharts/series.line.keys
Highcharts : How do i align data labels above the axis in column chart?
I am plotting the values dynamically in highcharts column charts. I have displayed the data labels with -90 degree rotation to avoid the overlapping. But It has some issues like the values are cut off by the axis. I have tried the y offset option. But The values are plotted dynamically. So I couldn't set this value as fixed one. JS Fiddle : a link Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'World\'s largest cities per 2014' }, subtitle: { text: 'Source: Wikipedia' }, xAxis: { type: 'category', labels: { rotation: -45, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: 'Population (millions)' } }, legend: { enabled: false }, tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' }, series: [{ name: 'Population', data: [ ['Shanghai', 2341.7], ['Lagos', 165.1], ['Istanbul', 14.2], ['Karachi', 14.0], ['Mumbai', 12.5], ['Moscow', 12.1], ['São Paulo', 11.8], ['Beijing', 11.7], ['Guangzhou', 11.1], ['Delhi', 11.1], ['Shenzhen', 10.5], ['Seoul', 10.4], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Mexico City', 8.9], ['Lima', 8.9] ], dataLabels: { useHTML:true, crop:false, enabled: true, rotation: -90, color: '#000000', inside:true, style: { fontFamily: 'Verdana, sans-serif', fontWeight: "bold" , fontSize: "15px" } } }] }); ` <div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"> </div> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> `
Setting the align attribute to "left" could work. dataLabels: { align: "left" } See here: https://jsfiddle.net/t15eg1qm/3/
Try to set yAxis type to logarithmic, and its minorTickInterval to 0.1. Logarithmic scale fits to this type of data perfectly. Lets look at code below: yAxis: { type: 'logarithmic', minorTickInterval: 0.1, title: { text: 'Population (millions)' } }, Here is your refactored JSFiddle: https://jsfiddle.net/daniel_s/x5oxyt2v/ Best Regards!
How to get vertical scrollbar in highstock for heatmap chart
For the heatmap chart I could get horizontal scrollbar, now I need vertical scrollbar, similar to the chart shown in the below link http://jsfiddle.net/fj6d2/3076/ Below is my sample code: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script> <script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> </head> <body> <div id="container" style="height: 300px"></div> <script> $(function () { $('#container').highcharts({ chart: { type: 'heatmap', marginTop: 40, marginBottom: 40 }, title: { text: 'Sales per employee per weekday' }, xAxis: { categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'], min:2 }, yAxis: { categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], title: null, }, scrollbar: { enabled: true }, colorAxis: { min: 0, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }, legend: { align: 'right', layout: 'vertical', margin: 0, verticalAlign: 'top', y: 25, symbolHeight: 320 }, tooltip: { formatter: function () { return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; } }, series: [{ name: 'Sales per employee', borderWidth: 1, data: [[0,0,10],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]], dataLabels: { enabled: true, color: 'black', style: { textShadow: 'none' } } }] }); }); </script> </body> <html>
Apply scroll property true in yaxis scrollbar: {enabled: true} and add zoomType: 'xy' in chart object. var chart = new Highcharts.Chart({ chart: { type: 'heatmap', marginTop: 40, marginBottom: 40, renderTo: 'container', zoomType: 'xy' }, title: { text: 'Sales per employee per weekday' }, xAxis: { categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'], min:2 }, yAxis: { categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], title: null, scrollbar: { enabled: true } }, scrollbar: { enabled: true }, colorAxis: { min: 0, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }, legend: { align: 'right', layout: 'vertical', margin: 0, verticalAlign: 'top', y: 25, symbolHeight: 320 }, tooltip: { formatter: function () { return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; } }, series: [{ name: 'Sales per employee', borderWidth: 1, data: [[0,0,10],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]], dataLabels: { enabled: true, color: 'black', style: { textShadow: 'none' } } }] }); Hope so it helps you !
Highcharts - How to deploy data labels & tooltips for 2nd data series
I've created a Highcharts that is a bit unusual. It's placing two series in the same plotarea, but instead of them "lining up" and sharing the entire plot area, series0 is using the left side of the area and series1 is using the right side. Everything is working great except for two (related) things: I cannot get tooltips or datalabels to display for the series1 data on the right-hand side of the page. Completely guessing here, but I'm guessing the series are not being shared because they are not lining up together. I've spent the past day trying various things and have completely ran out of ideas. Hoping a fresh set of eyes might spot something that will work. Attached is a fiddle for your viewing pleasure... https://jsfiddle.net/wk0uh72o/ <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="adaRate"></div> $(function() { var options = { chart: { renderTo: 'adaRate', type: 'bar', width: 600, height: 400 }, title: { text: 'Average Daily Attendance Rate', align: 'center', style: { fontWeight: 'bold', color: 'rgba(0,0,0,.9)' } }, legend: { enabled: true }, tooltip: { shared: true, crosshairs: true, formatter: function() { var s = '<b>' + this.x + '</b>'; $.each(this.points, function() { s += '<br/>' + this.series.name + ': ' + this.y + '%'; }); return s; }, }, xAxis: { labels: { style: { fontWeight: 'bold' } } }, yAxis: [{ min: 0, max: 100, opposite: true, width: 270, title: { text: 'Average Daily Attendance %' } }, { min: -10, max: 10, offset: 0, opposite: true, plotLines: [{ color: 'red', value: 0, width: 2 }], left: 400, width: 170, title: { text: 'Variance from Prior Year' } }], series: [{ name: 'ADA', dataLabels: { enabled: true, align: 'right', color: '#FFFFFF', x: -10 }, yAxis: 0, }, { type: 'scatter', name: 'PY Variance', dataLabels: { enabled: true, align: 'center', color: '#000000', x: -10 }, yAxis: 1, }], credits: { enabled: false } }; var categories = ["School 1", "School 2", "School 3", "School 4", "School 5", "School 6", "School 7"]; var adaRate = [96.4, 95.9, 93.3, 92.3, 89.8, 85.4, 83.9]; var adaVar = [{ "color": "yellow", "y": -.8 }, { "color": "red", "y": -3.5 }, { "color": "lightgreen", "y": 1.5 }, { "color": "lightgreen", "y": 2.3 }, { "color": "red", "y": -4.3 }, { "color": "green", "y": 5.3 }, { "color": "darkgreen", "y": 7.8 } ]; options.xAxis.categories = categories; options.series[0].data = adaRate; options.series[1].data = adaVar; var chart = new Highcharts.Chart(options); });
I don't have time to write a longer answer. But, shared tooltips don't work for unordered data (pie, scatter, flag). See http://api.highcharts.com/highcharts#tooltip.shared You can simulate a scatter series using a line series with lineWidth of 0. You also have to modify the mouseOver event to not increase the lineWidth on hover.
Just need to remove tooltip on the top level. But set it in each series separately. series: [{ name: 'ADA', dataLabels: { enabled: true, align: 'right', color: '#FFFFFF', x: -10 }, yAxis: 0, tooltip: { pointFormat: 'First {point.y}' } }, { type: 'scatter', name: 'PY Variance', dataLabels: { enabled: true, align: 'center', color: '#000000', x: -10 }, yAxis: 1, tooltip: { pointFormat: 'Second {point.y}' } }], refer to fiddle I updated from yours.
min, max threshold in highcharts
#Hightcharts stock How can i have two threshold's ? for min,max in this graph http://jsfiddle.net/CYJAk/16/ As an example in here there's only one threshold set http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/demo/area/ or instead of threshold option in highcharts, is there way i can show red spots/points when they fall out of min:max range?
A better way to approach this problem is to add two plot lines on the chart indicating the minimum and maximum values allowed. Let's say you would like to apply this to the yAxis and set a minimum of 100 and a maximum of 500, you can like so: var min = 100; var max = 500; yAxis: { min: min - 100, max: max + 100, plotLines: [{ id: 'limit-min', color: '#FF0000', dashStyle: 'ShortDash', width: 2, value: min, zIndex: 0 }, { id: 'limit-max', color: '#FF0000', dashStyle: 'ShortDash', width: 2, value: max, zIndex: 0 }] } The reason for adding and subtracting 100 to the max and min values is because we'd like the plot lines to be visible on the chart. Hope that helps.
why not render a second band behind (or over) this series which contains the normal range. Then you could see easily which points fall outside that range.
Based on the answer, I created a quick code sample. I think if you have the red line for min, you can clear see which points are falling below your allowable minimum. The full code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>How to add min and max thresholds in Highcharts</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Sales By Month', }, subtitle: { text: 'Metrics', }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Revenue' }, plotLines: [{ color: '#FF0000', dashStyle: 'ShortDash', width: 2, value: 22, zIndex: 0, label : { text : 'Goal' } }, { color: '#008000', dashStyle: 'ShortDash', width: 2, value: 10, zIndex: 0, label : { text : 'Loss' } }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': $'+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: 'Revenue', data: [21000, 24000, 27500, 33000, 29000, 26000, 19000, 21000, 25000, 29000, 23000, 18000] }] }); }); }); </script> </head> <body> <script src="js/highcharts.js"></script> <script src="js/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html> Working demo on Edit Fiddle here. It may help you.
Based on the answer, I created a quick code sample. I think if you have the red line for min, you can clear see which points are falling below your allowable minimum. The full code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>How to add min and max thresholds in Highcharts</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Sales By Month', }, subtitle: { text: 'Metrics', }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Revenue' }, plotLines: [{ id: 'limit-min', color: '#FF0000', dashStyle: 'ShortDash', width: 2, value: 22000, zIndex: 0, label : { text : 'Last Year\'s Minimum Revenue' } }, { id: 'limit-max', color: '#008000', dashStyle: 'ShortDash', width: 2, value: 32000, zIndex: 0, label : { text : 'Last Year\'s Maximum Revenue' } }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': $'+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: 'Revenue', data: [21000, 24000, 27500, 33000, 29000, 26000, 19000, 21000, 25000, 29000, 23000, 18000] }] }); }); }); </script> </head> <body> <script src="js/highcharts.js"></script> <script src="js/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html> Working demo here.