comboChart, Label, fontSize

[AlexGol]

Hey community!

I hope you could help me out with this problem.

I am trying to change the font size on a Combo Chart with through the themes. By changing "label" properties for comboChart in JSON file I managed to change the font size  of measures on the lines (aka 'Height of line' as it's called in the chart properties). However,  I also have measures on a secondary axis on the same chart presented as bars (aka 'Length of bars' as it's called in the chart properties) where font-size changes does not apply through the theme's JSON file.  So, it has turned out that I can only change the labels' font size of measures on lines as opposed to measures on bars that are both part of a comboChart... Also, interesting to note, as soon as I change the type of presentation of the measure from bars to line, that new font size apply. But, I need to have a combination of bars and lines on the same chart, which makes it a problem. 

This is my JSON code: 

"comboChart": {
                                    "label": {"name": {"color": "@B35",
                                                                          "fontSize": "20px"},
                                                       "value": {"color": "@B35",
                                                                          "fontSize": "15px"}}

As you can see, I have tried to change the font size both through label's "name" and "value". Still no luck...

I wonder if there is any way to change the font size for the 'Length of bars' measures on a Combo Chart or it is a 'bug'/mis-development from Qlik side.

[Andrei_Cusnir]

Hello,

Perhaps it will be easier to understand better the exact use case scenario if you share with us the screenshot of the Combo chart. Please also mark the part which you want to modify and also please mark the parts that you have already succeeded in modifying. This will allow us to understand exactly what you are trying to achieve

[AlexGol]

Hey Andrei,

I thought I did attached the screenshot of the chart. I see it attached to my original post as example.png

Anyways, attaching it here again. The circled area in red are the values that I cannot change the font size for. The values for the lines above can be changed through theme.json file

Thanks in advance!  

[Andrei_Cusnir]

Hello,

I am apologizing for the misunderstanding. The image is indeed attached to the initial post, the issue was on my side, as it failed to load the thread properly when I opened it, so the image was not displayed at that time. 

From the screenshot I understand that you have enabled Show data points on the Combo chart and you have checked the Point labels as well as the Bar labels. Therefore, you would like to customize the color of those labels. I believe that this is not possible natively and here are some details to confirm the information:

1. In the official documentation Custom theme JSON properties > comboChart [1], you can click on the "Example" under "Combo chart properties." and copy paste it in your custom theme. These are all the properties that you can modify for the Combo chart. If you change all the color codes to random colors, you can clearly see which parts of the visualization are modified and you will notice that the data points are not affected.
2. To be more specific. You have tried changing the comboChart.label.name.color and comboChart.label.value.color however comboChart.label doesn't exists in the list of properties that you can modify. The only properties that you can modify are: comboChart.backgroundColor, comboChart.title, comboChart.axis and comboChart.legend. None of those properties refers to the data point values though. 
3. Here is a post [2], where another community member is asking a similar question and the answer provided, states that it is not possible. Therefore, you can submit a feature request [3] and elaborate in details to why this is going to be beneficial for your use case scenario and for other users as well.
4. In the post [2], the answer also states that you might be able to achieve this by changing the CSS code, however this might not be 100% accurate. The reason is, if you open the Developers Console and you try to inspect the HTML elements from which the visualization is constructed, you will notice that all the parts that you can modify (title, subtitle, legend etc.) are individual HTML elements that you can also modify on the Developers Console as well for testing. However, if you hover over the actual data points, you will noticed that it is just an entire DIV element with the visualization already rendered inside. Therefore, modifying those CSS elements is not possible. You might try to change the core HUB CSS file, however, it is not a guarantee that it is going to help you archive the exact outcome that you want and if it is going to work after all, then it will be applied only on your current view, which means that if you backup the application with the theme and you transfer it to another Qlik Sense installation, you will also have to adjust the HUB CSS file as well on that version of Qlik Sense. 

To summarize the findings, it looks like natively it is not possible to change the CSS style of the data points with custom theme on the Combo chart visualization. I would recommend submitting a feature request [3] and in the meantime just make sure that the colors you choose for the rest of the visualization allows you to see the data points clearly.

I hope that this information was helpful. In case I have misunderstood the use case scenario, please elaborate in details by providing additional information. However, if it has helped you get all the information that you needed, please mark it as accepted solution to give further visibility to other community members. 
 

---

[1] https://help.qlik.com/en-US/sense-developer/April2020/Subsystems/Extensions/Content/Sense_Extensions...

[2] https://community.qlik.com/t5/New-to-Qlik-Sense/Qlik-Sense-Changing-Data-Point-Colours/td-p/15615

[3] https://community.qlik.com/t5/Knowledge-Base/How-To-Submit-Feature-Requests-For-Qlik-Products/ta-p/1...

[AlexGol]

Hey Andrei,

Thanks for going extra miles to elaborating your thinking about my problem. However, the original question was not about color of data points, but about their SIZE, i.e. font size (e.g. I need 15px). So, some comments are not relevant to my case.

Also, as you said  comboChart.label doesn't exists the list of properties that you can modify, however,  I have managed to change the font size for 'Point labels' through manipulating code for comboChart in theme.json file by adding 'label' properties to the file and this is extract of my json code for comboChart (the color code is just a default property and it wasn't my intension to change it): 

"comboChart": {
                                    "label": {"name": {"fontSize": "20px"},
                                                       "value": {"fontSize": "15px"}}

However, unfortunately it does not work for 'Bar labels' - this is the main issue.

I am aware of CSS option in the Developers Console and I have explored this avenue before as well with no luck either.

Thank you, though, for the hint by suggesting to submit a feature request - I didn't know about this option yet. 

All in all, with your reply you have just confirmed all my findings and I was rather hoping that someone from Qlik support/product development team would help me by correcting this omittance in the development by adding this feature in the next patch or release.

Many thanks for your time!

[Andrei_Cusnir]

Hello @AlexGol,

Thank you very much for your detailed explanation and I am apologizing for the misunderstanding. You can submit this as a feature request as we have discussed, since it seems that there is no any way of implementing it natively.