You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "SaiChaitanya06 (via GitHub)" <gi...@apache.org> on 2025/05/21 07:11:28 UTC
[D] trendline issues from bignumber chart [superset]
GitHub user SaiChaitanya06 created a discussion: trendline issues from bignumber chart
Hey, I have been using superset since 6 months and I could not understand how to show the sum of values as bignumber and each value over the trendline. If anyone know how could that be aciheved, help me out here!!
GitHub link: https://github.com/apache/superset/discussions/33546
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] trendline issues from bignumber chart [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: trendline issues from bignumber chart
<!-- Greeting -->
Hello @SaiChaitanya06! I'm [Dosu](https://dosu.dev), here to help you with any bugs, questions, or guidance you might need while waiting for a human maintainer. Let's tackle this issue together!
<!-- Answer -->
To display the sum of values as a bignumber and each individual value over the trendline in Superset, you can use the `BigNumberWithTrendline` visualization. This visualization allows you to render a bignumber along with a trendline, and it can be configured to display individual values over the trendline.
Here's a basic setup using the `SuperChart` component from the `@superset-ui/core` package:
```jsx
import { SuperChart } from '@superset-ui/core';
import { BigNumberChartPlugin } from '@superset-ui/plugin-chart-echarts';
import testData from './data';
new BigNumberChartPlugin().configure({ key: 'big-number' }).register();
const formData = {
colorPicker: {
r: 0,
g: 122,
b: 135,
a: 1,
},
compareLag: 1,
compareSuffix: 'over 10Y',
metric: 'sum__SP_POP_TOTL',
showTrendLine: true,
startYAxisAtZero: true,
timeGrainSqla: 'P1Y',
vizType: 'big-number',
yAxisFormat: '.3s',
};
export const basicWithTrendline = () => (
<SuperChart
chartType="big-number"
width={400}
height={400}
queriesData={[{ data: testData }]}
formData={formData}
/>
);
```
Ensure that `queriesData` contains the individual values you want to display over the trendline, and `formData.metric` is set to the sum of those values. Adjust the `formData` properties such as `colorPicker`, `compareLag`, and `yAxisFormat` to customize the appearance of the trendline and bignumber <sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber/BigNumber.stories.tsx)</sup><sup>[[4]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts)</sup>.
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Share context across your team and agents. Try [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-feedback&utm_term=apache%2Fsuperset&message_id=f7f26fea-f0d6-4e6f-b1ec-43b4df076418) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-learn-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-add-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/33546#discussioncomment-13216245
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] trendline issues from bignumber chart [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: trendline issues from bignumber chart
<!-- Greeting -->
Hello @SaiChaitanya06! I'm [Dosu](https://dosu.dev), here to help you with any bugs, questions, or guidance you might need while waiting for a human maintainer. Let's tackle this issue together!
<!-- Answer -->
To display the sum of values as a bignumber and each individual value over the trendline in Superset, you can use the `BigNumberWithTrendline` visualization. This visualization allows you to render a bignumber along with a trendline, and it can be configured to display individual values over the trendline.
Here's a basic setup using the `SuperChart` component from the `@superset-ui/core` package:
```jsx
import { SuperChart } from '@superset-ui/core';
import { BigNumberChartPlugin } from '@superset-ui/plugin-chart-echarts';
import testData from './data';
new BigNumberChartPlugin().configure({ key: 'big-number' }).register();
const formData = {
colorPicker: {
r: 0,
g: 122,
b: 135,
a: 1,
},
compareLag: 1,
compareSuffix: 'over 10Y',
metric: 'sum__SP_POP_TOTL',
showTrendLine: true,
startYAxisAtZero: true,
timeGrainSqla: 'P1Y',
vizType: 'big-number',
yAxisFormat: '.3s',
};
export const basicWithTrendline = () => (
<SuperChart
chartType="big-number"
width={400}
height={400}
queriesData={[{ data: testData }]}
formData={formData}
/>
);
```
Ensure that `queriesData` contains the individual values you want to display over the trendline, and `formData.metric` is set to the sum of those values. Adjust the `formData` properties such as `colorPicker`, `compareLag`, and `yAxisFormat` to customize the appearance of the trendline and bignumber <sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber/BigNumber.stories.tsx)</sup><sup>[[4]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
---
<sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/f7f26fea-f0d6-4e6f-b1ec-43b4df076418?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/f7f26fea-f0d6-4e6f-b1ec-43b4df076418?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/f7f26fea-f0d6-4e6f-b1ec-43b4df076418?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/f7f26fea-f0d6-4e6f-b1ec-43b4df076418?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/f7f26fea-f0d6-4e6f-b1ec-43b4df076418?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/f7f26fea-f0d6-4e6f-b1ec-43b4df076418?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/f7f26fea-f0d6-4e6f-b1ec-43b4df076418?feedback_type=other)</sup>
GitHub link: https://github.com/apache/superset/discussions/33546#discussioncomment-13216245
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] trendline issues from bignumber chart [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: trendline issues from bignumber chart
<!-- Answer -->
You should paste this code in a React component file within your Superset frontend project. If you're working on customizing or extending Superset, you would typically create a new component or modify an existing one where you want to display the BigNumber with Trendline visualization.
Here's a step-by-step guide:
1. **Locate the Superset Frontend Directory**: Navigate to the directory where the Superset frontend code is located. This is usually within the `superset-frontend` folder.
2. **Create or Open a Component File**: If you're adding a new visualization, create a new `.jsx` or `.tsx` file in the appropriate directory. If you're modifying an existing visualization, open the relevant file.
3. **Import Necessary Modules**: Ensure you have the necessary imports at the top of your file, like `SuperChart` and `BigNumberChartPlugin`.
4. **Paste the Code**: Insert the provided code snippet into your component file. Make sure the component is properly exported and integrated into your application.
5. **Register the Plugin**: Ensure that the `BigNumberChartPlugin` is registered, as shown in the code snippet.
6. **Test Your Changes**: Run your Superset application and navigate to the page where your component is used to verify that the visualization appears as expected.
If you're not familiar with the Superset codebase, it might be helpful to consult the documentation or seek guidance from someone experienced with Superset development.
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=029b43f3-8d3f-4b24-b3ae-94a9262cf9fd) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/33546#discussioncomment-13216343
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] trendline issues from bignumber chart [superset]
Posted by "SaiChaitanya06 (via GitHub)" <gi...@apache.org>.
GitHub user SaiChaitanya06 added a comment to the discussion: trendline issues from bignumber chart
Hey @Dosu,
where should I paste this code?
GitHub link: https://github.com/apache/superset/discussions/33546#discussioncomment-13216336
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] trendline issues from bignumber chart [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: trendline issues from bignumber chart
<!-- Answer -->
You should paste this code in a React component file within your Superset frontend project. If you're working on customizing or extending Superset, you would typically create a new component or modify an existing one where you want to display the BigNumber with Trendline visualization.
Here's a step-by-step guide:
1. **Locate the Superset Frontend Directory**: Navigate to the directory where the Superset frontend code is located. This is usually within the `superset-frontend` folder.
2. **Create or Open a Component File**: If you're adding a new visualization, create a new `.jsx` or `.tsx` file in the appropriate directory. If you're modifying an existing visualization, open the relevant file.
3. **Import Necessary Modules**: Ensure you have the necessary imports at the top of your file, like `SuperChart` and `BigNumberChartPlugin`.
4. **Paste the Code**: Insert the provided code snippet into your component file. Make sure the component is properly exported and integrated into your application.
5. **Register the Plugin**: Ensure that the `BigNumberChartPlugin` is registered, as shown in the code snippet.
6. **Test Your Changes**: Run your Superset application and navigate to the page where your component is used to verify that the visualization appears as expected.
If you're not familiar with the Superset codebase, it might be helpful to consult the documentation or seek guidance from someone experienced with Superset development.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
---
<sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/029b43f3-8d3f-4b24-b3ae-94a9262cf9fd?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/029b43f3-8d3f-4b24-b3ae-94a9262cf9fd?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/029b43f3-8d3f-4b24-b3ae-94a9262cf9fd?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/029b43f3-8d3f-4b24-b3ae-94a9262cf9fd?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/029b43f3-8d3f-4b24-b3ae-94a9262cf9fd?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/029b43f3-8d3f-4b24-b3ae-94a9262cf9fd?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/029b43f3-8d3f-4b24-b3ae-94a9262cf9fd?feedback_type=other)</sup>
GitHub link: https://github.com/apache/superset/discussions/33546#discussioncomment-13216343
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org