0
351
ViewsHighCharts.js: How to Create a Boxplot with stems representing confidence intervals, NOT max/min?
I'm trying to get my HighCharts code to generate a graphic visually the same as the attached goal image. I need to figure out:
- How to get the tooltip on a Boxplot to read "Upper Interval" and "Lower Interval" instead for the Minimum and Maximum labels respectively (marked by red arrows in attached Highcharts image).
- Need to find a way to remove the Box on the Boxplot. Essentially, each data point in the series will display two long stems meeting @ median in the center and top and bottom stems as Confidence Intervals. (changed from min and max as they were previously) Attached Goal image shows this.
Thank you for any help.
2 answers
Answer question0
For edit tooltip try to use options from series.boxplot.tooltip.
Here is a possible solution from another SO thread, showing how to hide boxplot series, you can check it. How to hide data in a series in highcharts boxplot?
Useful information from highcharts documentation how to styling the boxes.
0
To remove the boxes from the boxplot, I used this solution posted by user Fusher: Highchart Forum Post This involved setting the q1 and q3 to be the same value as the median for all data points in the boxplot series.
To change the tooltip to read "Upper Interval" and "Lower Interval" in place of Maximum and Minimum respectively, I used: plotOptions.boxplot.tooltips.pointFormat
- I overrode the default value of
<span style="color:{point.color}">●</span> <b> {series.name}</b><br/>Maximum: {point.high}<br/>Upper quartile: {point.q3}<br/>Median: {point.median}<br/>Lower quartile: {point.q1}<br/>Minimum: {point.low}<br/>
to
<span style="color:{point.color}">●</span> <b> {series.name}</b><br/>**UPPER INTERVAL**: {point.high}<br/>Upper quartile: {point.q3}<br/>Median: {point.median}<br/>Lower quartile: {point.q1}<br/>**LOWER INTERVAL**: {point.low}<br/>