Develop Reference

Add or declare two plotOptions in highcharts for Synchronized chart - javascript

How can I change second chart color to green for value between 150 to 500?
at the first chart I use plotOptions to declare zone to change color to green.
But I have a second plotOptions (If Possible) for second chart to change the color between 150 to 550 to green run the cod to find-out what I have!
and another questions id when i have a lot point Json cannot pars ! for this solution i create Json From Server and passed to chart by $.getJSON('/home/GetChartDataFromThisDay' but problem is still exist!
i have about 25/000 point to show in chart. what should be do?
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
var t='{"xData":[0.001567,0.011765,0.022194,0.032316,0.04266,0.063668,0.074477,0.085323,0.09576,0.106078,0.116096,0.137524,0.148342,0.159059,0.170005,0.180716,0.191407,0.212538,0.222819,0.233929,0.244239,0.255301,0.266081,0.287527,0.298115,0.309392,0.320217,0.330928,0.341401,0.361717,0.372173,0.382337,0.39294,0.403072,0.413454,0.434618,0.444845,0.455745,0.465785,0.475987,0.486064,0.507086,0.517517,0.527961,0.538242,0.548414,0.558444,0.578941,0.589212,0.599472,0.60977,0.620178,0.630189,0.650782,0.661001,0.671137,0.681175,0.691235,0.702012,0.722644,0.733166,0.743824,0.754059,0.764109,0.774519,0.795597,0.805721,0.81592,0.826139,0.836369,0.846826,0.86771,0.87803,0.888342,0.898695,0.908723,0.91922,0.939802,0.950378,0.960776,0.971377,0.981843,0.992312,1.013125,1.023302,1.033488,1.043822,1.054203,1.065019,1.086078,1.09635,1.106421,1.117028,1.127541,1.138599,1.159588,1.170167,1.180741,1.190794,1.201112,1.211355,1.233278,1.243477,1.254957,1.265227,1.276378,1.285656,1.297311,1.308367,1.318715,1.329589,1.340834,1.352388,1.375063,1.385369,1.396291,1.408156,1.418989,1.429535,1.451141,1.462205,1.473011,1.483844,1.494311,1.514761,1.525336,1.535858,1.546476,1.557325,1.567512,1.590091,1.600925,1.612303,1.622558,1.633071,1.643555,1.66484,1.675722,1.685986,1.696733,1.706895,1.719102,1.741295,1.752144,1.762688,1.773713,1.784052,1.795705,1.817305,1.827465,1.838408,1.849369,1.860023,1.871438,1.89257,1.90323,1.914398,1.924634,1.934642,1.945212,1.966275,1.976294,1.986422,1.996652,2.008005,2.018309,2.041139,2.051221,2.0613,2.072507,2.08342,2.094075,2.114574,2.125286,2.135765,2.146845,2.157966,2.169391,2.190921,2.200899,2.212709,2.222671,2.232908,2.244001,2.264898,2.275703,2.286885,2.298115,2.310186,2.32059,2.344695,2.354843,2.366387,2.379001,2.390328,2.402215,2.423134,2.433156,2.444912,2.457061,2.468253,2.478978,2.499832,2.513223,2.52561,2.538429,2.548659,2.560809,2.581308,2.592816,2.603963,2.615992,2.626242,2.638223,2.660346,2.671583,2.681938,2.69265,2.70588,2.716296,2.740081,2.75085,2.761319,2.772027,2.782659,2.793531,2.816194,2.828031,2.839243,2.851443,2.863884,2.874359,2.895246,2.906506,2.91761,2.92786,2.938937,2.950218,2.973357,2.98366,2.994639,3.005213,3.01666,3.02761,3.050025,3.061713,3.071828,3.082787,3.093422,3.105289,3.127231,3.138982,3.149755,3.160217,3.171299,3.191571,3.202226,3.213225,3.223987,3.234092,3.244644,3.265939,3.276411,3.286489,3.297156,3.307909,3.319018,3.34064,3.351107,3.361683,3.373136,3.384768,3.395457,3.417722,3.429096,3.439122,3.449679,3.459868,3.469997,3.492679,3.503647,3.514941,3.525858,3.538746,3.550422,3.572255,3.58452,3.595367,3.605736,3.617401,3.628324,3.652523,3.663679,3.67378,3.684605,3.695595,3.705843,3.728706,3.739169,3.750205,3.761258,3.771771,3.781911,3.804724,3.81631,3.826313,3.837847,3.85049,3.860999,3.88262,3.892937,3.903053,3.913656,3.924698,3.935126,3.956362,3.966543,3.976899,3.98752,3.997644,4.008721,4.029852,4.040633,4.051006,4.06126,4.071761,4.083526,4.10749,4.117855,4.128661,4.13934,4.151117,4.1624,4.184736,4.194826,4.205098,4.215261,4.225325,4.236367,4.262012,4.273794,4.285743,4.297226,4.308086,4.318245,4.340246,4.351486,4.363196,4.374465,4.387109,4.398635,4.421101,4.432135,4.444666,4.456226,4.467413,4.477804,4.498505,4.510413,4.522595,4.534044,4.545944,4.558048,4.580379,4.59312,4.605616,4.618065,4.631266,4.644086,4.667943,4.67948,4.691266,4.703019,4.715923,4.725932,4.752312,4.765224,4.777128,4.787361,4.800435,4.823353,4.836044,4.848602,4.860302,4.871112,4.882779,4.904695,4.914823,4.927074,4.938111,4.949586,4.960761,4.982911,4.9942,5.004246,5.016296,5.027215,5.038043,5.058885,5.070303,5.080649,5.093865,5.104424,5.114903,5.134965,5.146346,5.15634,5.168547,5.179066,5.191167,5.214242,5.224914,5.237573,5.249537,5.261586,5.272517,5.296154,5.306348,5.316773,5.327153,5.339961,5.350638,5.376502,5.389277,5.402142,5.412197,5.42399,5.434873,5.458466,5.470907,5.482679,5.493339,5.50574,5.516349,5.538897,5.549552,5.56083,5.571879,5.583764,5.59509,5.619028,5.629925,5.640716,5.650957,5.661787,5.671957,5.693974,5.704919,5.717491,5.731152,5.744728,5.755687,5.778668,5.791951,5.80409,5.815697,5.828482,5.840501,5.864145,5.875704,5.887893,5.900147,5.912517,5.924894,5.948897,5.959155,5.970262,5.981632,5.992996,6.00356,6.027256,6.038776,6.050959,6.061351,6.071864,6.082436,6.104054,6.115602,6.127623,6.139058,6.150639,6.161323,6.183013,6.194359,6.206269,6.218033,6.2281,6.240494,6.262584,6.275326,6.287166,6.298953,6.310644,6.321583,6.345676,6.356738,6.366782,6.377931,6.388519,6.397159],"datasets": [{"name": "دما","data":[13.833,12.524,11.441,10.651,9.961,4.566,4.617,4.728,4.823,4.844,4.856,4.87,4.702,4.679,4.674,4.641,4.47,4.688,4.798,4.756,4.903,4.919,5.017,4.938,4.879,4.831,4.623,3.887,3.502,3.083,3.123,3.073,2.922,2.827,2.805,2.605,2.743,2.698,2.513,2.41,2.17,2.288,2.308,2.222,2.183,2.224,2.163,2.223,2.142,2.257,2.015,1.971,1.894,1.848,1.835,1.85,2.036,1.827,1.904,1.803,1.852,1.866,1.906,1.956,1.954,1.734,1.904,1.899,2.001,1.966,1.844,1.879,1.856,1.837,1.827,1.907,1.729,1.74,1.68,1.797,1.811,1.941,2.026,2.217,2.281,2.517,2.673,2.702,2.893,3.016,3.073,3.126,3.283,3.361,3.33,3.465,3.916,4.49,5.074,5.717,6.523,7.012,6.726,7.095,7.471,7.824,7.802,4.441,4.625,4.696,4.861,4.768,4.889,5.281,5.36,5.419,5.137,5.278,5.151,4.934,4.952,4.742,4.666,4.525,4.126,4.228,4.334,4.383,5.287,5.088,5.28,5.274,5.251,5.413,5.365,5.372,5.512,4.839,5.099,5.196,5.219,5.094,5.582,5.91,5.952,6.012,5.854,5.789,5.465,5.525,5.659,5.67,5.173,5.033,5.318,5.289,5.226,5.15,5.106,4.989,5.103,5.288,5.428,5.363,5.026,5,4.941,4.872,4.751,4.408,4.425,4.301,4.134,4.171,4.272,4.34,4.543,4.826,5.381,5.374,5.433,5.483,5.539,5.869,6.956,7.443,7.654,8.005,8.181,8.386,9.202,9.51,9.66,9.141,8.79,8.747,8.949,9.188,9.625,10.154,10.173,10.361,11.186,11.226,11.091,10.899,10.945,10.892,9.618,9.092,8.465,7.864,7.396,7.076,7.053,6.772,6.958,7.202,6.93,6.857,7.007,7.059,7.099,7.025,6.95,7.116,6.331,6.39,6.571,6.571,6.604,6.407,6.371,6.348,6.348,5.995,6.162,6.287,6.241,6.033,6.083,6.313,6.118,5.78,5.698,5.804,5.743,5.655,5.976,6.005,6.06,5.988,6.021,6.049,5.882,5.296,5.142,4.701,4.701,4.647,4.491,4.48,4.384,4.263,4.515,4.721,5.084,6.225,6.302,6.409,6.52,6.462,6.525,6.816,6.656,6.566,6.34,6.177,6.143,7.462,7.783,7.885,7.998,8.182,8.352,8.32,8.5,8.967,8.474,8.178,7.89,7.436,7.634,7.777,7.628,7.189,6.787,6.048,6.003,6.189,6.216,6.389,6.353,7.341,7.899,7.849,7.757,7.314,7.134,6.858,6.689,6.526,5.909,5.138,4.617,4.339,4.558,4.493,4.545,4.419,4.245,4.468,5.093,5.737,6.215,6.613,6.876,7.566,7.586,7.901,7.736,7.23,6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012,10.184,10.336,10.473,10.848,11.349,11.978,12.167,12.327,12.339,12.064,12.09,12.12,11.94,11.562,11.208,10.974,10.948,10.983,10.76,10.694,10.534,10.273,10.364,10.421,10.357,10.316,10.472,10.94,11.314,11.485,11.488,11.606,11.479,11.091,11.288,11.354,11.501,11.302,10.968,11.026,10.944,11.08,11.388,11.504,11.279,10.683,10.533,10.505,10.305,10.146,10.148,9.501,9.366,9.23,9.067,8.956,8.935],"unit": "°C","type": "line","valueDecimals": 1}, {"name":"رطوبت","data":[26.857,27,27.111,27.2,27.272,30.545,32.181,33.818,35.272,36.545,37.818,41.818,44.545,47.272,48.545,49.818,53.545,61,64.909,68.818,72.727,75.09,77.454,82.181,84.545,84.454,86.181,87.909,89.636,93.09,96.727,100.363,104,107.636,111.272,116.727,121.09,125.454,129.818,134.181,136.727,151.636,159.09,166.545,174,181.454,186.363,201.636,209.272,216.909,222.818,228.727,234.636,249.363,258.181,267,273.09,279.181,288.181,303,308.818,314.636,326.909,336.272,345.636,364.363,373.727,380.181,389.818,399.454,409.09,425.727,432.727,439.727,446.727,453.727,460.727,473.272,478.818,484.363,489.909,491.636,493.363,498.272,500.727,503.181,506.454,508,509.545,512.636,514.363,516.09,517.909,519.727,521.545,525.636,527.272,528.909,529.636,530.363,530.909,531.181,531.3,531.444,530.75,529.857,528.666,521,521,521.777,522.4,522.909,522.818,522.636,522.545,522.454,522.363,522.272,522.181,520.727,520.545,521.09,521.636,522.181,523.272,523.818,524.363,524.909,525.454,528.09,532.272,534.363,536.454,537.909,539.363,540.818,543.727,545.909,544.818,543.727,542.636,541.545,540,539.545,539.09,538.636,537.272,535.181,533.363,532.454,531.545,530.636,529.727,528.818,526.272,525.909,525.545,525.181,524.818,524.454,523.727,522.363,521,520,519,516.545,511.636,510.636,509.636,506.909,504.181,502.454,499,497.272,497,496.727,497.454,496.727,493.818,491.636,489.454,487.272,487.09,486.909,486.545,485.363,484.181,484.09,481.545,479,478.181,477.909,477.636,477.363,477.09,476.818,476.363,481.818,487.272,492.727,493.909,493.181,491.727,491,490.272,489.545,487.636,485.727,482.363,474.454,468.454,462.454,456.454,450.454,439.727,435,430.272,425.545,418.727,418.363,418.545,419.09,419.636,420.181,419.454,418.727,413.818,413,412.181,411.363,409.636,407.909,405,403.818,397.454,392.818,388.181,383.545,374.272,369.636,365,358.363,351.181,344,340,338,336,334,332,328.636,323.909,322.545,321.181,319.818,318.272,315.181,313.636,312.09,311.909,311.727,310.545,308.181,307,306,305,302.818,300.636,297.545,296.636,296.727,296.181,295.636,295.09,294,294.636,293.09,291.545,291.545,291.545,292.181,292.818,293.454,294.09,292.545,291,292.272,292.363,292.454,292.545,289.818,287.09,281.636,281.09,280.545,277,273.454,271.454,267.454,265.181,262.909,260.636,258.363,256.09,248.909,246.818,240.909,235,229.09,226.272,220.636,217.818,215,215,211.545,208.09,201.181,197.727,194.272,190.818,187.363,183.909,170.818,173,175.181,177.363,179.545,181.727,186.09,182.727,179.363,179.09,178.818,173.272,160.272,152.818,145.363,137.909,130.454,126.818,116.272,111,107.363,101.909,98.363,94.818,87,82.818,80.363,79.545,78.272,77,73,71.454,69.636,67.909,66.727,65.454,62.909,62.09,61.272,60.363,59.454,59,58.545,58.272,58.09,57.909,57.727,57.545,57.272,57.181,56.909,56.636,56.454,56.272,55.909,55.727,55.818,55.545,55.272,54.909,54.818,54.727,54.636,54.545,54.454,54,54,54,54,54,53.636,52.909,52.545,52.636,52.727,52.818,52.909,52.636,52.272,52.272,52.272,52.272,52.818,53,53.09,53.181,53.272,53.818,54.363,55.09,55.454,55.272,55.09,54.909,54.727,54.363,53.727,53.09,52.636,52.181,51.727,50.818,50.363,50.363,50.363,50.363,50.818,51.727,51.272,50.818,50.363,50.636,50.909,50.545,50.363,50.181,50,49.818,50.818,52.818,53.09,53.363,53.636,53.909,54.181,53.272,52.818,52.09,51.363,50.636,49.909,47.818,46.09,44.363,43.363,42.363,41.363,39.363,37.636,35.909,35.181,35.09,35.363,35.909,36.181,36.545,36.909,37.272,38.363,39.545,39.636,39.727,39.818,38.636,37.454,34.909,33.636,32.363,31.09,29.818,27.181,21.909,20.545,19.181,17.818,16.454,15.09,10.727,8.545,8.636,8.727,8.818,8.909,9.09,8.9,8.666,9.5,10.571,12],"unit": "%","type": "line","valueDecimals": 0}]}';
var obj = JSON.parse(t);
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.each(obj.datasets, function (i, dataset) {
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [obj.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20,
zoomType: 'x'
},
plotOptions: {
series: {
zones: [{
value: 3,
className: 'zone-2'
}, {
value: 10,
className: 'zone-1'
}, {
className: 'zone-2'
}],
}
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} ساعت'
}
},
yAxis: [{
plotLines: [{
label: {
text: 'max',
x: 25
},
color: 'red',
width: 2,
value: 10,
dashStyle: 'longdashdot'
},{
label: {
text: 'min',
x: 25
},
color: 'red',
width: 2,
value: 3,
dashStyle: 'longdashdot'
}],
title: {
text: null
}
},{
plotLines: [{
label: {
text: 'max',
x: 25
},
color: 'red',
width: 2,
value: 550,
dashStyle: 'longdashdot'
},{
label: {
text: 'min',
x: 25
},
color: 'red',
width: 2,
value: 150,
dashStyle: 'longdashdot'
}],
title: {
text: null
}
},{
plotLines: [{
label: {
text: 'max',
x: 25
},
color: 'red',
width: 2,
value: 125,
dashStyle: 'longdashdot'
},{
label: {
text: 'min',
x: 25
},
color: 'blue',
width: 2,
value: 50,
dashStyle: 'longdashdot'
}],
title: {
text: null
}
}],
tooltip: {
positioner: function () {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
yAxis:i,
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
.highcharts-point {
stroke: white;
}
.highcharts-graph.zone-0 {
stroke: red;
}
.highcharts-area.zone-0 {
fill: red;
}
.highcharts-point.zone-0 {
fill: red;
}
.highcharts-graph.zone-1 {
stroke: green;
}
.highcharts-area.zone-1 {
fill: green;
}
.highcharts-point.zone-1 {
fill: green;
}
.highcharts-graph.zone-2 {
stroke: red;
}
.highcharts-area.zone-2 {
fill: red;
}
.highcharts-point.zone-2 {
fill: red;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

You are using the same values for zones in both charts. You need to change their values on each chart creation.
API Reference:
http://api.highcharts.com/highcharts/Highcharts.setOptions
Example:
http://jsfiddle.net/8u0k32et/

Related

By default, hover hides all other columns in all groups. How can I make it so that only the columns in that group are hidden on hover?
I found the hover event in the documentation, and getting the column (upper left), but how to hide it with it? Maybe through tooltip somehow?
My question in original view.
An example of how it works now:
Example how to:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
title: {
text: 'Some text'
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Title y'
}
},
/*tooltip: {
shared: true,
split: true,
},*/
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ', y: ' + this.y
});
}
}
},
events: {
mouseOut: function (){
if (this.chart.lbl) {
this.chart.lbl.hide();
}
}
}
},
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0,
events: {
mouseOver: function() {
console.log("1");
}
}
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}, {
name: 'Dev #3',
data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
}]
});
.actions, .chart {
margin: 15px auto;
width: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>

To achieve that, at first you need to set the opacity to 1 for inactive series and disable hover.
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false
}
},
Then, use the mouseOver and mouseOut point events to find the points with the same category as the hovering one, and to update them with new opacity.
point: {
events: {
mouseOver: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
if (point.category === category) {
point.update({
opacity: 0.2
}, false)
}
})
})
chart.redraw()
},
mouseOut: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
point.update({
opacity: 1
}, false)
})
})
chart.redraw()
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/5Lcn6d8e/
API References:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
https://api.highcharts.com/class-reference/Highcharts.Point#update

The 3 labels that I have on the horizontal stacked bar, the data flow for label 1 is different than label 2 and 3. Compare to label 2 and 3, label 1 colors flow is different.
When I hover over label 1 bars, I see correct title getting displayed in the tooltip that matches with the legend at the bottom:
However, when I hover the bar for label 2 and 3, which in this dark red, I still see "Strongly Agree" showing up in the tooltip, whereas it should have been "Strongly Disagree" if go by the legends at the bottom:
Is this something that is managable to fix it in higcharts? If so, can someone please help me how I would fix the tooltip title for label 2 and 3?
https://jsfiddle.net/samwhite/a4wtr0zb/
let chart = Highcharts.chart('container1_1', {
chart: {
type: 'bar',
height: 300
},
credits: {
enabled: false
},
yAxis: {
title: { text: 'Response Rate' },
max: 100,
maxPadding: 0,
labels: {
format: '{value}%'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
tooltip: {
formatter: function () {
return '<b>'+ tooltip_titles[0][this.series.index] + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
}
},
plotOptions: {
series: {
stacking: 'percent',
pointWidth: 20,
borderWidth: 0,
},
bar: {
states: {
inactive: {
enabled: true
},
hover: {
opacity: .9
}
}
}
},
legend: {
reversed: true,
align: 'right'
},
title: {
align: 'left',
text: 'Progress on Diversity, Inclusion, and Opportunity in our Workplace',
style: {
fontSize: '20px',
fontWeight: 'bold',
}
},
xAxis: {
categories: labels,
labels: {
style: {
fontSize: '1em',
color: '#000',
width: 370,
float: 'left'
}
}
},
series: [{
name: 'Strongly Agree',
color: colors[4],
data: []
}, {
name: 'Agree',
color: colors[3],
data: []
}, {
name: 'Neither Agree nor Disagree',
color: colors[2],
data: []
}, {
name: 'Disagree',
color: colors[1],
data: []
}, {
name: 'Strongly Disagree',
color: colors[0],
data: []
}]
});

I made 2 changes to the fiddle
Change tooltip
Change to show the series name instead of referencing a list
formatter: function () {
return '<b>'+ this.series.name + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
}
Change setData()
Remove all the "colors" from setData to ensure consistency across categories.
series.setData([
{
name: tooltip_titles[s],
//color: colors[s],
y: dept_data["102"][4-s]
},
{
name: tooltip_titles[s],
// color: colors[Math.abs(s - 4)],
y: dept_data["104"][4-s]
},
{
name: tooltip_titles[s],
// color: colors[Math.abs(s - 4)],
y: dept_data["105"][4-s]
}]);
Here's the result:
For the first one:
For the second one:
The updated fiddle is here:

I have drawn two static lines in my chart to indicate high and low range. I could keep labels for the line but I can't keep a tooltip for the the static line. Is there any way I can do this?
yAxis: {
plotLines: [{
value: 70,
width: 1,
color: '#68AF46'
label: {
style: {
color: '#FE7246',
fontWeight: 'bold'
},
text: '70',
align: 'right',
x: -10,
y: 16
},
},
{
value: 180,
width: 1,
color: '#FE7246',
label: {
text: '180',
align: 'right',
style: {
color: '#FE7246',
fontWeight: 'bold'
},
},
}]
}
I find no property to keep tooltip for plotlines.

I don't think this functionality exists by default in Highcharts, but you could create it by listening for the mouseover event on your plotLine and creating the tooltip manually. Then, on mouseout, just dismiss the tooltip.
Here's an example with a plotLine with tooltip on y = 50:
Highcharts.chart('container', {
chart: {
styledMode: true
},
title: {
text: 'Tooltip On PlotLine'
},
yAxis: {
plotLines: [{
value: 50,
width: 1,
color: '#68AF46',
label: {
style: {
color: '#FE7246',
fontWeight: 'bold'
},
text: '50',
align: 'right',
x: -10,
y: 16
},
events: {
mouseover: function(e) {
var series = this.axis.series[0];
var chart = series.chart;
var PointClass = series.pointClass;
var tooltip = chart.tooltip;
var point = (new PointClass()).init(
series, ['PlotLine', this.options.value]
);
var normalizedEvent = chart.pointer.normalize(e);
point.tooltipPos = [
normalizedEvent.chartX - chart.plotLeft,
normalizedEvent.chartY - chart.plotTop
];
tooltip.refresh(point);
},
mouseout: function(e) {
this.axis.chart.tooltip.hide();
}
}
}, ]
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
series: [{
data: [10, 30, 20, 60, 80]
}]
});
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
height: 400px;
max-width: 800px;
margin: 0 auto;
}
.highcharts-tooltip-box {
fill: black;
fill-opacity: 0.6;
stroke-width: 0;
}
.highcharts-tooltip text {
fill: white;
text-shadow: 0 0 3px black;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

You can also add two additional dummy series and hide them under the plot lines:
series: [{
data: [1, 50, 100, 200]
}, {
data: [70, 70, 70, 70],
showInLegend: false,
lineWidth: 0.5,
color: 'transparent',
marker: {
radius: 0
},
tooltip: {
pointFormat: 'plotLine1'
}
}, {
data: [180, 180, 180, 180],
showInLegend: false,
color: 'transparent',
marker: {
radius: 0
},
tooltip: {
pointFormat: 'plotLine2'
}
}]
Live demo: http://jsfiddle.net/BlackLabel/2Ln05yes/
API Reference: https://api.highcharts.com/highcharts/series.line.tooltip

Im using the following code to redraw my plot band by clicking on button. Event happens only once and instead of permanently changing the region of plotband it jums for a second and then comes back to its original state.
var drugScatterPlot = function (ensemblID, drugName) {
var myData;
$.get("./php/drugActivityJSON.php", {
ensemblID: ensemblID,
drugName: drugName
},
function (data) {
myData = JSON.parse(data);
$(function () {
$('#scatterPlot').highcharts({
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function (event) {
// alert(this.name + ' clicked\n' +
// 'Alt: ' + event.altKey + '\n' +
// 'Control: ' + event.ctrlKey + '\n' +
// 'Shift: ' + event.shiftKey + '\n');
highlightResidueByID(ensemblID, currentPDBID, currentChainID, event.point.x);
}
}
}
},
tooltip: {
backgroundColor: '#AAAAAA',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3
},
chart: {
type: 'scatter'
},
title: {
text: ''
},
xAxis: {
plotLines: [{
color: 'red', // Color value
dashStyle: 'longdashdot', // Style of the plot line. Default to solid
value: 400, // Value of where the line will appear
width: 3, // Width of the line
id: "plot-line-1"
},
{
color: 'red', // Color value
dashStyle: 'longdashdot', // Style of the plot line. Default to solid
value: 600, // Value of where the line will appear
width: 3, // Width of the line
id: "plot-line-2"
}
],
plotBands: [{
color: '#EEEEEE', // Color value
from: 400, // Start of the plot band
to: 600, // End of the plot band
id: "plot-band-1"
}],
},
yAxis: {
title: {
text: 'Activity area'
}
},
series: [{
name: 'Residue Value',
data: myData
}]
});
/* -------------------BUTTON ACTION ------------------------------*/
var chart = $('#scatterPlot').highcharts(),
$button = $('.ENSEMBLDomain');
$button.click(function () {
chart.xAxis[0].removePlotBand('plot-band-1');
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].removePlotLine('plot-line-2');
chart.xAxis[0].addPlotBand({
from: 200,
to: 300,
color: '#EEEEEE',
id: 'plot-band-1'
});
chart.xAxis[0].addPlotLine({
value: 200,
color: 'red',
width: 2,
dashStyle: 'longdashdot',
id: 'plot-line-1'
});
chart.xAxis[0].addPlotLine({
value: 300,
color: 'red',
width: 2,
dashStyle: 'longdashdot',
id: 'plot-line-2'
});
});
});
});
};

I'm using Highcharts to develop a customized chart. Here is what I've gotten by my own jsfiddle.
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
inverted: true,
height: 700,
width: 780,
marginRight: 20
},
credits: {
enabled: false
},
colors: [
'#828385',
'#3AAFC1',
'#F87D2A',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'],
exporting: {
enabled: false
},
title: {
text: ' '
},
subtitle: {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
},
legend: {
itemDistance: 30,
x: 180,
verticalAlign: 'top'
},
xAxis: {
categories: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9", "Label10"],
offset: -410,
labels: {
overflow: 'justify'
},
plotLines: [{
color: '#A0A0A0',
width: 1,
value: 0
}, {
color: '#A0A0A0',
width: 1,
value: 1
}, {
color: '#A0A0A0',
width: 1,
value: 2
}, {
color: '#A0A0A0',
width: 1,
value: 3
}, {
color: '#A0A0A0',
width: 1,
value: 4
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 6
}, {
color: '#A0A0A0',
width: 1,
value: 7
}, {
color: '#A0A0A0',
width: 1,
value: 8
}, {
color: '#A0A0A0',
width: 1,
value: 9
}]
},
yAxis: {
title: {
text: 'Índice teste'
},
max: 100,
min: 0,
},
plotOptions: {
area: {
fillOpacity: 0.5
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
if (jQuery('#type_group_name_hidden').val() == 'Processo') {
jQuery('#type_group_name_hidden').val('Atividade');
} else if (jQuery('#type_group_name_hidden').val() == 'Atividade') {
jQuery('#type_group_name_hidden').val('Procedimento');
} else if (jQuery('#type_group_name_hidden').val() == 'Procedimento') {
jQuery('#type_group_name_hidden').val('Processo');
}
jQuery('#group_name_hidden').val(this.category);
requestAjaxChart('processos', buildProcessos);
}
}
},
marker: {
lineWidth: 1
},
threshold: 50
}
},
series: [{
name: "Market",
data: [46.503590664272934, 51.39078282828278, 56.89226932668327, 47.66801075268824, 46.82561768530563, 59.23058676654176, 51.08220338983055, 46.17849829351536, 55.84550063371354, 51.428756058158314]
}, {
name: "My network",
data: [48.175, 27.159999999999997, 39.916666666666664, 38.6, 53.85, 38.949999999999996, 30.4, 51.9, 33.519999999999996, 54.7875]
}, {
name: "Avg",
data: [70, 80, 65, 75, 85, 82, 72, 69, 71, 58]
}]
});
});
Even it looks pretty good, it's not exactly what the client desire. I need to do some changes as described bellow:
Remove all the vertical lines on xAxis. As my chart is a inverted one, I couldn't figure out how to remove them.
On the xAxis values (0 - 100), remove the intermediaries values (10, 20, 30, ...) keeping just the first and last value (0, 100)
Move the yAxis labels upon the horizontal lines
Make clickable the points behind the overflowed chart area
I've tried almost all configuration options but with no success.
Any suggestion?

Some answers :
1) See from docs gridlineWidth property.
2) See from docs tickPositions property.
3) Another docs labels.y property.
4) Not possible, even if it's SVG/VML it still is HTML, you can't make clickable DIV which is positioned behind another one.