Related
I have a boxplot with multiple series. I want to add a mean marker to the boxplot. With a single series, I can use a scatter to draw the mean on top of the boxplot. With multiple series, the means end up in the center of the group.
What's the best way to get the dots in the correct place? Bonus points for adding the mean to the tool-tip for the boxplot.
Modified from the standard example:
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
}
},
series: [{
name: 'S1',
data: [
[755, 811, 838, 885, 955],
[725, 863, 930, 980, 1050],
[704, 752, 827, 870, 915],
[714, 812, 825, 871, 945],
[780, 826, 852, 882, 950]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'S2',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 816, 871, 950],
[775, 836, 864, 882, 970]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Means 1',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 850],
[1, 935],
[2, 825],
[3, 840],
[4, 850]
],
marker: {
fillColor: Highcharts.getOptions().colors[0],
symbol: 'diamond',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Mean: {point.y}'
}
},
{
name: 'Means 2',
color: Highcharts.getOptions().colors[1],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 860],
[1, 945],
[2, 805],
[3, 850],
[4, 860]
],
marker: {
fillColor: Highcharts.getOptions().colors[1],
symbol: 'diamond',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[1]
},
tooltip: {
pointFormat: 'Mean: {point.y}'
}
}
]
});
Producing this:
The simplest solution seems to be:
disable grouping
define points positions by setting x values as decimal numbers
define boxplot size by pointPadding
instead of scatter use line series with lineWidth: 0 (to shared tooltip work properly)
enable shared tooltip
tooltip: {
shared: true
},
plotOptions: {
series: {
grouping: false,
pointRange: 1,
pointPadding: 0.4,
groupPadding: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
series: [{
data: [
[-0.2, 755, 811, 838, 885, 955],
[0.8, 725, 863, 930, 980, 1050],
[1.8, 704, 752, 827, 870, 915],
[2.8, 714, 812, 825, 871, 945],
[3.8, 780, 826, 852, 882, 950]
],
...
},
{
data: [
[0.2, 760, 801, 848, 895, 965],
[1.2, 733, 853, 939, 980, 1080],
[2.2, 714, 762, 817, 870, 918],
[3.2, 724, 802, 816, 871, 950],
[4.2, 775, 836, 864, 882, 970]
],
...
},
{
type: 'line',
lineWidth: 0,
data: [ // x, y positions where 0 is the first category
[-0.2, 850],
[0.8, 935],
[1.8, 825],
[2.8, 840],
[3.8, 850]
],
...
},
{
type: 'line',
lineWidth: 0,
data: [
[0.2, 860],
[1.2, 945],
[2.2, 805],
[3.2, 850],
[4.2, 860]
],
...
}
]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4947/
API Reference:
https://api.highcharts.com/highcharts/series.line.states.hover.lineWidthPlus
https://api.highcharts.com/highcharts/series.boxplot.grouping
https://api.highcharts.com/highcharts/tooltip.shared
navigate to below fiddle and find first category is not showing boxplot.
my expectation is that highcharts should show q1,q3 and median box.
is there a way to render boxplot without min and max?
https://jsfiddle.net/rammohanreddy201/ga20p14y/28/
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
},
plotLines: [{
value: 932,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean: 932',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Observations',
data: [
[null, 801, 848, 895, null],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}, {
name: 'Outliers',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
The implemented logic for the boxplot series requires 6 or 5 values in the array or in the data config objects - x,low,q1,median,q3,high. More: https://api.highcharts.com/highcharts/series.boxplot.data and https://www.highcharts.com/docs/chart-and-series-types/box-plot-series
However, setting the low and high to the same value as q1 makes that their lines are invisible (are covered by the q1 line), so it could be a good workaround to your requirement. So the data config should look like this:
data: [
[801, 801, 848, 895, 801],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
Next it will be nice to hide those values in the tooltip. We can use the formatter callback to achieve it:
tooltip: {
formatter(tooltip) {
let point = this.point;
if (point.low === point.q1 || point.high === point.q1) {
point.low = null;
point.high = null;
}
return tooltip.defaultFormatter.call(this, tooltip);
}
},
Demo: https://jsfiddle.net/BlackLabel/rd4aLgne/
API: https://api.highcharts.com/highcharts/tooltip.formatter
Can anyone show me jsfiddle example how to make dual y-Axis on the left side of a column chart for high chart (html5)?. P/S i know how to make multiple y-Axis on the right so no need for this
That's the solution:
Highcharts.chart('container', {
chart: {
type: 'column'
},
yAxis: [{
title: {
text: ''
}
}, {}],
series: [{
yAxis: 0,
data: [
439,
525,
571,
696,
970,
119,
137,
154
]
}, {
yAxis: 1,
data: [
234,
123,
444,
322,
543,
657
]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
jsfiddle.net/BlackLabel/fhgs4cpd
In a Highcharts line chart, I need to put the series name on the right of the last point of each one.
Unfortunately, even if I set chart.spacingRight and chart.marginRight, the space on the right is not used.
Is there any solution/workaround?
Jsfiddle
Highcharts.chart('container', {
chart: {
spacingRight: 200
},
plotOptions: {
series: {
label: {
enabled:false
},
pointStart: 2010,
dataLabels: {
enabled:true,
align:'left',
verticalAlign:'middle',
x:10,
formatter: function() {
return this.series.data.indexOf( this.point ) == this.series.data.length - 1 ? this.series.name : '';
}
}
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
});
You can do that with dataLabels.crop:false and dataLabels.overflow: 'allow'
dataLabels: {
overflow: 'allow',
crop:false,
...
Api documentation currently broken, so impossible to put the real link
Fiddle
How can I set the opacity for the fill color in the pie chart? I am using the highcharts js library. See code below:
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: 'none',
type: 'pie',
},
title: {
text: 'Health'
},
plotOptions: {
series: {
borderWidth: 0,
fillOpacity: 0.1,
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', ],
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
A bit of a JS newbie, so please be kind. Thanks!
I'll be kind. You can specify the color in rgba format with the fourth parameter being the opacity. See 'Chrome' below:
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true,
color: 'rgba(150,100,50,0.1)'
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Here's a working fiddle: http://jsfiddle.net/manishie/62VJJ/
The above solution works fine if you know what color you wish to assign to the slice. But if the color is picked from a palette which is generic, there is no way to give the opacity. It always takes 0. For example:
Highcharts.chart('container',
{colors: [my palette]},
series:[{
type: 'pie',
data: [1, 2, 3]
}]
)
In the above case if I set series: [{fillOpacity: 0.5}] it is not honored.
The only option I see is that the palette should have the colors in rgba format. This may not be possible since my palette is a generic palette. Is there any other way in which I can set the opacity of the slices in a pie chart.