asked on May 6, 2022
How would I go about changing the font size for x and y labels?
Trying to make a tiny small chart to fit many on a page.
Any additional tips appreciated. thank you
⋅ May 10, 2022
Hello, Michael!
Thank you for your question.
You can change the font size of labels on the X and Y axis by using the following CSS rule:
#fm-pivot-view .fm-axis text {
font-size: 11px !important;
}
Decreasing the font size will create extra space for charts. As the result, charts will become slightly bigger, without increasing the container. Therefore, decreasing font size for axis labels may serve your purpose. Please check this JSFiddle example: https://jsfiddle.net/flexmonster/21dqamny/.
Feel free to contact us if more questions arise.
Best Regards,
Maksym
⋅ May 10, 2022
Thank you.
In the sample jsFiddle provided, the y-axis caption collides with the y axis labels. I am also having trouble with this in other charts.
How to move the caption over so it doesn't collide? Since it uses translate, the regular margin / padding doesn't work.
Thank you
⋅ May 11, 2022
Hi, Michael,
Thank you for your quick response.
We want to mention that Flexmonster Pivot Charts are script-generated SVG. That's why CSS customizations are possible only to a certain extent. In this situation, we suggest making the font-size of the axis label bigger. As a result, it won't collide with the numbers. The `font-size` property of the label on the Y-axis can be set explicitly with the following CSS:
#fm-pivot-view .fm-y .fm-axis-label {
font-size: 12px !important;
}
Also, we suggest using the axisShortNumberFormat option. When set as true, axes labels on charts are displayed in short number formats like 10K, 10M, 10B, and 10T.
Please see the JSFiddle example: https://jsfiddle.net/flexmonster/zy2b8kw/.
Hope it helps.
Best Regards,
Maksym
⋅ May 18, 2022
Hi, Michael,
Hope you are doing well.
Our team is wondering if you had time to try the suggested approaches for decreasing the axis captions without colliding with labels. Looking forward to hear your feedback.
Best Regards,
Maksym