Programmatically set the active datapoint on a LineChart and BarChart

[dorwin-patreon]

Problem

Our organization uses nivo Line and Bar (ResponsiveLine, ResponsiveBar) components to generate user dashboards. When a user hovers over or clicks on a specific datapoint, a custom tooltip is shown. We currently show these tooltips by attaching event handlers to the onMouseXyz graph events.

Missing feature: we'd like to set up screenshot testing for these graphs by loading it with fake user data and "programmatically selecting" a datapoint on the graph. E.g. On a dashboard that displays the daily number of messages received over the last 30 days, we'd like to set up a test that shows the tooltip is generated when the user hovers over the T-15 datapoint.

Ideal Solution

The easiest solution I can think off is introducing 2 new, optional component properties named activeDatapoint, onActiveDatapoint that can be set by the client. When activeDatapoint is set by the client and available in the graph's dataset, onActiveDatapoint is triggered with a similar payload as the onMouseXyz event handlers.

Thanks again for building this fantastic library.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!