Need a special offer?Find out if your project fits.
+

How to adjust chart axis-label and value spaces ?

Answered
Ravi asked on March 30, 2019

Hi Team,
I’m a Premium licensed user.
How can we adjust spaces between 'fm-yAxis-label' and 'tick'(axis values) in charts (SVG elements)?
We are loading multiple pivots in dashboard. So, we should avoid unnecessary spaces.
 
We have created a fiddle sample for this,
https://jsfiddle.net/abufiddle/tmydgLvx/1/
Steps to reproduce
-- Make sure chart-type selected as 'Column'
-- Open 'chart-measures-dropdown' and select the value from 'Gv' to 'Qz'
-- Now, you will see more spaces between 'fm-yAxis-label' and 'tick'(axis values) [Qz <--(spaces)--> 200K]
This issue comes only when we format the axis values from default to thousands(K) as you guided in below link
https://www.flexmonster.com/question/how-to-format-chart-axis-values-to-thousandk-millionm/
 
Note: We have also attached snapshot, please get it.

Attachments:
space_axis-labels.png

3 answers

Public
Vera Didenko Vera Didenko Flexmonster April 1, 2019

Hello, Ravi,

Thank you for your question and for providing us with a JSFiddle and screenshot demonstrating the issue.

 
Please note that the reason why the issue with spaces occurs only when you format the axis values from default to thousands(K) lies in the following:
 
        Flexmonster by default switches to millions(M) when the maximum number on the Y-Axis is larger than 10 million.
        In this case, Flexmonster automatically calculates the required distance between the label and the newly formatted axis values.
 
        For everything under 10 million that is formatted in a custom way to thousands(K), the spaces will remain as previous and are not recalculated by Flexmonster.

A way to minimize the spaces between fm-yAxis-label and tick (axis values) in charts (SVG elements) is to set the decimalSeparator parameter to "" and the decimalPlaces parameter to 0:
 

"formats":[ 
                  { 
                     "name":"quantity",
                     "thousandsSeparator":",",
"decimalSeparator":"",
                     "decimalPlaces":0,
...
},
...
]

 
Please see the result in the modified JSFiddle example.

 
Please let us know if this works for you and if you have further questions.

Best Regards,
Vera

Public
Ravi April 1, 2019

Hi Vera Didenko,
Thanks for your response.

#decimalSeparator and decimalPlaces
As we allow our clients to define their own formats, we can't easily adjust the 'decimalSeperator' and 'decimalPlaces' as you said. So, that's impossible.

#As you mentioned below,
"Flexmonster by default switches to millions(M) when the maximum number on the Y-Axis is larger than 10 million."
Can you please implement this logic for thousand(K) as like millions(M) at default. So that, we can avoid this issue easily.
 

Public
Vera Didenko Vera Didenko Flexmonster April 2, 2019

Hello, Ravi,

Thank you for your reply.
 
Our team has taken into consideration your request to implement the default logic used in millions(M) for thousand(K) also and we agree that it is a useful feature to have.
 
This feature will be available in the minor release with the ETA April 22nd.
 

Please let us know if it works for you.
 

Best Regards,
Vera

Please login or Register to Submit Answer