[feature request] Box plot with whiskers, standard deviation

[stahlmanDesign]

I'm trying to use Nivo to create a Box plot, and none of the existing charts work quite right.

I would like to generate Box plots with standard deviation lines

Alternatives considered

1. Bar chart with custom bar component: I used a custom bar component to render circles. But a chart grouped by 'stacked' means the values are compounded. When 'grouped' the circles are not centred. Even if this weren't a problem, I'm not sure how to add standard deviation lines (error margin)

2. Scatterplot:
   In a Box plot, the circles are all unique. In a scatterplot, the circles appear for each item on the xAxis

3. Swarmplot
   Close, but can't use the annotations to add standard deviation lines (which I would have to calculate myself). Also I want an option to keep the circles to be centred and overlapping.

Here's what I want
Plotly example
https://codepen.io/pen/?&editable=true

Other examples:

box-and-whisker-and-scatterplot chart

Additional description on CanvasJS
Detailed example of how to create this from scratch

[CRGavrila]

I need this too and I would like to contribute on this

[jamesdh]

@stahlmanDesign I was looking at doing something like this, although a bit more generic (without specifically being focused on standard deviation). From what I can tell, it's going to be a completely new, custom component loosely based on the Bullet component.

[jamesdh]

It makes me wonder if the Bullet chart should just be expanded upon and made a bit more flexible to support this. A couple things I see that differentiate them:

1. The BulletRect representing the line should be able to extend past the bounding BulletRect boxes in both directions (thus creating the "whiskers").
2. Custom Markers should be able to support displaying key statistical data points.
3. In order to display multiple types of data points (both statistical and individual data points) it needs to support multiple Markers.
4. Ticks are applied to every BulletItem. It should be possible to have a group of BulletItems with a single legend/ticks for all of them.

So I believe 1 & 2 are achievable using custom rangeComponent, measureComponent, and markerComponent properties. 3 & 4 will probably require a bit of customization. But I'm literally just jumping into Nivo today for the first time so I could be completely wrong. 🤷‍♂

Would love your opinion on this @plouc!

[jamesdh]

Another line of thinking:

• Creating a new Candlestick chart as a flexible/generic base
• Building a Box plot w/ whiskers as an extension of the Candlestick chart

The Box plot would essentially be the same thing, except it would automatically handle calculating data distributions and marking quartiles/medians/extremes/outliers/etc.

[tschaka1904]

Would love to see this! +1

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[87sam12]

Would be interested in seeing this feature along with #1948 +1

[keithar]

+1

I'm building an analytical app where visualisation of data is very important. Currently I'm using diffrent library and I'm trying to switch to Nivo. Foundations of Nivo are perfect, even with some limitations, I find it the best charts library in terms of features. Sadly there're some crucial types of chart that are missing, like box and violin.

I totally agree with @12Sam12 that new types of visuals would take Nivo on different level and could be used for more advanced use cases. #1948

[plouc]

We'll now have a BoxPlot component thanks to @tkonopka.

[reubence]

Amazing! @tkonopka @plouc is there a quick way to add outliers to the box-plot? (see reference image)