Develop Reference

How to hide data in a series in highcharts boxplot?

I have a boxplot chart made with highcharts, and I have 2 series, one for the observations and one for the outliers. I want to hide one column in both of the series, but going through the API there doesn't seem to be a way to hide a data row, you can only remove one. Is there a way to do it with the API rather than having to hack my way around it?
Edit: Some examples on the structure:
series: [{
name: 'Observations',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"
}]},
{
name: 'Outliers',
type: 'scatter',
data: [
[0, 2],
[1, 5]
]
}
]
This structure has 2 series, with the first series having the boxes of the boxplot, and the second having the outliers. In other graphs, like the column graph, you can add each column as a series, which gives me more options to manipulate them, but here I have each column as a data array object. In Highcharts you can hide series by triggering the hide() function on the series, but you can't hide data objects, you can only remove them. What I want to do is hide a single data array object from rendering in the view.
As a workaround I can technically remove the object I want from data array and save it somewhere else, until I need it, but what I'm wondering is whether there's a better way of doing that, maybe using plotPoints or any other way.
Here's also a demo from the highcharts website. The data here are an array, but anything in the data API above still work on them. Here's the series api for comparison.

You can borrow setVisible method from pointClass in pie series prototype:
var pieSetVisible = Highcharts.seriesTypes.pie.prototype.pointClass.prototype.setVisible,
point1 = chart.series[0].points[0],
point2 = chart.series[1].points[0];
pieSetVisible.call(point1);
pieSetVisible.call(point2);
Live demo: http://jsfiddle.net/BlackLabel/ahckoLn5/

I found a solution. There are apparently 2 alternative ways to setup a Boxplot chart using series (which you can hide and show using the legend or the hide() and show() methods):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}, {
type: 'scatter',
data: [[0, 1], [0,2]] // outlier points
}]},
{
name: 'Series 2',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
// no outliers here
}
]
Basically you can put Observations and Outliers in one series/column, by giving the outliers type: 'scatter' as shown above. The problem with this method is that you still can't hide the outliers for some reason by calling the hide() and show() methods.
The alternative way of doing this is putting each column observations and each outlier observations in a separate series, and giving both the same x value (the outliers should have the x of the box, in this example it's 0):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}]},
{
type: 'scatter',
name: 'Series 2: Outliers',
data: [[0, 1], [0,2]]
}
{
name: 'Series 3',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
}
]
To stack the observations and outliers over each other you have to disable grouping in the options:
plotOptions: {
series: {
grouping: false,
}
},

highchart 3d column - show "beta axis title" and "beta axis label"

English is not my native language.If you don't understand my question,please tell me.
I want to show the "beta axis title" and "beta axis label" in highchart. What I want is as follows:
However, what I got is here:
I googled.I didn't find any solution to my problem.
my javascript code is as follows.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 50,
depth: 110
}
},
title: {
text: null
},
xAxis:{
title: {
text: "构建日期"
},
categories: ["2010-10-17","2010-10-18","2010-10-19","2010-10-20","2010-10-21","2010-10-22"],
},
yAxis: {
title: {
text: "内存(MB)"
}
},
plotOptions: {
column: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10
}
},
series: [{
name: 'HUAWEI',
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
name: 'XIAOMI',
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
name: 'oppo',
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});

You need to set the zAxis categories to have the labels, and the zAxis title to have the title. It is important to note that to show the labels, you need to define a min and max. This is a minimal example that will show it all (on top of eachother):
zAxis: {
title: {
text: 'TITLE HERE',
},
min: 0,
max: 2,
categories: ["HUAWEI", "XIAOMI", "oppo"]
}
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/3/
There is a lot of options for tweaking the look of this, you should have a look at the API on zAxis labels/titles.
API on zAxis.titles: https://api.highcharts.com/highcharts/zAxis.title
For example you can rotate and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/5/
Or you can use skew3d and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/6/
It depends a lot on what you want to write as the title and labels. You will just have to experiment.

Highcharts: Month seems to be off by one day

I have a highcharts which appears to show one day too many in the x-axis. This occurs when I set endOnTick to true, and if I instead set endOnTick to false the x-axis seems to be wrongly aligned (not in center, as if there were to be another tick that's supposed to be there). As you can see from my fiddle I am using moment.js to set the min/max dates, but startOf('month') works fine and endOf('month') should show the last day of the month, shouldn't it? I've tried to set UTC to false as you can see in the fiddle, but that didn't work. I am sorry if I'm missing something obvious here but I am quite new to both Highcharts and moment.js so please be patient with me :) Any tips would be appreciated.
Here is my code:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var myChart = $('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: moment().format('MMMM') + ' ' + moment().format('YYYY')
},
xAxis: {
title: {
text: 'DATE'
},
type: 'datetime',
endOnTick: true,
tickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%e'
},
min: moment().startOf('month'),
max: moment().endOf('month')
},
yAxis: {
title: {
text: null
},
max: 4,
min: 1,
allowDecimals: false,
tickInterval: 1
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
},
animation: false
}
},
series: [{
data: [
[Date.UTC(2017, 6, 25), 3.2],
[Date.UTC(2017, 7, 1), 2],
[Date.UTC(2017, 7, 5), 1.75],
[Date.UTC(2017, 7, 10), 2.4],
[Date.UTC(2017, 7, 15), 2.7],
[Date.UTC(2017, 7, 23), 2.3],
[Date.UTC(2017, 7, 28), 3],
[Date.UTC(2017, 7, 31), 2]
]
}, {
data: [
[Date.UTC(2017, 7, 1), 3],
[Date.UTC(2017, 7, 5), 2.75],
[Date.UTC(2017, 7, 10), 3.2],
[Date.UTC(2017, 7, 15), 2.3],
[Date.UTC(2017, 7, 23), 3.3],
[Date.UTC(2017, 7, 28), 1.5]
]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
},
})
}
)
And here is a fiddle with the same code: https://jsfiddle.net/t0eeab8b/1/
Thanks in advance!

Animation origin of Highcharts library

I want to build up a Highchart step-by-step. I got it working, but I'm not happy with the way it gets animated. The animation origin is the y-axis in this case, but I want the bars to rise up from the x-axis.
They do rise up from the x-axis when I have data visible on load. However, I want to start with an empty chart.
http://jsfiddle.net/ueC9g/1/
This is how I initialize highcharts:
new Highcharts.Chart ({
chart: {
type: 'column',
renderTo: 'columnChart'
},
title: {
text: 'Great chart'
},
xAxis: {
categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'],
min: 0,
max: 10,
title: {
text: 'Age'
},
showEmpty: true
},
yAxis: {
title: {
text: 'Some numbers'
},
min: 0,
max: 20,
showEmpty: true,
alternateGridColor: '#eee'
},
series: [{
name: 'male',
data: [1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]
}, {
name: 'female',
data: [2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]
}],
plotOptions: {
column: {
events: {
}
}
},
credits: {
enabled: false
}
});

When showing/hiding series, highcharts animates the change to the axis instead of the series itself. I can't find anyway to change this behavior. As a workaround, instead of showing/hiding the series why not add it as new on the click:
var i = 0;
$('#addBar').click(function(){
try {
if (i == 0) {
columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]});
}
else if (i == 1) {
columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]});
}
i++;
} catch(e){
console.dir(e);
}
});
I'd set up an initial empty series in my config too, so that the axes draw on start:
series: [{visible: false, showInLegend: false}],
See updated fiddle here.

Please familair with this example: http://jsfiddle.net/VcJ4K/5/
$.each(chart.series[0].data, function(i, point) {
window.setInterval(function() {
point.update(point.y2);
}, 500);
});

Highcharts columns have no width (seemingly arbitrarily)

I'm working with a column chart using Highcharts. The chart needs to handle an arbitrary number of columns.
Here's an example of one such chart that I need to handle:
$('#TimesChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Response Times'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Minutes'
}
},
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
});
The problem is that the columns have an extremely small width on this set of data. In some datasets (see the first graph in the jsfiddle link), the columns have normal width and are fine.
One possible workaround is to set the pointWidth to a fixed value, but then on large graphs the columns overlap. I've tried experimenting with pointPadding and grouping as well, to no avail.
http://jsfiddle.net/3NZZW/
Anyone know what's happening here?

That's really odd. But, you're first data series is in reverse date order. If you fix that, the chart is right.
http://jsfiddle.net/pUTQd/
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
(note I just changed the dates, I didn't change the data)