identifying visualname in Custom Visuals

[mrothschild]

Hi @v-evelk 

The following links: https://community.powerbi.com/t5/Desktop/Custom-Report-Theme-JSON-Property-settings-in-Tables-Matrix...

https://docs.microsoft.com/en-us/power-bi/desktop-report-themes  (under "JSON file element definitions")

show how to customize different visualnames using JSON for embedded visuals in Power BI, e.g, "scatterChart" or "clusteredColumnChart".

I've used this to reduce the fontsize of embedded visusals to a number below the minimum 8 pt allowed for in PowerBI.  I'd like to do the same for Custom Visuals, and in some cases change the fontfamily as well.

In order to do so, I assume I need the correct visualName for custom visuals, e.g. Aster Plot or Timeline slicer, but don't know how to find/identify what those visualNames are.  How can I find/identify those visualnames for custom visuals?

[v-evelk · Accepted solution]

Hi,

So, the name for timeline is Timeline1447991079100 , for Aster Plot is AsterPlot1443303142064 .

It's definitely not so trivial to reveal this names.

Usually, it is enough to find the top container of a visual in the layout as on picture below.

Kind Regards,

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

[v-evelk · Accepted solution]

Hi,

So, the name for timeline is Timeline1447991079100 , for Aster Plot is AsterPlot1443303142064 .

It's definitely not so trivial to reveal this names.

Usually, it is enough to find the top container of a visual in the layout as on picture below.

Kind Regards,

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

[mrothschild]

@v-evelk 

Thank you.  I've edited the JSON, but doesn't seem like it's going to work to change the legend font size in the Aster Plot visual.  That said, would you mind providing the steps to get to the PNG image you attached in case it would work for other visuals?  

Thanks!

[v-evelk]

"Thank you.  I've edited the JSON, but doesn't seem like it's going to work to change the legend font size in the Aster Plot visual.  That said, would you mind providing the steps to get to the PNG image you attached in case it would work for other visuals? "

Please, show how your JSON looks like. Also, if you use picked parameters in format panel that change styles too, they can overwrite theme's parameters.

Kind Regards,

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

[mrothschild]

@v-evelk 

Below is the JSON code for the visualStyles section of my theme.  

 "visualStyles": {
    "*": {
      "*": {
        "*": [
          {
            "fontFamily": "Corbel",
            "fontsize":10,
            "fontColor": {
              "solid": {
                "color": "#0D2033"
              }
            }
          }
        ]
      }
    },
    "legend": 
      [
          {
            "fontFamily": "Corbel",
            "fontsize":6,
            "fontColor": {
              "solid": {
                "color": "#0D2033"
              }
            }
          }
        ],
     "tableEx": {
      "*": {
        "*": [
          {
            "fontFamily": "Corbel"
          }
        ]
      }
    },
    "slicer": {
      "*": {
        "*": [
          {
            "fontColor": {
              "solid": {
                "color": "#0D2033"
              }
            },
            "background": {
              "solid": {
                "color": "#FFFFFF"
              }
            }
          }
        ]
      }
    },
    "AsterPlot1443303142064": {
      "*": {
        "legend": [
          {
            "show": true,
            "showTitle": true,
            "labelColor": {
              "solid": {
                "color": "#0D2033"
              }
            },
            "fontSize": 3,
            "fontFamily": "Corbel"
          }
        ]
      }
    },
  

    "Timeline1447991079100": {
      "*": {
        "*": [
          {
            "fontColor": {
              "solid": {
                "color": "#0D2033"
              }
            },
            "fontFamily": "Corbel",
            "fontSize": 3,
            "background": {
              "solid": {
                "color": "#FFFFFF"
              }
            }
          }
        ]
      }
    },
    
    "calendarVisual5E37BB8CB2CB427ABE4F9EAAE66C5223": {
      "*": {
        "*": [
          {
            "fontColor": {
              "solid": {
                "color": "#0D2033"
              }
            },
            "fontFamily": "Corbel",
            "fontSize": 3,
            "background": {
              "solid": {
                "color": "#FFFFFF"
              }
            }
          }
        ]
      }
    },    
    "pivotTable": {
      "*": {
        "*": [
          {
            "fontFamily": "Corbel"
          }
        ]
      }
    }
  }
}

[sohaibahsan007]

Hey, @mrothschild @v-evelk ,

Can you please verify the JSON, is it the right way to style different visuals using the visual name and visual id?

[dm-p · Accepted solution]

Hi @mrothschild,

You can  get the ID by right-clicking the visual icon in either Desktop or the Service and selecting About, e.g. for the Aster Plot, we can get the same IS @v-evelk got from the browser DOM:

Regards,

Daniel