Inconsistent Default Padding for Different Charts

[tatiana-cherne]

Bug description

Depending on the type selected, the Superset UI will display charts with different alignments. Ideally they would be centered inside the card. Currently the padding differs on both sides leading to more whitespace on the left or right.

For Example:

1. Go to Dashboard
2. Click + Chart
3. Select Table
4. Click + Chart
5. Select Bar Chart

Screenshots/recordings

Superset version

4.1.0

Python version

3.11

Node version

Not applicable

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey @tatiana-cherne! I'm here to help you with any bugs, questions, or contributions you have for Superset. Feel free to ask me anything! Dosu

The issue of inconsistent default padding for different chart types in Superset can be addressed by examining the padding settings in the codebase. The default padding for different chart types is set in the file superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts, where the defaultLegendPadding object defines padding values for different legend orientations ^[1]. Additionally, the getPadding function in superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts is used to determine the padding for timeseries charts, taking into account parameters like axis title offsets and zoomability ^[2].

For the Table component, specific CSS classes and styles affect its alignment, such as text alignment for header and metric cells, global filter alignment, and pagination alignment ^[3][4]. However, there is no specific information about the Bar Chart component's alignment in the provided context.

To achieve consistent alignment across different chart types, you may need to adjust these padding settings and CSS styles to ensure that all charts are centered within their cards.

To continue talking to Dosu, mention @dosu.

[sahiladit]

can you assign it to me?

[tatiana-cherne]

I have begun working on the issue and I hope that I can continue

[sahiladit]

Sure

[shivanikashyapp]

can you assign it to me?

[Dronesh77]

Hi @tatiana-cherne ,
I noticed that you’ve also started working on this issue, and I was wondering if you’ve found a solution. I’ve been working on a potential fix involving a dynamic layout adjustment inspired by plt.tight_layout() from Matplotlib and would love to coordinate efforts if you’re still working on this.

[sahilkumar100]

Hyy @tatiana-cherne I want to work on this issues please assignees me this issues.

[Vam-tech-star]

Hi I'm Vam. I started to contribute from today please help me to find issues.

[Vam-tech-star]

How can we ensure consistent padding and alignment for all chart types in Apache Superset?

[osamaahmed17]

Hi @tatiana-cherne ,
I'm interested in working on this issue. Could you kindly assign it to me? Looking forward to contributing!

[tatiana-cherne]

I do not have authority to assign this issue to anyone unfortunately, I just opened the issue. I ended up fixing a similar issue, but this one remains open if anyone wants to jump on it.