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.

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

• [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [X] I have searched the GitHub issue tracker and didn't find a similar bug report.
• [X] 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[bot]]

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.