cannot use strings in data in highcharts on doughnut charts - highcharts

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/

Related

How to include custom data in a point data of arearange chart

I am creating an arearange chart in Highcharts. Data to this chart is passed as an array of array like [[1,2,3],..]. Can i pass custom data in this point like [[1,2,3, "abc:12"],[5,6,7,"abc:14"]..].
If i want to pass custom data for each point, please let me know how to pass.
You can use keys property to map the values and for example use the custom value in a tooltip:
Highcharts.chart('container', {
series: [{
keys: ['x', 'low', 'high', 'customValue'],
type: 'arearange',
data: [
[1, 2, 3, "abc:12"],
[5, 6, 7, "abc:14"]
]
}],
tooltip: {
pointFormat: '{point.customValue}'
}
});
Live demo: http://jsfiddle.net/BlackLabel/ncmy1jt7/
API Reference: https://api.highcharts.com/highcharts/series.arearange.keys
Or define the series data as an array of objects:
series: [{
keys: ['x', 'low', 'high', 'customValue'],
type: 'arearange',
data: [{
x: 1,
low: 2,
high: 3,
customValue: "abc:12"
}, {
x: 5,
low: 6,
high: 7,
customValue: "abc:14"
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/s035q8um/

Highcharts: how to separate stacked columns on datetime axis

Screenshot of issue
I have multiple series shown on a datetime axis.
The problem is that the same series can have multiple entries for the same date.
Is there a way to separate these stacks based on another ID variable that I'm passing to highcharts?
This example is close to what I need: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
But instead of defining stack by series, I need it defined by individual data points.
But instead of defining stack by series, I need it defined by
individual data points.
Unfortunately, it will require a lot of custom code. However, there is a better solution with the use of linkedTo and id series properties. When you have the same series which have multiple entries for the same date split them as a separate series with different stack. Set for example id = '1' in the first series and linkedTo = '1' in the second one. When two series are linked, only the first one appears in the legend.
Example code:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
id: 'john'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'female',
linkedTo: 'john'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
Demo:
https://jsfiddle.net/BlackLabel/ure08d4k/6/

Hide linked series on legend hover in Highcharts

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.

highchart to plot combined line chart per bar instead of per xAxis label

I am trying to plot column + line chart combined using Highcharts.
Similar to this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
but, I wanted to plot the line points per bar instead of per xAxis label. Not sure if this is even doable?
I tried to give it a shot but no success!
https://jsfiddle.net/e5e6bcfL/6/
Here is the xAxis categories and series data:
xAxis: {
categories: ['John', 'Ginni', 'Vicki', 'Alan', 'Alic']
}
...
series: [{
name: 'Male',
data: [10, 1, 8, 7, null]
}, {
name: 'Female',
data: [null, 12, 9, 2, 7]
},
{
yAxis: 1,
name: 'avgAge',
type: 'spline',
// this data is per xAxis category and per name/legend
// eg John Male avgAge is 35, Ginni Female avgAge is 30
data: [35, 18, 30, 28, 26, 32, 25, 36]
}]
Any help is appreciated.

Displaying count on bar and percentage on Y-axis of cloumn chart using Highcharts

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
}],
}]

Resources