Power Bi Javascript API - Modify a visual

Question

I am working with a Power BI embedded solution. I know how to select a specific visual on the report. What I would like to accomplish is to either highlight or visually alter a specific visual so that I can identify specific ones. In my solution, I have created a custom discussion pane where users can communicate about a specific data point. I want to be able to show which data points on the page have comments associated with them so I can draw users to those spots. Is there a way to alter the visual appearance of a Power BI Visual using the Javascript API? If so, does anyone have an example of how to change it?

Answer 1

I have found a solution. By using another Microsoft library Power BI Report Authoring. From this library, you can select a specific visual, and then apply properties to it. The code example from the git hub page is:

report.getPages()
  .then(function (pages) {

      // Retrieve active page.
      var activePage = pages.find(function (page) {
          return page.isActive
      });

      activePage.getVisuals()
        .then(function (visuals) {

            // Retrieve the wanted visual. (replace "VisualContainer1" with the requested visual name)
            var visual = visuals.find(function (visual) {
                return visual.name == "VisualContainer1";
            });

            const selector: models.IVisualPropertySelector = { 
                objectName: "title",
                propertyName: "alignment"
            };

            const propertyValue: models.IVisualPropertyValue = {
                schema: "http://powerbi.com/product/schema#property",
                value: "center" // models.TextAlignment.Center
            };

            visual.setProperty(selector, propertyValue)
                .catch(errors => {
                    // Handle error
                    console.log(errors);
                });
        });
  });