Drag and drop react visuals to powerbi embedded report in React Application

[Anonymous]

Created the powerbi visuals in React which contains the config of powerbi Visuals. I also embedded the blank powerbi report in React application using
powerBi-client package.

Requirement:

-> want to drag and drop the visuals from react component to different react compoment which renders the powerbi report and after dragging and dropping
that visual should show the real chart either it is bar, line chart etc.

->  I should add multiple visual into the report.

-> want to enlarge and reduce the size of visual in the powerbi report component.

-> want to change the position of the visuals by dragging in the powerbi report component.

-> want to delete the visuals if not required in the report

[Anonymous · Accepted solution]

Hi @Anonymous,

#1, I don't' think it is possible to direct drag-drop visual between different components.
It is possible to use javascript API to get the target visual id, but I haven't found the feature to direct interaction between different embedded report contents. (the visual dataset is bound to the access token, you can't add undeclare dataset contents in the embedded report)

Power BI embedded analytics Client APIs | Microsoft Docs

#2,3,4, I'd like to suggest you turn on the edit mode, then you can simply change the visual layouts and edit on the embedded iframe.

Create, edit, and save an embedded report | Microsoft Docs

BTW, here is the online sandbox which provides the code snap for embedding features, you can take a look at the following link:

Power BI Playground

Regards,

Xiaoxin Sheng