dosubot[bot] commented on issue #37674:
URL: https://github.com/apache/superset/issues/37674#issuecomment-3848331377
<!-- Answer -->
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:
```css
/* 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) [reference](https://github.com/apache/superset/discussions/37504)
[reference](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx#L52-L586).
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/dbe34c8d-f51c-4bcf-93b1-d92824e264ac?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/dbe34c8d-f51c-4bcf-93b1-d92824e264ac?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/dbe34c8d-f51c-4bcf-93b1-d92824e264ac?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/dbe34c8d-f51c-4bcf-93b1-d92824e264ac?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/dbe34c8d-f51c-4bcf-93b1-d92824e264ac?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/dbe34c8d-f51c-4bcf-93b1-d92824e264ac?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/dbe34c8d-f51c-4bcf-93b1-d92824e264ac?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=In%20Superset%20v6%2C%20the%20Big%20Number%20visualization%20is%20left-aligned%20by%20default%20due%20to%20changes%20in%20the%20frontend%20%28migration%20to%20Emotion%20CSS-in-JS%20and%20new%20class%20names%29.%20There%E2%80%99s%20no%20built-in%20option%20to%20center%20the%20value%20and%20subheader%2C%20but%20you%20can%20do%20it%20with%20custom%20CSS.%0A%0ATo%20center%20the%20value%20and%20subheader%2C%20add%20the%20following%20CSS%20in%20the%20dashboard%20CSS%20editor%20or%20a%20CSS%20template%3A%0A%0A%60%60%60css%0A/%2A%20Target%20all%20Big%20Number%20charts%20%2A/%0A.superset-legacy-chart-big-number%20.text-container%20%7B%0A%20%20align-items%3A%20center%20%21important%3B%0A%7D%0A.superset-legacy-chart-big-number%20.header-line%2C%0A.superset-le
gacy-chart-big-number%20.subheader-line%20%7B%0A%20%20text-align%3A%20center%20%21important%3B%0A%20%20width%3A%20100%25%3B%0A%7D%0A%60%60%60%0A%0AIf%20you%20want%20to%20target%20a%20specific%20chart%2C%20use%20its%20chart%20ID%20%28e.g.%2C%20%60%23chart-id-123%20.text-container%60%29%20instead%20of%20the%20general%20class.%20This%20avoids%20issues%20with%20dynamically%20generated%20class%20names%2C%20which%20can%20change%20after%20upgrades.%0A%0AAfter%20applying%2C%20reload%20your%20dashboard%20to%20see%20the%20effect.%20If%20you%20upgrade%20Superset%20in%20the%20future%2C%20you%20may%20need%20to%20update%20these%20selectors%20if%20the%20DOM%20or%20class%20names%20change%20again.%20For%20best%20results%2C%20document%20your%20customizations%20and%20use%20the%20most%20stable%20selectors%20available%20%28like%20chart%20IDs%20or%20%60data-test%60%20attributes%29%C2%A0%5Breference%5D%28https%3A//github.com/apache/superset/discussions/37504%29%C2%A0%5Breference%5D%28https%3A//github.com/
apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx%23L52-L586%29.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/37674)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
