According to http://api.highcharts.com/highcharts/series.line, by linking two series, "Toggling the visibility of this also toggles the linked series".
When linking two series, I expect them to both be activated when hovering a legend item. This does not work with this setup
Highcharts.chart('container', {
title: { text: 'Linked Series'},
series: [{
id: 2,
data: [3, 1, 3, 2]
}, {
id: 0,
data: [2, 3, 2, 1]
}, {
id: 1,
linkedTo: 2,
data: [1, 2, 1, 3]
}, ]
});
How can I make sure, that all linked series are hovered at the same time.
https://fiddle.jshell.net/papa_bravo/oxbm6mke/
It seems to be a small bug in Highcharts; if ids are numbers then turning off the visibility by clicking the legend does not work properly. If you convert ids to stings it works OK
Highcharts.chart('container', {
title: { text: 'Linked Series'},
series: [{
id: '2',
data: [3, 1, 3, 2]
}, {
id: '0',
data: [2, 3, 2, 1]
}, {
id: '1',
linkedTo: '2',
data: [1, 2, 1, 3]
}, ]
});
https://fiddle.jshell.net/oxbm6mke/6/
EDIT: Actually it's not a bug. According to the documentation linkedTo must be a string.
Related
Why can't I use strings in data on a highchart doughnut chart? You can use it on Bar charts but not doughnut for some reason?
Example of strings in data for bar chart (no errors):
Fiddle: http://jsfiddle.net/8rsywuc7/
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: ['','','','','']
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
Example of strings in data for doughnut chart (see error):
Fiddle: http://jsfiddle.net/troqjcnz/
"data": [38, 44, 14, 20, 25, 75],
"name": "Male",
},
{
"data": ['','','','','',''],
"name": "Female",
},
{
"data": [38, 44, 14, 20, 25, 75],
"name": "No reply",
}
Notice that there is a big difference between those two series configs. In the first one, the data is an array of empty string, meanwhile in the second data becomes an array of objects where y is set to empty string. If you will do the same in the column, the same error will occur - see: http://jsfiddle.net/8rsywuc7/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{
name: 'test',
y: ''
}]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
What can I suggest is:
use null rather than empty strings (I am aware that it is not the same, but the output should be similar), demo: http://jsfiddle.net/BlackLabel/jokbgryz/
change the logic responsible for creating data for something like is done here: http://jsfiddle.net/BlackLabel/9bov21gf/
I have names for each series in dynamic table. How can I read those for the legend? When set it on with enabled flag, only one text "Serie1" is shown.
And I want it to show "Car 1, Car2, Car3 ....."?
I can see the serie name (bar name) when hovering it with mouse, but can't get the same text into legend.
$(function () {
var series = [{name: 'Car 1',data: [[1, 3],[4, 6],[7, 9]]},
{name: 'Car 2',data: [[2, 3],[8, 10],[12, 18]]},
{name: 'Car 3',data: [[5, 9],[1, 2]]}];
var data = [];
for(var i=0;i<series.length;i++) {
for(var j=0;j<series[i].data.length;j++) {
data.push({
x: i,
low: series[i].data[j][0],
high: series[i].data[j][1],
name: series[i].name
});
}
}
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: true
},
series: [{data: data}]
});
});
You have to create three series, now you set only one series. Also, you need to disable grouping and specify x property for each point, so the points from the same series are in the same row.
var series = [{
name: 'Car 1',
data: [
[0, 1, 3],
[0, 4, 6],
[0, 7, 9]
]
}, {
name: 'Car 2',
data: [
[1, 2, 3],
[1, 8, 10],
[1, 12, 18]
]
}, {
name: 'Car 3',
data: [
[2, 5, 9],
[2, 1, 2]
]
}];
example: https://jsfiddle.net/kbcdkmok/1/
Update:
Your variable series is already defined with series name and data. use that directly Updated fiddle here
You need to add formatter function, as per below code:
tooltip: {
formatter:function(){
return ''+this.point.name+':'+ this.point.low +' - '+ this.point.high ;
}
}
Here is your fiddle updated
I would like to have a chart that represent data like this.
the series code would be something like this.
series: [{
name: 'Car 1',
data: [[1, 3], [4, 6], [7, 9]]
}, {
name: 'Car 2',
data: [[2, 3], [8, 10], [12, 18]]
}]
The first number on each array would be the starting point and the second the finishing point, and all arrays inside the main array would be on the same line.
An inverted columnrange chart should work. Your data isn't formatted in a way that would work with what you want, but transforming it isn't difficult. If you aren't stuck with the data format you showed, you just need a point object with x, low, and high.
For example:
{
x: 1,
low: 0,
high: 4
}
The following massages your current structure into the correct format:
$(function () {
var series = [{
name: 'Car 1',
data: [
[1, 3],
[4, 6],
[7, 9]
]
}, {
name: 'Car 2',
data: [
[2, 3],
[8, 10],
[12, 18]
]
}, {
name: 'Car 3',
data: [
[5, 9],
[1, 2]
]
}];
// massage the data
var data = [];
for(var i=0;i<series.length;i++) {
for(var j=0;j<series[i].data.length;j++) {
data.push({
x: j,
low: series[i].data[j][0],
high: series[i].data[j][1],
name: series[i].name
});
}
}
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Cars',
data: data
}]
});
});
http://jsfiddle.net/hqwrx4uy/
I want to change the distance between the grid lines (Y-axis) ..
They told me that I should use "tickPositioner" ...
But I have not figured out how ...
I have this code:
yAxis: {
reversed: true,
categories: ['0','10','20','30','50','80','130','210','340','550','700'],
labels: {
format: '{value} km',
enabled: true
},
title: {
text: "profondita'"
}
},
xAxis: {
min: 0,
max: 10,
labels: {
enabled: true
},
gridLineWidth: 1,
title: {
text: '<small><b>'+"Longitudine"+'</b></small>',
}
},
zAxis: {
min: 0,
max: 10,
labels: {
format: '{value} Lat',
enabled: true
},
title: {
text: "Latitude"
}
},
series: [{
colorbypoint:
{ color: "#FF0000"},
data: [
// [X, Y, Z]
[1, 1, 1],
[1, 9, 2],
[1, 1, 5],
[2, 3, 2],
[2, 6, 4],
[4, 5, 7],
[4, 2, 8],
[7, 1, 3],
[7, 1, 5],
[8, 1, 5]
],
}]
And I would have 50px between the first category and the second category (value between 0 and the value 10), have 70 px between the second category and the third category (between the value and the value 10 20) ..
If you can not show me a small example, you can tell me how I should proceed? I searched on StackOverflow but have not found anything useful
You can use empty categories, but you will be able to set only multiples of single label distance.
Example: http://jsfiddle.net/j86jkfvj/69/
categories: ['0', '10', '20', '30', '40','50','60','70', '80','90','100','110','120', '130', '210', '340', '550', '700'],
tickPositions: [0,1,2,3,5,8,13],
Alternatively you could use other type of axis then categorized ('linear' - default one) as suggested in comments and adjust your data.
My series data and column chart look like this.
series data array values are the count which i need to display on the top of bars and series percentwithingroupvalues array data as in the fiddle should be my Y-axis data.
How to acheive this? Below is my data
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
/*Percentage is calculated as
Below values are random
(5)*100/(5+2+3)
*/
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
percentwithingroupvalues:[20,20,20,20,20]
}]
You need to set for each point object { }, instead of value y , see: http://jsfiddle.net/tRKad/3/
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.custom;
}
}
}
},
series: [{
name: 'John',
data: [{
custom: 5,
y: 20
}, {
custom: 3,
y: 15
}, {
custom: 4,
y: 11
}, {
custom: 22,
y: 7
}, {
custom: 33,
y: 2
}],
}]