X-axis title encroaching in to chart when positioned vertically

[Steve Hanson]

Hi, I had responded to a previous forum post about this issue but have yet to hear a response back so I thought I would make a separate post about an issue I'm experiencing.

I do not know how to configure the CSS to help push the X-Axis title to be below the lowest part of the bar chart I'm using (see attached image) . It overlaps the chart and any CSS styling that I attempt does not fix the issue.

Is there a specific style class that I would need to target, either inline or internally to have push down lower? In theory, it seems I could add a left margin or left padding to correct the issue but everything I've tried gets ignored or overwritten.

Thanks in advance for your assistance!

Attachment: LocationSFchart_bf20ec40.png

[Nishanthi Panner Selvam]

Hi Steve,

 

Greetings from Syncfusion

 

We have ensured your reported scenario by creating a chart with an axis title rotated at a 90° angle. It rendered as expected without overlapping the chart.

 

For your reference, we have attached a screenshot and provided a sample below:

 

Screenshot:

 

Sample: E2z1cn7h (duplicated) - StackBlitz

 

Since we are unable to replicate an issue from our end, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.

• Try to reproduce the reported scenario in above sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Share your Syncfusion package version you are using.

Regards,

Nishanthi

[Zain Abbas]

"Hey! I’ve run into a similar issue before—usually targeting the specific chart’s axis label class in CSS does the trick. Try inspecting the element and applying margin or transform to push it down; that often works when normal padding gets overridden."

If you want, I can also make an even simpler version perfect for a quick forum reply. Do you want me to do that?

[Durga Gopalakrishnan]

Zain,

We would like to inform you that when you apply CSS styles directly to the X-axis title in the rendered DOM element, the chart will not re-render. Its position will change based on the specified CSS attributes (such as margin, transform, or padding), without considering overlaps with other chart elements like the chart area, legend, etc.

Additionally, we request you to share the use case for changing CSS attributes of the axis title in the DOM, as we already provide a property to apply padding between the chart area and the axis title.

[Zain Abbas]

Hey! Try targeting the axis label with something like .apexcharts-xaxis-title and adding transform: translateY(10px) or margin-bottom to push it down - sometimes you need !important to override the default styles. If that doesn't work, you might need to adjust the chart's offsetY option in the chart config itself rather than through CSS!

[Durga Gopalakrishnan]

Zain,

Thanks for the suggestion. Just to clarify—we’re not using ApexCharts in this implementation. We only handle Syncfusion (EJ2) Charts, so Apex‑specific CSS selectors or options won’t apply here.

If you need ApexCharts support separately, the official docs would be the best reference. For our scope, we’ll stick with Syncfusion.

For Syncfusion, you can adjust spacing using:

labelPadding - spacing between the axis line and axis labels

titlePadding - spacing between the axis labels and the axis title

Let me know if you'd like me to update your chart configuration with the correct Syncfusion settings.