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

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

Anonymous — Wed, 21 May 2025 14:29:30 GMT

Hello There,

Trust you are doing well.

I'm currently facing an issue while integrating the powerbi-client-vue-js SDK into our Vue.js 3 application. Specifically, I'm rendering a dashboard report that includes various visuals such as bar graphs, line graphs, and pie charts.

The problem arises when interacting with the bar graph. Upon clicking anywhere within the bar graph window, the following error is thrown:

{

message: 'Invoked filter serialization function with no filter.'

}

Interestingly, this issue does not occur with the line graph, which functions as expected when clicked.

I have explored multiple approaches and combinations to resolve this issue, including downgrading the SDK version via npm, but unfortunately, none have been successful so far.

For your reference, I have attached relevant code snippets that demonstrate how I'm embedding and interacting with the Power BI visuals.

Please let me know if any additional details or diagnostics are required from my side to help investigate this issue further.

Looking forward to your guidance and support.

Thanks in advance.

Console Line Graph With No Error:

Console BarGraph With Error:

Code Snippet:

const eventHandlersMap = ref<Map<string, EventHandler>>(

new Map([

[

'loaded',

(event, embeddedEntity) => {

pbiEmbed.value = embeddedEntity

embeddedReport.value = event?.detail

}

[

'rendered',

async (event: any) => {

// get report pages of the report

let pbiEmbed = event.target.powerBiEmbed as Report

embeddedReport.value = event?.detail

isLoadedReport.value = true

let pages = await pbiEmbed?.getPages()

// get the current active page

let currentPage = pages?.filter((page) => page.isActive)[0]

// get the visuals on the page

let visuals = await currentPage?.getVisuals()

// find the slicer visuals in the page visuals

let slicers = visuals?.filter((visual) => visual.type === 'slicer')

// if there are no slicers, export the report without slicer filters

if (!slicers) {

return

}

// create an list of all the slicer states using the getSlicerState method

let slicerStates: models.ISlicerState[] = await Promise.all<models.ISlicerState>(

slicers.map((slicer) => slicer.getSlicerState())

)

const parameterObj = slicerStates

.map((item) => {

const filter = item.filters[0] // Assuming each `filters` array contains at most one filter

if (filter) {

if ('values' in filter && 'target' in filter) {

if ('column' in filter.target) {

const name = `${filter.target.table.toUpperCase()}_${filter.target.column.toUpperCase()}_${filter.operator.toUpperCase()}`

// It's a BasicFilter

return filter.values.map((val) => ({

value: val // Using the first value in the values array

}))

}

} else if (

'conditions' in filter &&

'table' in filter.target &&

'column' in filter.target

) {

// It's an AdvancedFilter

const name = `${filter.target.table}_${filter.target.column}`

const conditions = filter.conditions || []

return conditions.map((condition) => {

return {

value: new Date(condition.value as string | number | Date)

.toISOString()

.split('T')[0]

}

})

}

return null // In case there is no filter or it's not handled

})

.flat()

.filter((param) => param !== null) // Filter out null values

parameterObj.push({

value: props.tenantId ?? ''

})

parameterValues = parameterObj

.filter((item): item is { name: string; value: ParameterValue } => item !== undefined)

.map((item) => ({

value: String(item.value) // Convert value to string

}))

}

[

'error',

(error) => {

console.error(error?.detail.message)

isError.value = true

isEmbedded.value = false

isLoading.value = false

}

]

])

)

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

v-dineshya — Thu, 22 May 2025 10:55:46 GMT

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

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

v-dineshya — Mon, 26 May 2025 04:48:06 GMT

Hi @Anonymous ,

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

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

Anonymous — Mon, 26 May 2025 10:10:22 GMT

Hi @v-dineshya - Thanks for your support and prompt response. It did help me to identify the problem.