Boxplot series spaced evenly

[pmgmendes.neatleaf]

Hey!

Is it possible to space multiple boxplot series evenly e.g. 20px distance between them regardless of how many series are visible? At the same time, having the series spaced evenly, I'll have a 160px width container to display them so I'd like to make the chart scrollable but on my experimentations with `scrollablePlotArea` I'll have to always set a minimum width to that container regardless, isn't?

Still on boxplot, how do data labels work with this series type? I tried enabling data labels but I wasn't able to figure out a config that would work. I need 3 labels per point - low, high, and median - like the following design:

Screenshot 2024-09-30 at 11.18.05.png (44.14 KiB) Viewed 743 times

I've assembled a small example with my use case here: https://jsfiddle.net/pedro_neatleaf/Lo73q5va/1/

Any help is appreciated.

Cheers!

[pmgmendes.neatleaf]

Hey!

I think I achieved what I was asking for. Things I did:

- Series/points evenly spaced - xAxis type needs to be 'category'.
- Data labels - For each series point (boxplot) I'm adding three Annotation labels. One label for low, median, and high values. I'm creating the annotation labels as mock points.
- Scrollable chart: I'm setting the chart width based on the amount of series to be added. Then, I just need to set the scrolling behavior and max width in the chart container.

This is the result:

Screenshot 2024-10-01 at 14.42.30.png (66.38 KiB) Viewed 706 times

One thing I'd like to improve is the annotation label positioning. The first and last set of labels seem misaligned because the label options are configured with overflow: 'justify' and crop: false. I just want the chart plot area to be wider so the annotation placement algorithm doesn't need to move them from being fully aligned with the boxplot. Is it possible?

[andrzej.b]

Hi,

Thank you for getting in touch.

Congrats on solving the missing labels issue with annotations! You can change the alignment with negative distance values on edge annotations, please see the example here: https://jsfiddle.net/BlackLabel/qn8zdfov/

Feel free to reach out if you have any further questions.

Best regards,

[pmgmendes.neatleaf]

Hey, Andrezj

Thank you for your reply!

In my case, `distance` can't be used because it operates on the y-axis and I need to align them horizontally.
I ended up increasing both chart's left and right margins and tweaking the `x` position offset for each one of the edge annotations. It's looking better not but still not ideal because that offset value is hardcoded and the label text size can vary a bit.

Nevertheless, it seems ready for primetime!

Thanks!

Screenshot 2024-10-01 at 16.06.45.png (68.15 KiB) Viewed 699 times