Saturday 7 November 2020

Chart library with multiple levels of nested axis labels

Summary


I wonder if anyone else has had this requirement and could steer me in the right direction. I am currently working on getting a chart library implemented for a crosstab BI that allows multiple groupings on the X axis.

Example


The functionality I'm trying to achieve works¹ in Spotfire as shown here (dev data, not live!):

Row (X-Axis) Labels

With the colours representing the columns from the crosstab:

Column Labels

¹ - the rendering of the labels is a bit funky, but the grouping works

Requirement


I am looking to replicate this in (at minimum) JavaScript, preferably with a premade React library if possible. I'm currently looking at d3 and in particular Nivo, as this has a nice aesthetic that has appealed to the team, but this appears to be limited to grouping only on 2 levels (for the example above, I could group by Country, but I am then unable to group by gender as a sub-group).

What I've tried


My solution so far is to merge the remaining layers, so for example in the France group we'd have Male - Not Tested, Male - Mutant, Male - Wild Type, etc. The problem this presents is that I need to allow up to 6 levels of grouping - the example shows 3 levels. (6 levels is rare, but I need to allow it as a requirement)

Plan


My next steps if I can't find a library to do it, is to branch off Nivo and try to modify it to implement it myself, but of course as we all know, this conflicts with the time we have to implement this. I would really appreciate hearing from someone that has had to deal with this before, and what solutions you came up with.



from Chart library with multiple levels of nested axis labels

No comments:

Post a Comment