'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"?


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source