Issue with Bar Graph Interaction in powerbi-client-vue-js SDK (Vue 3)

Hi Anonymous ,

Thank you for reaching out to the Microsoft Community Forum.

This appears to be triggered only when clicking the bar graph, meaning the bar chart's click interaction is not sending a valid filter payload.

Root cause:

In Power BI visual interactions (like clicking a bar): Power BI tries to serialize the filter(s) applied due to that interaction. If the filter object is empty, malformed, or undefined, this message is logged.

Your handler expects that getSlicerState() always returns slicers with valid filters, but clicking a visual like a bar chart is not a slicer action, and may trigger interaction events without any filter (especially if cross-filtering is disabled or no filter context is applied).

Please Check below things.

1. Check for empty filters before processing

In your 'rendered' event, ensure you check for existence of filters before processing:

2. Visual Interactions vs. Slicer State

You're triggering slicer state serialization inside a rendered event. But this event doesn't correlate to bar chart clicks.

To handle clicks on any visual, especially a bar chart, you'll need to attach a different event handler such as dataSelected or visualClicked.

3. Safe Fallback for Missing Filters

Ensure your getSlicerState() logic won’t break if the visual isn’t a slicer, or returns no filters.

Please refer below Microsoft article.

How to embed Power BI content in a Vue app | Microsoft Learn

If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

Thank you