topic Re: Variance-Waterfall change font size with css in App Development

Variance-Waterfall change font size with css

JohanLind1979 — Tue, 15 Mar 2022 09:05:25 GMT

Hi, I want to increase the expression label font size of a variance waterfall chart. Any css expert out there who can support?

Re: Variance-Waterfall change font size with css

Andrea_Spinetti — Wed, 20 Apr 2022 09:16:25 GMT

Hello, I would consider building a custom theme. Have a look at the Custom theme JSON properties and, more in general, at the whole Custom themes section in our help pages.

Re: Variance-Waterfall change font size with css

EliGohar — Wed, 20 Apr 2022 13:38:20 GMT

Hi @JohanLind1979,

Using the JSON file in the custom theme you created, you can use this example to edit Waterfall chart attributes:

"waterfallChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "label": { "value": { "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "value": { "color": { "default": "@default", "dark": "@dark", "light": "@light" } }, "shape": { "positiveValue": { "fill": "white" }, "negativeValue": { "fill": "#ccccc" }, "subtotal": { "fill": "#000000" }, "bridge": { "stroke": "#333333" } } }

To change the font size in the bars, please change the label -> value -> font-size attribute, something like:

"label": { "value": { "fontSize": "22px", "fontFamily": "sans-serif" } }

Result:

Re: Variance-Waterfall change font size with css

JohanLind1979 — Thu, 21 Apr 2022 07:43:05 GMT

Thank´s @EliGohar and @Andrea_Spinetti . I think those are good suggestions and the "52" looks great in your chart. With the code that you presented @EliGohar , I imagine that it should be possible to type in something similar in the CSS here:

"qMeasures": [
{
"qLibraryId": "70a8bb1d-1b9d-4ff1-b1f0-649ee285c1e8",
"qDef": {
"qLabel": "",
"qDescription": "",
"qTags": [],
"qGrouping": "N",
"qDef": "",
"qNumFormat": {
"qType": "F",
"qnDec": 2,
"qUseThou": 0,
"qFmt": "# ##0",
"qDec": ",",
"qThou": " "
},

"qRelative": false,
"qBrutalSum": false,
"qAggrFunc": "",
"qAccumulate": 0,
"qReverseSort": false,
"qActiveExpression": 0,
"qExpressions": [],
"qLabelExpression": "",
"autoSort": true,
"cId": "bUHLqpB",
"numFormatFromTemplate": true,
"isCustomFormatted": false
},

or maybe here:

"dataPoint": {
"showLabels": true
},
"labelsshow": true,

Do you think that could be an option and how would that look?

//Johan

Re: Variance-Waterfall change font size with css

JohanLind1979 — Thu, 21 Apr 2022 07:45:31 GMT

Actually, an option is to teach the users to use Ctrl + and Ctrl - if they have difficulties viewing the expression labels. 🙂