Theme settings for the Lollipop Column Chart

< All Topics

Besides setting the properties of the Lollipop Column Chart in the Power BI user interface it is also possible to set the defaults via the Theme. You can read more about how to use them on the following Microsoft page: Use report themes in Power BI Desktop.

As mentioned above the properties can be set in two ways:

  • Manually via de Power BI user interface;
  • Automatically via a Theme file.

Theme file

The Theme specification is a file in JSON format. The structure for setting the properties is as follows (The elements in blue need to be replaced by a value. This is described in the remainder of this article.):

"visualStyles": {
    "<visualName>": {
        "<styleName>": {
            "<cardName>": [{
                "<propertyName>": <propertyValue> 
            }]
        }
    } 
}

For the <visualName> and <cardName> sections, use a specific visual and card name. For <visualName> and <cardName>, use an asterisk in quotes if you want that setting to apply to all visuals or cards that have a property. If you use an asterisk for both the visual and card name, you’re effectively applying a setting globally in your report, such as a font size or specific font family for all text across all visuals. Currently, the <styleName> is always an asterisk (*). <propertyName> is the name of the formatting option and <propertyValue> is the value for that formatting option.

If you want to set properties across all visuals and all cards the Theme file will look like this (please note: the properties still need to be specified):

"visualStyles": {
    "*": {
        "*": {
            "*": [{
                "<propertyName>": <propertyValue> 
            }]
        }
    } 
}

If you want to set the properties specifically for the Lollipop Column Chart visual you need to replace the <visualName>  with: “lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C“. This would result in the following file (please note: the cards and properties still need to be specified):

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "<cardName>": [{
                "<propertyName>": <propertyValue> 
            }]
        }
    } 
}


The <cardName> values can be found in the next section named Cards. The <propertyName> values can be found in the section called Properties.

Cards

Let’s first have a look at the available cards within the Power BI user interface and their corresponding Theme names. These Theme names are to be used as a replacement of the earlier mentioned <cardName> variables.

Name on user interface

Paid Features

X-Axis

Y-Axis

Data point

Title

Background

Lock aspect

Border

Shadow

Tooltip

Visual header

Name in Theme file

“license”

“categoryAxis”

“valueAxis”

“dataPoint”

“title”

“background”

“lockAspect”

“border”

“dropShadow”

“visualTooltip”

“visualHeader”

Based on these card names our Theme file will look as follows

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "license": [{
                "<propertyName>": <propertyValue> 
            }],
            "categoryAxis": [{
                "<propertyName>": <propertyValue>
            }]
            "valueAxis": [{
                "<propertyName>": <propertyValue>
            }],
            "dataPoint": [{
                "<propertyName>": <propertyValue>
            }],
            "title": [{
                "<propertyName>": <propertyValue>
            }],
            "background": [{
                "<propertyName>": <propertyValue>
            }],
            "lockAspect": [{
                "<propertyName>": <propertyValue>
            }],
            "border": [{
                "<propertyName>": <propertyValue>
            }],
            "dropShadow": [{
                "<propertyName>": <propertyValue>
            }],
            "visualTooltip": [{
                "<propertyName>": <propertyValue>
            }],
            "visualHeader": [{
                "<propertyName>": <propertyValue>
            }],
        }
    } 
}

Properties

Within this section we will describe for each of the mentioned cards above the available properties and related settings.

Paid Features properties

Name on user interface

License Name

License Key

Name in Theme file

“licenseName”

“licenseKey”

Both the license name and license key are supplied to you specifically. The following example is no valid license, so please replace these values between quotes by your own license information.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "license": [{
                "licenseName": "Nova Silva BV | license valid u...",
                "licenseKey": "ptsJi3hcge143AhmkCIDdEofK"
            }]
        }
    } 
}

X-Axis properties

Name on user interface

X-Axis

Color

Text size

Font family

Minimum category width

Maximum size

Title

Title color

Title text

Title text size

Title font

Title position

Name in Theme file

“show”

“labelColor”

“fontSize”

“fontFamily”

“preferredCategoryWidth”

“maxMarginFactor”

“showAxisTitle”

“titleColor”

“titleText”

“titleFontSize”

“titleFontFamily”

“titlePosition”

The following example shows how the Theme file section for the X-Axis could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "categoryAxis": [{
                "show": true,
                "labelColor": { "solid": { "color": "#252423"}},
                "fontSize": 12,
                "fontFamily": "Segoe UI",
                "preferredCategoryWidth": 40,
                "maxMarginFactor": 30,
                "showAxisTitle": true,
                "titleColor": { "solid": { "color": "#252423"}},
                "titleText": "",
                "titleFontSize": 12,
                "titleFontFamily": "Segoe UI",
                "titlePosition": "middle"
            }]
        }
    } 
}

Y-Axis properties

Name on user interface

Y-Axis

Start

End

Color

Text size

Font family

Display Units

Decimal Places

Title

Style

Title color

Title text

Title text size

Title font

Title Position

Gridlines

Line style

Color

Stroke width

Name in Theme file

“show”

“start”

“end”

“labelColor”

“fontSize”

“fontFamily”

“labelDisplayUnits”

“labelPrecision”

“showAxisTitle”

“axisStyle”

“titleColor”

“titleText”

“titleFontSize”

“titleFontFamily”

“titlePosition”

“gridlineShow”

“gridlineColor”

“gridlineThickness”

“gridlineStyle”

The following example shows how the Theme file section for the Y-Axis could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "valueAxis": [{
                "show": true,
                "start": "",
                "end": "",
                "labelColor": { "solid": { "color": "#252423"}},
                "fontSize": 12,
                "fontFamily": "Segoe UI",
                "labelDisplayUnits": 0,
                "labelPrecision": "",
                "showAxisTitle": true,
                "axisStyle": "showTitleOnly",
                "titleColor": { "solid": { "color": "#252423"}},
                "titleText": "",
                "titleFontSize": 14,
                "titleFontFamily": "Segoe UI",
                "titlePosition": "middle",
                "gridlineShow": true,
                "gridlineColor": { "solid": { "color": "#C8C6C4"}},
                "gridlineThickness": 1,
                "gridlineStyle": "dotted"
            }]
        }
    } 
}

For the properties “start”, “end” and “labelPrecision” you see a value of “”. This means they are empty and will have no influence on this axis. If you specify a number here you should do this without the quotes. For example: a start value of 500 has to be specified as: “start”: 500,

Data point properties

Name on user interface

Data color

Fill

Size

Lines

Line width

Line color

Name in Theme file

“defaultDataPointColor”

“fillDataPoint”

“pointSize”

“showLines”

“lineWidth”

“lineColor”

The following example shows how the Theme file section for the Data point could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "dataPoint": [{
                "defaultDataPointColor": { "solid": { "color": "#26A2E3"}},
                "fillDataPoint": true,
                "pointSize": 5,
                "showLines": true,
                "lineWidth": 4,
                "lineColor": { "solid": { "color": "#B3B0AD"}}
            }]
        }
    } 
}

Title properties

Name on user interface

Title

Title text

Word wrap

Font color

Background color

Alignment

Text size

Font family

Name in Theme file

“show”

“text”

“titleWrap”

“fontColor”

“background”

“alignment”

“fontSize”

“fontFamily”

The following example shows how the Theme file section for the Title could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "title": [{
                "show": true,
                "text": "",
                "titleWrap": true,
                "fontColor": { "solid":{ "color": "#252423"}},
                "background": { "solid":{ "color": "#ffffff"}},
                "alignment": "Left",
                "fontSize": 14,
                "titleColor": { "solid": { "color": "#252423"}},
                "titleText": "",
                "titleFontSize": 12,
                "fontFamily": "Segoe UI"
            }]
        }
    } 
}

Background properties

Name on user interface

Background

Color

Name in Theme file

“show”

“color”

The following example shows how the Theme file section for the Background could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "background": [{
                "show": true,
                "color": { "solid":{ "color": "#ffffff"}}
            }]
        }
    } 
}

Lock aspect properties

Name on user interface

Lock aspect

Name in Theme file

“show”

The following example shows how the Theme file section for the Lock aspect could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "lockAspect": [{
                "show": true
            }]
        }
    } 
}

Border properties

Name on user interface

Border

Color

Radius

Name in Theme file

“show”

“color”

“radius”

The following example shows how the Theme file section for the Border could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "border": [{
                "show": false,
                "color": { "solid":{ "color": "#252423"}},
                "radius": 1
            }]
        }
    } 
}

Shadow properties

Name on user interface

Shadow

Color

Shadow position

Preset

Name in Theme file

“show”

“color”

“position”

“preset”

The following example shows how the Theme file section for the Shadow could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "dropShadow": [{
                "show": false,
                "color": { "solid":{ "color": "#252423"}},
                "position": "Outer",
                "preset": "BottomRight"
            }]
        }
    } 
}

Tooltip properties

Name on user interface

Tooltip

Type

Page

Label Color

Value Color

Text size

Font family

Background color

Name in Theme file

“show”

“type”

“page”

“titleFontColor”

“valueFontColor”

“fontSize”

“fontFamily”

“background”

The following example shows how the Theme file section for the Tooltip could look like.

"visualStyles": {
    "lollipopColumnChart0D874BBC87DE40189C387BBA89739F6C": {
        "*": {
            "visualTooltip": [{
                "show": true,
                "type": "Default",
                "page": "",
                "titleFontColor": { "solid":{ "color": "#C8C8C8"}},
                "valueFontColor": { "solid":{ "color": "#EAEAEA"}},
                "fontSize": 12,
                "fontFamily": "Segoe UI",
                "background": { "solid": { "color": "#333333"}}
            }]
        }
    } 
}
Previous Introduction: Lollipop Column Chart
Next Tutorial: how to use the Lollipop Column Chart
Table of Contents