Support deduplicating legends across stacks of grouped data

[Gareth Jones]

Is your feature request related to a problem? Please describe.

I'm working on a prototype application involving timesheets, and wanting to show a breakdown of what "codes" people worked on over a period of months e.g. "Within Jan 2022, Bob worked 15 minutes on PROTO; Within Nov 2021, Amy worked 30 minutes on WIP", etc.

Currently I'm exploring using a stacked & grouped column chart for this:

Sample code & data

<%=
  column_chart(
    [
      { name: 'INTER', stack: 'Bob', data: [['Oct, 2021', 5], ['Oct, 2021', 5], ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] },
      { name: 'WIP',   stack: 'Bob', data: [['Oct, 2021', 1],                   ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] },
      { name: 'PROTO', stack: 'Bob', data: [['Oct, 2021', 1],                   ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] },
      { name: 'INTER', stack: 'Amy', data: [['Oct, 2021', 5],                   ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] },
      { name: 'PROTO', stack: 'Amy', data: [['Oct, 2021', 1], ['Oct, 2021', 7], ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] },
    ],
    grouped: true,
    stacked: true
  )
%>

This is working almost perfectly except for a couple of issues:

• the columns don't show the persons name in anyway
  • this is minor, so I've not looked too deeply yet into if this is possible - I'll do a separate issue for this later if needed
• the data in each stack isn't combined, e.g. "INTER" should have a value of 6 for Bob's "Oct, 2021", but it's got a value of 5
  • I should be able to resolve this easily on my end, and can understand why the charting library would behave like this
• the legends are duplicated e.g. in the above chart there are two "PROTO" & "INTER" entires
  • this is what this issue is about :)

Describe the solution you'd like

The ability to have the chart rendered with unique entries in the legend.

Additional context

All the examples of stacked + grouped graphs I can find (looking at Highcharts, chartkick, and Google Charts in particular) don't seem to have shared data in both groups - while I think my request is reasonable, I wouldn't be surprised if it would be very hard to implement due to how the data is used; however I'm hoping it could be possible.

I'm happy to help implement a solution for this, but would appreciate some help in getting started (e.g. some pointers on where to look) since graphing can be a complex beast 😅

Also, I'm not actually sure of the right term to be using for "items in the legend" so happy to be corrected if there is a better term.

[Andrew Kane]

Hey @G-Rath,

1. If you add the person's name to the series name, it'll show up in the legend.
2. You should combine the data before passing it to Chartkick (since you may want to sum, average, etc).
3. I don't fully understand how you want the chart to appear, but each series gets an entry in the legend by design.

[Gareth Jones]

@ankane thanks for the reply - I've put the project this was for down for now, so can't remember all the details to answer your questions, but:

If you add the person's name to the series name, it'll show up in the legend.
I don't fully understand how you want the chart to appear, but each series gets an entry in the legend by design.

(this is assuming I'm right in thinking each item in the top-level array is a series)

I think at the heart of it what I'm after is a graph that is rendering based on both the series and the stack - or maybe another way to put it, the ability to have multiple stacks per series.

The graph in my image is very close to what I'm wanting, except e.g. PROTO is shown as two distinct series (one for each stack) when what I want is for there to be one PROTO series which can be in many stacks.

Basically this:

[Andrew Kane]

Thanks for following up. I don't think there's a way to that with Chartkick right now (and don't think it's common enough to add), so anyone looking to do this in the future should try using the charting library directly.