Apache Superset 6.0.0: Big Number (Legacy) chart, how to override default “No data” empty-state messages when embedding charts

[ypandey-fluidata]

Bug description

BigNumberViz.tsx

Current Behavior
-For the Big Number legacy chart, the following messages are rendered by default when no data is available:

Header value
-"No data"

Subtitle (no fallback value)
-"No data after filtering or data is NULL for the latest time record"

Subtitle (fallback exists)
-"Try applying different filters or ensuring your datasource has data"

These strings are defined directly in:
-superset-frontend/src/visualizations/BigNumber/BigNumberViz.tsx

What I need support with?

I have shared the updated tsx but i need help with how can I implement this change on my custom superset image--

const renderHeader = (maxHeight: number) => {
const { bigNumber, width, colorThresholdFormatters, onContextMenu } = props;
// @ts-ignore
const text = bigNumber === null ? t('N/A') : headerFormatter(bigNumber);

const hasThresholdColorFormatter =
  Array.isArray(colorThresholdFormatters) &&
  colorThresholdFormatters.length > 0;

let numberColor;
if (hasThresholdColorFormatter) {
  colorThresholdFormatters!.forEach(formatter => {
    const formatterResult = bigNumber
      ? formatter.getColorFromValue(bigNumber as number)
      : false;
    if (formatterResult) {
      numberColor = formatterResult;
    }
  });
} else {
  numberColor = theme.colorText;
}

const container = createTemporaryContainer();
document.body.append(container);
const fontSize = computeMaxFontSize({
  text,
  maxWidth: width * 0.9, // reduced it's max width
  maxHeight,
  className: 'header-line',
  container,
});
container.remove();

const handleContextMenu = (e: MouseEvent<HTMLDivElement>) => {
  if (onContextMenu) {
    e.preventDefault();
    onContextMenu(e.nativeEvent.clientX, e.nativeEvent.clientY);
  }
};

return (
  <div
    ref={headerRef}
    className="header-line"
    style={{
      display: 'flex',
      alignItems: 'center',
      fontSize,
      height: 'auto',
      color: numberColor,
    }}
    onContextMenu={handleContextMenu}
  >
    {text}
  </div>
);

};

const rendermetricComparisonSummary = (maxHeight: number) => {
const { width } = props;
let fontSize = 0;

const text = subheader;

if (text) {
  const container = createTemporaryContainer();
  document.body.append(container);
  try {
    fontSize = computeMaxFontSize({
      text,
      maxWidth: width * 0.9,
      maxHeight,
      className: 'subheader-line',
      container,
    });
  } finally {
    container.remove();
  }

  return (
    <div
      ref={subheaderRef}
      className="subheader-line"
      style={{
        fontSize,
        height: maxHeight,
      }}
    >
      {text}
    </div>
  );
}
return null;

};

const renderSubtitle = (maxHeight: number) => {
const { subtitle, width, bigNumber, bigNumberFallback } = props;
let fontSize = 0;

const NO_DATA_OR_HASNT_LANDED = t(
  'N/A — no data available',
);
const NO_DATA = t(
  'N/A — no data available, try different filters',
);

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.9

Node version

16

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[bot]]

To override the default "No data" messages in the Big Number (Legacy) chart, you need to update the relevant strings in your BigNumberViz.tsx file, then rebuild and deploy the frontend as part of a custom Superset Docker image. These messages are defined directly in the React component, so code changes are required for global or per-deployment customization—there’s no UI option for this in dashboards or chart settings. You can also override these messages globally via translation files if you want to change them for all users and languages, but for most use cases, editing the component is the most direct approach citation.

For Superset 6.0.0+, you must use Node.js 20.x for frontend builds (Node 16 will fail). Here’s a typical Dockerfile pattern for deploying your custom frontend changes:

FROM apache/superset:latest
USER root

# Copy your modified frontend code (replace with your actual path)
COPY superset-frontend/ /app/superset-frontend/

# Rebuild frontend assets inside the container
RUN cd /app/superset-frontend && \
    npm ci && npm run build && \
    cp -r /app/superset-frontend/build/* /app/superset/static/assets/

USER superset

If you only want to override a few files (like BigNumberViz.tsx), you can copy just those files instead of the whole directory to avoid build errors citation.

After building your image (docker build -t custom-superset .), run it as usual. To verify your changes, embed or view the Big Number (Legacy) chart with no data and confirm your custom messages appear.

For best practices: keep your changes under version control, and be aware that you’ll need to reapply or merge them if you upgrade Superset, since upstream changes may affect the same files. For development, you can use the Docker Compose dev environment and mount your local code for live updates without rebuilding the image citation.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[ypandey-fluidata]

#Dockerfile

COPY frontend_overrides/native_filters/index.tsx
src/dashboard/components/nativeFilters/FilterBar/index.tsx

RUN npm ci
RUN npm run build

FROM apache/superset:6.0.0

USER root

RUN pip install --no-cache-dir psycopg2-binary

COPY --from=frontend-builder
/superset/superset/static/assets
/app/superset/static/assets

USER superset

---

The above code is used to change the clear all functionality and rebuild the superset image. I need help with the proper src path of BigNumberViz.tsx to override it in the actual image creation.

[dosubot[bot]]

The correct source path for BigNumberViz.tsx in Superset 6.0.0 is:

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

To override this file in your Docker build, place your modified BigNumberViz.tsx in your build context (for example, in frontend_overrides/BigNumberViz.tsx), then add this COPY command before running npm ci and npm run build:

COPY frontend_overrides/BigNumberViz.tsx superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

Make sure this happens before the frontend build step, so your changes are included in the final assets. Node 20.x is required for frontend builds in Superset 6.0.0+—using Node 16 will fail reference.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[ypandey-fluidata]

COPY frontend_overrides/native_filters/index.tsx
src/dashboard/components/nativeFilters/FilterBar/index.tsx

COPY frontend_overrides/native_filters/BigNumberViz.tsx
plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

Build frontend (hashes + manifest generated)

RUN npm ci
RUN npm run build

FROM apache/superset:6.0.0

USER root

RUN pip install --no-cache-dir psycopg2-binary

COPY --from=frontend-builder
/superset/superset/static/assets
/app/superset/static/assets

USER superset

#Error
ERROR in ./plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx 21:0-42
Module not found: Error: Can't resolve '@apache-superset/core' in '/superset/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber'

ERROR in ./plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx 23:0-60
Module not found: Error: Can't resolve '@apache-superset/core/ui' in '/superset/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber'

ERROR in ./plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx:21:19
TS2307: Cannot find module '@apache-superset/core' or its corresponding type declarations.
19 | */
20 | import { useState, useEffect, useRef, MouseEvent } from 'react';

21 | import { t } from '@apache-superset/core';
| ^^^^^^^^^^^^^^^^^^^^^^^
22 | import {
23 | getNumberFormatter,
24 | getTimeFormatter,

ERROR in ./plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx:30:34
TS2307: Cannot find module '@apache-superset/core/ui' or its corresponding type declarations.
28 | BinaryQueryObjectFilterClause,
29 | } from '@superset-ui/core';

30 | import { styled, useTheme } from '@apache-superset/core/ui';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
31 | import Echart from '../components/Echart';
32 | import { BigNumberVizProps } from './types';
33 | import { EventHandlers } from '../types';

ERROR in ./plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx:383:11
TS2322: Type '{ refs: Refs; width: number; height: number; echartOptions: ECBasicOption; eventHandlers: EventHandlers; vizType: any; }' is not assignable to type 'IntrinsicAttributes & EchartsProps & RefAttributes'.
Property 'vizType' does not exist on type 'IntrinsicAttributes & EchartsProps & RefAttributes'.
381 | echartOptions={echartOptions}
382 | eventHandlers={eventHandlers}

383 | vizType={formData?.vizType}
| ^^^^^^^
384 | />
385 | )
386 | );

ERROR in ./plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx:498:8
TS7031: Binding element 'theme' implicitly has an 'any' type.
496 |
497 | const StyledBigNumberVis = styled(BigNumberVis)`

498 | ${({ theme }) => `
| ^^^^^
499 | font-family: ${theme.fontFamily};
500 | position: relative;
501 | display: flex;
[+] Building 0/1
⠦ Service superset_test Building 655.6s
The command '/bin/sh -c npm run build' returned a non-zero code: 1

I tried similar way to implement the change of the file but i got this error. I think this is the old code and it is not able to find the module.

BigNumberViz.tsx

[sfirke]

Hello, this does not seem like a bug in Apache Superset. Instead it is a question about how you would fork, modify, and deploy to get different behavior. Accordingly I'm going to convert this to a discussion to keep the bug tracker clean while still allowing people to find and discuss this issue.