You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In Superset v6, the Big Number visualization is left-aligned by default due to changes in the frontend (migration to Emotion CSS-in-JS and new class names). There’s no built-in option to center the value and subheader, but you can do it with custom CSS.
To center the value and subheader, add the following CSS in the dashboard CSS editor or a CSS template:
/* Target all Big Number charts */
.superset-legacy-chart-big-number .text-container {
align-items: center !important;
}
.superset-legacy-chart-big-number .header-line,
.superset-legacy-chart-big-number .subheader-line {
text-align: center !important;
width:100%;
}
If you want to target a specific chart, use its chart ID (e.g., #chart-id-123 .text-container) instead of the general class. This avoids issues with dynamically generated class names, which can change after upgrades.
After applying, reload your dashboard to see the effect. If you upgrade Superset in the future, you may need to update these selectors if the DOM or class names change again. For best results, document your customizations and use the most stable selectors available (like chart IDs or data-test attributes) referencereference.
In Superset v6, the Big Number chart alignment change is expected and comes
from the frontend migration to Emotion (CSS-in-JS) and updated component
structure. The previous centering behavior from v5 is no longer configurable
via chart controls.
At the moment, custom CSS (dashboard-level or via a template) is the supported
way to center the value and subheader, as shown above.
This might be worth documenting explicitly in the v6 migration notes or Big
Number chart docs, since it can surprise users upgrading from v5.
@tiya-9975
Yes, I would appreciate that, as the response from Dosut above did not work on my side.
Documenting this behavior and the recommended CSS workaround would therefore be very helpful.
@dosubot nothing happend with
/* Target all Big Number charts */
.superset-legacy-chart-big-number .text-container {
align-items: center !important;
}
.superset-legacy-chart-big-number .header-line,
.superset-legacy-chart-big-number .subheader-line {
text-align: center !important;
width: 100%;
}
The CSS you tried didn't work because Superset v6 uses Emotion (CSS-in-JS) and flexbox for layout, so you need to override the flex alignment directly on both the main container and the text container. Also, specificity and the use of !important are critical, since Superset's styles may override your custom CSS.
Try this updated CSS in your dashboard CSS editor or template:
/* Center Big Number value and subheader in v6 */
.superset-legacy-chart-big-number,
.superset-legacy-chart-big-number .text-container {
align-items: center !important;
justify-content: center !important;
display: flex !important;
flex-direction: column !important;
}
.superset-legacy-chart-big-number .header-line,
.superset-legacy-chart-big-number .subheader-line {
text-align: center !important;
width:100%!important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
}
If you have multiple Big Number charts and only want to target one, use its chart ID (e.g., #chart-id-123 .text-container). If this still doesn't work, inspect the chart in your browser's developer tools to confirm the class names and see if your CSS is being applied or overridden. Sometimes, increasing selector specificity or moving your CSS lower in the load order helps. More details and best practices are discussed here and the component structure is shown here.
Let me know if this solves it or if you see any other class names in your DOM!
Thanks for confirming @JustineAssoulant . I’ll open a small docs PR to document the v6 behavior change for Big Number alignment, explain why it differs from v5, and include the recommended (and scoped) CSS workaround along with its limitations.
I’ve opened a documentation PR to explicitly document the Big Number alignment change in Superset 6 and explain the recommended custom CSS workaround for centering.
The change has been added to UPDATING.md under the Next section so users upgrading from Superset 5 are aware of this behavior change.
Hmm... I haven't tested this out yet (or at least noticed it as a problem), but rather than documenting it as a "breaking" change and suggesting a CSS workaround, how about adding the control you were hoping for, with a default state of "centered" but the ability to select left/right as well? Then it's a feature rather than a bug!
Thanks for the suggestion @rusackas, @JustineAssoulant — that makes sense, and I agree it would be a better outcome UX-wise.
I initially went the documentation route because the alignment change appeared to be an unintentional side-effect of the Emotion migration rather than a deliberate chart behavior change, and I wasn’t sure if adding a new control was in scope for this issue.
That said, adding an explicit alignment control (defaulting to “centered” for backward compatibility, with left/right options) sounds like a cleaner solution than documenting a workaround.
I’m happy to explore implementing this if that direction makes sense — my next step would be to understand where alignment is currently being enforced in the Big Number chart component and whether restoring the previous centered default is feasible without unintended side effects.
Let me know if you’d prefer:
• converting this PR into a feature change, or
• keeping this one doc-only and opening a follow-up issue/PR for the control
I'd say go ahead and re-jigger the PR to be a feature submission, then the doc entry becomes irrelevant. Thank you in advance for looking into this! Turns a problem into a win!
Sounds good @rusackas — I’ll convert this into a feature PR.
I’ll explore adding an explicit alignment control to the Big Number chart,
defaulting to “centered” for backward compatibility, with left/right options.
I’ll update the PR once I have a working implementation.
Activity
dosubot commentedon Feb 4, 2026
In Superset v6, the Big Number visualization is left-aligned by default due to changes in the frontend (migration to Emotion CSS-in-JS and new class names). There’s no built-in option to center the value and subheader, but you can do it with custom CSS.
To center the value and subheader, add the following CSS in the dashboard CSS editor or a CSS template:
If you want to target a specific chart, use its chart ID (e.g.,
#chart-id-123 .text-container) instead of the general class. This avoids issues with dynamically generated class names, which can change after upgrades.After applying, reload your dashboard to see the effect. If you upgrade Superset in the future, you may need to update these selectors if the DOM or class names change again. For best results, document your customizations and use the most stable selectors available (like chart IDs or
data-testattributes) reference reference.To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other
tiya-9975 commentedon Feb 4, 2026
hi @JustineAssoulant ,
Adding a contributor clarification:
In Superset v6, the Big Number chart alignment change is expected and comes
from the frontend migration to Emotion (CSS-in-JS) and updated component
structure. The previous centering behavior from v5 is no longer configurable
via chart controls.
At the moment, custom CSS (dashboard-level or via a template) is the supported
way to center the value and subheader, as shown above.
This might be worth documenting explicitly in the v6 migration notes or Big
Number chart docs, since it can surprise users upgrading from v5.
tiya-9975 commentedon Feb 4, 2026
If this makes sense, I’m happy to submit a small docs PR to document this
behavior and the recommended CSS workaround.
JustineAssoulant commentedon Feb 5, 2026
@tiya-9975
Yes, I would appreciate that, as the response from Dosut above did not work on my side.
Documenting this behavior and the recommended CSS workaround would therefore be very helpful.
JustineAssoulant commentedon Feb 5, 2026
@dosubot nothing happend with
/* Target all Big Number charts */
.superset-legacy-chart-big-number .text-container {
align-items: center !important;
}
.superset-legacy-chart-big-number .header-line,
.superset-legacy-chart-big-number .subheader-line {
text-align: center !important;
width: 100%;
}
dosubot commentedon Feb 5, 2026
The CSS you tried didn't work because Superset v6 uses Emotion (CSS-in-JS) and flexbox for layout, so you need to override the flex alignment directly on both the main container and the text container. Also, specificity and the use of !important are critical, since Superset's styles may override your custom CSS.
Try this updated CSS in your dashboard CSS editor or template:
If you have multiple Big Number charts and only want to target one, use its chart ID (e.g.,
#chart-id-123 .text-container). If this still doesn't work, inspect the chart in your browser's developer tools to confirm the class names and see if your CSS is being applied or overridden. Sometimes, increasing selector specificity or moving your CSS lower in the load order helps. More details and best practices are discussed here and the component structure is shown here.Let me know if this solves it or if you see any other class names in your DOM!
To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other
tiya-9975 commentedon Feb 9, 2026
Thanks for confirming @JustineAssoulant . I’ll open a small docs PR to document the v6 behavior change for Big Number alignment, explain why it differs from v5, and include the recommended (and scoped) CSS workaround along with its limitations.
tiya-9975 commentedon Feb 9, 2026
Hi @JustineAssoulant
I’ve opened a documentation PR to explicitly document the Big Number alignment change in Superset 6 and explain the recommended custom CSS workaround for centering.
The change has been added to
UPDATING.mdunder theNextsection so users upgrading from Superset 5 are aware of this behavior change.PR: #37794
Please let me know if you’d like the note to live in a different doc location or if any wording should be adjusted. Happy to iterate 🙂
rusackas commentedon Feb 9, 2026
Hmm... I haven't tested this out yet (or at least noticed it as a problem), but rather than documenting it as a "breaking" change and suggesting a CSS workaround, how about adding the control you were hoping for, with a default state of "centered" but the ability to select left/right as well? Then it's a feature rather than a bug!
tiya-9975 commentedon Feb 10, 2026
Thanks for the suggestion @rusackas, @JustineAssoulant — that makes sense, and I agree it would be a better outcome UX-wise.
I initially went the documentation route because the alignment change appeared to be an unintentional side-effect of the Emotion migration rather than a deliberate chart behavior change, and I wasn’t sure if adding a new control was in scope for this issue.
That said, adding an explicit alignment control (defaulting to “centered” for backward compatibility, with left/right options) sounds like a cleaner solution than documenting a workaround.
I’m happy to explore implementing this if that direction makes sense — my next step would be to understand where alignment is currently being enforced in the Big Number chart component and whether restoring the previous centered default is feasible without unintended side effects.
Let me know if you’d prefer:
• converting this PR into a feature change, or
• keeping this one doc-only and opening a follow-up issue/PR for the control
Either way works for me.
rusackas commentedon Feb 10, 2026
I'd say go ahead and re-jigger the PR to be a feature submission, then the doc entry becomes irrelevant. Thank you in advance for looking into this! Turns a problem into a win!
tiya-9975 commentedon Feb 10, 2026
Sounds good @rusackas — I’ll convert this into a feature PR.
I’ll explore adding an explicit alignment control to the Big Number chart,
defaulting to “centered” for backward compatibility, with left/right options.
I’ll update the PR once I have a working implementation.
Thanks for the guidance!
rusackas commentedon Feb 23, 2026
Any luck @tiya-9975? This'd be a nice feature, and hopefully not too painful of a PR.
docs: Superset 6.1 documentation catch-up — batch 5
feat(bignumber): add an alignment control for Big Number charts
feat(bignumber): add an alignment control for Big Number charts
feat(bignumber): add an alignment control for Big Number charts
feat(bignumber): add an alignment control for Big Number charts
feat(bignumber): add an alignment control for Big Number charts
feat(bignumber): add an alignment control for Big Number charts