We Keep Coding

Boxplot in highcharts displaying incorrect values for high, and median

I am creating a box plot from a simple series of data:
var box_plot = Highcharts.chart(container, {
chart: {
type: 'boxplot'
},
title: {
text: chart_title
},
legend: {
enabled: false
},
series: [{
name: 'Observations',
data: [
[1,2,3,4,5,6,7,8,9,10,11,12,13]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}]
});
return box_plot;
But when the box plot is generated, the high is shown as 6 and median as 4. In the data the high is 13 and median is 6.
Please inform what I am doing wrong. Screenshot of code and box plot attached.
Thank You

You can provide data to boxplot series in two ways:
An array of arrays with 6 or 5 values. In this case, the values correspond to x,low,q1,median,q3,high. If the first value is a string, it is applied as the name of the point, and the x value is inferred. The x value can also be omitted, in which case the inner arrays should be of length 5. Then the x value is automatically calculated, either starting at 0 and incremented by 1, or from pointStart and pointInterval given in the series options.
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
An array of objects with named values. The following snippet shows only a few settings, see the complete options set below. If the total number of data points exceeds the series' turboThreshold, this option is not available.
data: [{
x: 1,
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"
}]
Highcharts doesn't have any auto data calculation procedure in this case. You need to prepare the required data structure by yourself. For example:
const data = [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
];
const processedData = data.map((dataEl, index) => ({
x: index,
low: Math.min(...dataEl),
median: dataEl[(dataEl.length - 1) / 2],
high: Math.max(...dataEl),
...
}));
Live demo: http://jsfiddle.net/BlackLabel/eqz4851x/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.data

How to limit the data points to get display in highchart

I have a requirement to limit the data points in highchart when it displayed due to space issue. Let's say if I have 100 data points in one series. I just want to display first 5 and when clicking on the expand button(I need to add a expand button in the chart) the highchart will display with all 100 points. (The expanded view will be in a modal window and the modal window will have the full hight).
I know the series are complex like, I can have multiple series in the to chart like this
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
and I can have complex data model like this
1.data: [1052, 954, 4250, 740, 38]
2.data: [[5, 2], [6, 3], [8, 2]]
3.
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
Note: Am not setting the series, am creating a widget in JavaScript which includes Highchart inside it. I can override the Highchart code for this.

How to style one column in a stacked bar?

I want all bars in the last column to have a certain color.
With the following code, only the topmost bar is styled (see http://jsfiddle.net/kalyfe/gvczd6nx/):
var data = google.visualization.arrayToDataTable([
['week', 'apples', 'bananas', {role: 'style'}],
['last week', 5, 17, ''],
['this week', 9, 22, ''],
['projection', 11, 27, 'color:#ddd;']
]);
How else would I apply styling to a column in a stacked bar?

Sets the style for apples bar, like the style for the bananas bar
var data = google.visualization.arrayToDataTable([
['week', 'apples', {role: 'style'}, 'bananas', {role: 'style'}],
['last week', 5, '', 17, ''],
['this week', 9, '', 22, ''],
['projection', 11, 'color:#ddd;', 27, 'color:#ddd;']
]);
http://jsfiddle.net/gvczd6nx/3/

if you want to set the style for each column independently then give the color value as #R3tep has mentioned but if you want it for group of columns then may be try like this:
var data = google.visualization.arrayToDataTable([
['week', 'apples', 'bananas','oranges'],
['last week', 5, 17, 11],
['this week', 9, 22, 12],
['projection', 11, 27,10]
]);
new google.visualization.ColumnChart(document.getElementById('chart')).
draw(data, {
title: "Weekly fruit intake",
width: 600,
height: 400,
isStacked: true,
colors: ['#0f0', '#ddd', '#ec8f6e', '#f3b49f', '#f6c7b6']
});
}
see demo here
also see this:https://developers.google.com/chart/interactive/docs/gallery/columnchart

Highcharts: Irregular time intervals of datetime x-axis not hovering over all the points

I hope someone could point me to the right direction here. I have a series of data that spans over an irregular datetime intervals. But hovering over the points shows only the first date point.
http://jsfiddle.net/8rkcqxyn/
$(function () {
$('#container').highcharts({
exporting: {
enabled: false
},
chart: {
type: 'spline',
},
title: {
text: 'Debt Obligations'
},
xAxis: {
type: 'datetime',
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Debt'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y}'
},
series: [{
name: 'Debt Obligation',
data: [
[Date.UTC(2014, 6, 7), 4500],
[Date.UTC(2014, 5, 24), 5454],
[Date.UTC(2014, 5, 23), 222],
[Date.UTC(2014, 5, 21), 1000]
]
}]
});
});
Appreciate your help.
Thanks

You must learn to use the console to debug.
If you check your fiddle, and have the console enabled, you will see that it displays an "informational" message:
Highcharts error #15: www.highcharts.com/errors/15
If you check the above link, it says that your data isn't sorted beforehand. That's your problem.
Indeed, if you put the data in this order:
[Date.UTC(2014, 5, 21), 1000],
[Date.UTC(2014, 5, 23), 222],
[Date.UTC(2014, 5, 24), 5454],
[Date.UTC(2014, 6, 7), 4500]
It works as expected.

Add a custom text tooltip that differs from point to point in Highcharts

I am trying to develop a chart that displays a custom 'text' tooltip that I can set to change from point to point. Here is my code as of now:
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
series: [{
name: 'Winter 2007-2008',
data: [
[Date.UTC(1970, 9, 27), 0 ],
[Date.UTC(1970, 10, 10), 0.6 ],
[Date.UTC(1970, 10, 18), 0.7 ],
[Date.UTC(1970, 11, 2), 0.8 ],
[Date.UTC(1970, 11, 9), 0.6 ],
[Date.UTC(1970, 11, 16), 0.6 ],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81]
]
}
Now this works as intended, but I am trying to add an extra bit of text that will appear in the tooltip when hovering over a point. This is my desired input for a data point (although I dont know if I will have to change it for my final product).
[Date.UTC(1970, 10, 18), 0.7 , 'custom tooltip1'],
[Date.UTC(1970, 10, 18), 0.7 , 'custom tooltip2'],
I would want the text displayed in a newline below the current tooltip:
Please let me know if you have any suggestions or can point me somewhere I can find some answers.
Thanks!

Change your data to be something like this:
data: [
{x: Date.UTC(1970, 10, 18),
y: 0.7 ,
customtooltip: 'custom tooltip1'},
{x: Date.UTC(1970, 10, 18),
y: 0.7 ,
customtooltip: 'custom tooltip2'}
]
Then in do a tooltip formatter function like this:
tooltip: {
formatter: function() {
var dt = new Date(this.x);
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var dtstr = dt.getDate()+". "+months[dt.getMonth()];
var tooltip = '<b>'+this.series.name+'</b><br>'+dtstr+': '+this.y+' m<br>'+this.point.options.customtooltip;
return tooltip;
}
}
See how that works for you.