score:5
Accepted answer
Just a little change:
tooltip: {
formatter: function() {
for(var i=0; i<5; i++)
{
this.series.data[i].setState('hover');
}
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
Working fiddle: http://jsfiddle.net/robertrozas/9W8h4/
score:2
You need to add events to each series please see here
or here : http://jsfiddle.net/uST2P/
$(function () {
var myCustomEvent = {
mouseOver: function () {
overSeriesIndex = this.index;
for (var i = 0; i < this.data.length; i++) {
this.data[i].setState('hover');
}
},
mouseOut: function () {
for (var i = 0; i < this.data.length; i++) {
this.data[i].setState('');
}
}
};
$('#container').highcharts({
chart: {
type: 'column',
width: 585
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0,
borderColor: 'white',
borderWidth: 1,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
},
series: {
pointWidth: 100
}
},
series: [{
events: myCustomEvent,
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
events: myCustomEvent,
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
events: myCustomEvent,
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
Source: stackoverflow.com
Related Query
- HighCharts : Highlight entire series when hover and restore state when out
- Customise Highcharts Pie Chart Selection State so that slice does not animate out when selected
- Highcharts - Tooltip and series name are out of their boxes in chrome
- Stacked area in Highcharts make my series fading in and fading out
- Highcharts error when add and shift data to hidden series
- Strange behavior with highcharts when using "column" type and multiple datetime series
- Highcharts xAxis padding is lost when navigator when zooming in and out and can't get the padding back when zoom out
- Highcharts series hover state enables after adding series
- HighCharts / HighStock newly added series have problem with shared tooltips and mouse hover effect
- Highchart throws errors when zoom out and hover point
- How to highlight cells and yaxis ticks on highcharts heatmap hover
- Get x and y value of a series in highcharts when curve is being plotted
- How to make legend labels to bring out the series of a pie chart and not make them disappear when label is clicked in HighCharts?
- how to enable only 1 out of 2 column column graph by default when page loads in highcharts and the 2nd one gets visible when toggled in the legend
- Highcharts hover delay and not rendering with multiple series
- Plot Bar chart and Line series chart on separate x-axis in Highcharts out of common dataset
- Incorrect data point value in highcharts navigator series when extending min and max date
- highcharts - disable fading series on marker hover
- Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
- Highcharts data series issue with ajax/json and PHP
- Highcharts - How to hide series name and Y value in tooltip
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Using Highcharts and displaying a message over or on the chart when there is no data
- Highcharts with JSON data and multiple series
- Using HighCharts and DotNet.HighCharts to "Play" Multiple Series
- Highcharts shared tooltip for line series and scatter plot not working
- Stop HighCharts change transparency of another series on hover of one series
- Highcharts Areaspline - Highlight a column on hover effect
- Increase different marker sizes when hovering series using highcharts
More Query from same tag
- Highchart, How to resize auto if there is a lot of data, then scale accordingly to make all the data visible
- How do I add column-specific plotlines using High Charts?
- Tile layout for highcharts legend items
- Highcharts line segments and data point?
- updating the array that is being passed to highcharts in meteor app
- Highcharts export chart along with outer div
- Unhandled promise rejection mongoose aggregate
- How can I achieve this type of marker in highcharts?
- Highcharts - Color coded legend for solid gauge
- show only one series data in High charts in start of drawing/load
- Clear chart by click in highcharts
- Change color of the values in heatmap or remove the values in highcharter R package
- Can color of data label be different inside and outside of the bar in Highchart
- how to make specific labels outside gauge chart
- Clickable HTML element that closes Highcharts tooltip
- Add marker on highchart
- Highcharts legendItemClick event - Stop chart auto rendering
- Step serie for navigator
- Issue in multiple exporting for HighChart with scrollbar
- Sankey paths/links are loosing their width when the link has a big curve
- Using Bootstrap Datepicker with Highcharts
- Fire click event on a highchart column drilldown chart on clicking x axis for drill down reports
- How can I hide a series from initially being displayed in Highcharts
- Highcharts: To achieve exploded sections behaviour in Sunburst chart similar to pie charts
- How do I format x-axis label in highcharts
- Javascript variable not working inside of highcharts
- How to remove the white outline/border on Highcharts 3D on setData?
- How to position rangeSelector buttons to the right Highstock/Highcharts
- Yii and ActiveRecord Group by Count
- Highcharts highlight single point on line