How can we extend chart legend in Foundry-Slate

In slate, chart widget have label option that display legend (color dot + label name) at some place of the chart (top, left, bottom, ...).

I notice 2 limitations with this legend on bar chart and I would like to improve them on my Slate apps.

1 issue: label are ordered in the order series appears on the bar chart (from left to right).
2 issue: when segmented and not-segmented data are stacked on the bar chart, label of not-segmented data have wrong color (even if we set series color parameter, and if we don't color attribution is random and change from one loading to the next).

For that reason I decided to produce my on labels in an HTML widget. I get a nice result just with a function that sort label and return a <div class="bp3-label" style="background:${labelColor};">${labelName}<\div> for each label. But I loose the interactivity (this is a convenient function of labels).

Is there a way to transfer this interactivity to my "custom label" and make click on this selecting all relevant bars on my bar chart?

I'm thinking to use slClickEvent and slClickEventValue props on the DIVs to push data relative to the clicked Label in a variable and to make the bar chart "selectedValue" property dependant of this variable.

Is it the best ways ?
Will the bar be highlighted in accorance with chart "selectedValue"?

Solution

You're on the correct track here - I often build custom chart legends in an HTML widget to have more control over the appearance and interaction compared to the native legend. If you search on your Foundry instance, you'll even find a folder of Slate apps that are examples of different HTML widget patterns, including one called HTML - Legend that shows some examples with custom CSS and Blueprint styles.

For the interactivity, I'd probably go with using custom HTML selection, rather than custom HTML click events, because with the custom selection, Slate will automatically add a selected class to whatever element you've added the selection to, which will make it easy to update the styling to reflect the selection.

Nothing would stop you from doing this with custom clickEvents instead, but you'd then need to also do some more work to reflect the selection status in the legend or else go without that extra affordance.

If you search your Foundry instance for Line Chart Series Selection with Custom Legend you'll find an example that shows exactly this. In that specific example, the Line "selection" is indicated on the chart by changing the line styling; with a Bar chart, you'd actually want to template (with Handlebars) the selection status of the chart in the </> panel. Then, when the user makes a selection using the legend, the chart will reflect that selection as if they'd chosen by clicking on the bars themselves.