Variance-Waterfall change font size with css

[JohanLind1979]

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

[Andrea_Spinetti]

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.

[EliGohar]

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:

[JohanLind1979]

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

[JohanLind1979]

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