How to change data label font size in report

[Ismael Fragoso]

I have a very simple report and my requirement is to increase the size of the data labels. Is there any way to achieve this? 

[JosephW1]

Thank you Adam, I did see your article - and it's really cool, I bookmarked it - but will that make the data labels any larger? I feel like you have something else in mind that I'm missing.

I could remove the data labels, just go with the image, and have a decent looking chart. However, there are stakeholders who will ask for those numbers if they're missing. Plus, providing the numbers via the data labels adds value and clarity to the narrative provided.

[sachin_namjoshi]

You can increase data label length using below

Regards,

Sachin

[JosephW1]

Your answer is not for the author's question.

That property is for changing the font size of the label that belongs to the X Axis, it is not for changing the size of data labels. Completely different object, completely different portion of the configuration menu.

[JosephW1]

I know that ServiceNow has HighCharts libraries, and from the looks of the reports, it is using them. I've been looking over the annotations section of the HighCharts API documentation. The API section for labels says they were depreciated in HighCharts v7.1.2, so I guess ServiceNow's "data labels" are annotations objects?

Edit: I guess the boxes that appear when the mouse is hovered over the data point would be annotations. Maybe our "data labels" are HighCharts label objects. -06/07/2020

This demo of theirs is showing a section of code that can be used to set the annotation font size. 

labelOptions: {
  style: {fontSize: '30px'},
}

I wonder if I can drop something like this in custom config or style config to implement larger data labels. I tried dropping {"labelOptions":{"style":{"fontSize":"30px"}}}} and also {"annotations":"labelOptions":{"style":{"fontSize":"30px"}}} in, but those didn't work...

Does anyone have experience implementing HighCharts code that could help? I'd like to find a way to do this using reports without creating custom widgets.

@tltoulson I believe you have a lot of experience using HighCharts in ServiceNow. 🙂 I hope you don't mind me pinging you.

Kind Regards,
Joseph

[tltoulson]

Hi @JosephW,

No worries on pinging me, I don't mind at all!  I'm not aware of any way to configure the reports off hand.  I haven't done much reverse engineering of ServiceNow's reporting engine to find any hidden options like you've described.  I did some quick checks on those fields but wasn't able to find those objects being injected anywhere.

That said, if you can inject CSS into the page via Global UI Script or some other theme mechanism, something along the following should work:

.highcharts-data-label text {
    font-size: 30px !important;
}

It may take some magic conditions to inject it only where you need it though.  And of course, this is a complete and total hack to get it to work.  A custom chart may give you better long term stability at the cost of up front investment.