I’m working with a horizontal bar chart in Chart.js where each bar represents a team member. The chart’s vertical axis lists team members, while the horizontal axis depicts different time periods indicating their involvement in various modules. Each dataset in the chart corresponds to a module, showing the duration of each team member’s engagement.

My goal is to enable dynamic updates based on module selection. When I select or deselect a module (dataset) using the chart’s legend, I want the chart to reflect these changes by adjusting which team members are displayed. Specifically, the chart should only show team members who have logged any activity within the currently selected modules.

How can I implement this feature effectively using Chart.js?

Based on the selections, I’d not want chart to represent the names of Yashdeep Paul Singh & Rajat Khade based on the present selection of datasets. However, when I reselect those datasets where they have activity these labels should display back again.

Is it possible?

enter image description here

Is there any in-built functionality that can help with this? One of the approaches that comes to mind is that every time a dataset is selected/deselected, go through each of the team members in each dataset and check if there is no time logged for him/her, and then update the chart again, but that seems to be a brute force approach. Any other better options?