Symptom
- A custom "CSS class" is applied to a vertical bar chart using the "CSS Class" Name property in the Styling panel.
- Data labels on vertical bar charts shift to the left and are no longer centered when applying "CSS Style" font-size with ".sap-custom-chart-data-labels".
- Removing the "CSS class" restores the correct center alignment.
"Image/data in this KBA is from SAP internal systems, sample data, or demo systems. Any resemblance to real data is purely coincidental."
Environment
SAP Analytics Cloud (2026.2.16)
Reproducing the Issue
- Log into SAC System.
- Create a story.
- Add a vertical "Bar/Column" chart; Ensure "Data labels" are enabled and appear centered.
- In the chart "Styling panel", set the data labels "Font size" to a large value (for example, 22px).
- Assign the "CSS class" name to the chart in the "Styling panel".
>> Observe that the data labels on the bars appear shifted to the left (not centered). - Remove the "CSS class" assignment to the chart
>> Observe that the labels are centered again.
Cause
- Product limitation (By design).
- Increasing the font size in the chart Styling panel initiates a full re-render of data labels; the chart recalculates positions for the larger text, adjusting the starting point.
- Later applying a CSS font-size (for example, 10px) changes only the visual style without re-rendering the chart, so labels keep positions calculated for the larger size and appear left-aligned.
Resolution
- Workaround (to ensure correct label positioning when using CSS):
1. Set the data labels "Font size" directly in the chart "Styling panel" to the smaller value intended to be used (for example, 10 px).
2. Save the changes
3. Apply the "CSS class" again
4. Re-save the story. - An enhancement request (ER) could be submitted to the Idea Place about this option for future considerations.
"SAP is committed to reviewing and responding to the ideas submitted on a regular basis. The ideas with the most votes will receive a higher level of attention for response and consideration. The processes and procedures associated with this site will continue to evolve and enhance over time. Refer to Knowledge Base Article : 2424376 - How do you create an enhancement request and provide feedback for SAP Analytics Cloud? for more details. "
See Also
Keywords
Data, Labels, Vertical, Bar, Chart, Column, Table, Centered, Alignment, Misaligned, .CSS, CSS, .sap-custom-chart-data-labels, Font-size, Size, Font, Styling, Panel, Render, Story, Theme, Custom, Configuration, Creation. , KBA , LOD-ANA-DES , Story Design & Visualizations , LOD-ANA-AD , Analytics Designer , Product Enhancement
Product
SAP Analytics Cloud 1.0
Attachments
| Capture.png |
SAP Knowledge Base Article - Public