We Keep Coding

Highcharts multiple pie chart series hover

I'm using Highcharts to create two pie charts with the same keys but different data in each chart. My options object look like this:
const chartOptions = {
chart: {
type: 'pie'
},
legend: {
enabled: false
},
tooltip: {
enabled: true,
},
plotOptions: {
pie: {
borderWidth: 0,
cursor: 'pointer'
},
series: {
states: {
hover: {
enabled: true
}
}
}
},
series: [
{
name: 'Chart One',
colorByPoint: true,
size: '50%',
center: ['25%', '50%'],
data: [
{color: '#000000', name: 'One', y: 43},
{color: '#666666', name: 'Two', y: 12},
{color: '#cccccc', name: 'Three', y: 54},
]
},
{
name: 'Chart Two',
colorByPoint: true,
size: '50%',
center: ['75%', '50%'],
data: [
{color: '#000000', name: 'One', y: 32},
{color: '#666666', name: 'Two', y: 78},
{color: '#cccccc', name: 'Three', y: 11},
]
}
]
};
This works almost as expected. But I cannot get one thing working.
On a column chart, when you have multiple series and hover over a point in series A, the corresponding points in the other series will also light up (the other points will dim down). But not in a pie chart. When I hover "Three in "Chart One", "Three" in "Chart Two" is not highlighted.
Is it possible to do this somehow?

In the mouseOver callback function you can find the related point and call setState('hover') on it:
plotOptions: {
...,
series: {
point: {
events: {
mouseOver: function() {
var relatedPoints = [],
series = this.series,
pIndex = this.index;
series.chart.series.forEach(function(s) {
if (s !== series) {
relatedPoints.push(s.points[pIndex]);
}
});
relatedPoints.forEach(function(p) {
p.setState('hover');
});
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/xm7gc5u6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#setState

How to display values at right side or down in Treemap in Highcharts

Hi I am new for this High-charts, I am using Tree-map of High-charts,If I saw output in small system values are coming out of box so how to make it responsive or how to display all values at right side like how pie chart all values displaying right side http://jsfiddle.net/7fb3x9ys/. Here is code
Highcharts.chart('container', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Fruit consumption'
}
});

Highcharts - Column chart customization

I am creating column chart using Highcharts library. I am trying to custom Column chart according my requirement but two things I am unable to do.
First, bottom border of the column chart and second is column background for all the series. Look at the image below, what I need to achieve.
What I have done so far is here: jsfiddle
jQuery(document).ready(function(jQuery) {
jQuery('#portlet-content').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'column'
},
title: {
text: 'Number of Applications'
},
subtitle: {
text: 'BY COUNTRY'
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
padding: 3,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
lineHeight: '14px'
},
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
tooltip: {
formatter: function() {
return '<b style="color:'+this.point.color+'">'+ this.y +'</b>';
},
useHTML: true,
borderWidth: 0,
style: {
padding: 0,
fontSize: '16px'
},
shadow: false
},
series: [
{
name: "United Kingdom",
color: '#32323A',
data: [
[294]
]
}, {
name: "USA",
color: '#EB4825',
data: [
[65]
]
}
, {
name: "United Arab Emirates",
color: '#F7CC1E',
data: [
[35]
]
}
, {
name: "India",
color: '#24C746',
data: [
[23]
]
}
, {
name: "Canada",
color: '#2587EC',
data: [
[18]
]
}
]
});
});

Note: I have modified my answer to better address the specific requests in the original poster's question.
Here's what I would suggest:
Create a stacked column chart, where one of the series is a "dummy" series with which the user can't interact. This will serve as your background.
Here's a quick fiddle I worked up based on the Highcharts stacked column demo: http://jsfiddle.net/brightmatrix/v97p3eam/
plotOptions: {
column: { stacking: 'percent' }
},
series: [
/* this is the "dummy" series
set the "showInLegend" and "enableMouseTracking" attributes
to "false" to prevent user interaction */
{ name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray',
showInLegend: false, enableMouseTracking: false },
/* here's the real data; set a unique color for each
set nulls for the columns where that color/data is not needed */
{ name: 'Series 1', color: 'red', data: [2,null,null,null,null] },
{ name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
{ name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
{ name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
{ name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]
Please let me know if this is helpful for you!

Highcharts center yaxis value at zero on column chart

I want to center YAxis value at zero on Highcharts Column chart with positive & negative values like this: https://drive.google.com/open?id=0B_IZwAPijvleZzBhUnVaSFhBcDQ,
these axis values are dynamic loaded.
With jqPlot there is an option called forceTickAt0 at axis settings that can meet my requirements,
I'd like to know if this is possible with Highcharts, if yes how to do?
Thanks.
Update:
Ok, in order to clearly explain my question, I've created a jsFiddle.
As you see on the chart, the max/min series value at y-axis is 5001/-4280, but Highcharts shows 15000/-5000 at y-axis boundary and I expect it to be 6000/-5000, and if you remove the first value 5001 from y-axis series, Highcharts will show 5000/-5000 at y-axis boundary that's what I expected. So add a 5001 value at y-axis series causes the y-axis boundary becomes too far away.
The key point is I don't want the biggest/smallest series value at y-axis got too much far away from chart max/min boundary value.
Following is the code, for explanation purpose, series data here use fixed values, In a real situation they are all dynamic loaded.
$(function() {
$('#container').highcharts({
chart: {
zoomType: 'xy',
plotBackgroundColor: '#fffdf6',
alignTicks: true,
},
title: {
text: 'Country Illegally Building Num Average Tax',
},
subtitle: {
text: ''
},
xAxis: [{
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
crosshair: true,
title: {
text: 'Country Code',
}
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} ',
},
title: {
text: 'Illegally Building Num',
},
}, { // Secondary yAxis
min: 0, //Required to start at zero
title: {
text: 'Average Tax ($)',
style: {
color: '#666'
}
},
labels: {
format: '{value} $',
style: {
color: '#666'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
series: [{
color: 'red',
negativeColor: 'green',
name: 'Illegally Building Num',
type: 'column',
data: [5001, 369, 475, 891, 3585, 4235, -1711, -3648, -3749, -2555, -4280, -1017, 2001, -900],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'Average Tax',
type: 'line',
data: [140.5, 141, 139.5, 162, 151, 142, 147, 151, 154, 142, 146, 149, 153, 111.5],
yAxis: 1,
tooltip: {
valueSuffix: ' $'
}
}]
});
});

I don't believe there is a forceiTickAt0, but this functionality can easily be accomplished by setting the min/max of the y-axis. For example:
yAxis: {
min:-20,
max:20,
title: {
text: 'Axis Title'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
This would have a center point at 0, and depending on your data you can dynamically set the max to be the absolute value of the min.

highcharts grid lines are dissappearing on zoom

I am using highcharts to display charts in my project. Everything is great but when I use zoom buttons the grid lines are dissapearing.
Does anyone know what could be the reason for this?
Below is my code. I did not change much from the examples provided in highcharts.com.
I get the chart with grid lines first without any problem. Only when I use zoom buttons grid lines dissapear. This is not happening with highcharts examples.
var chart = new Highcharts.StockChart({
chart: {
renderTo: <id of my div>
},
rangeSelector: {
buttons: [
{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}
],
selected:3,
inputPosition:{
x:25,
y:25,
align:"left"
},
align:"left"
},
title: {
margin:40,
text: title,
style:{
color:"#000",
fontFamily: "AvenirNextLTW01-MediumC 721311 !important",
fontWeight:"bold",
fontSize:"12px"
}
},
scrollbar : {
enabled : false
},
yAxis: [{
title: {
text: ytitle
},
lineWidth: 2,
}],
credits: {
enabled: false
},
exporting: {
enabled: false
},
loading:{
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
},
tooltip:
{
valueDecimals: 2,
style:{
fontSize:'9px'
}
},
series: [
{
type: 'line',
color: '#4572A7',
name: title,
data: <data array>
}]
});
Edit: I have used the following plug in my website for grouping categories in x-axis. The above problem occurs wherever I used this plugin. Can anybody suggest what I can change to get rid of this problem? Or can anyone suggest an other plugin which gives this functionality?
http://blacklabel.github.io/grouped_categories/
I have used this plugin code in following jsfiddle and could reproduce the issue.
Click on zoom(1y,6m) buttons in this fiddle and observe that grid lines are disappearing
http://jsfiddle.net/92NDX/