How to add a new chart type in superset version 4.1.1?

[MidnightOakMapleNote]

Hello everyone, does anyone know how to add a new chart type in Superset version 4.1.1? I would be very grateful for any responses.

I want to customize a business - type chart, such as the ranking list type. How should I go about it?

[dosubot[bot]]

To add a new chart type (visualization plugin) in Superset 4.1.1, the recommended workflow is:

1. Scaffold your plugin: Use the Yeoman generator (@superset-ui/generator-superset) to create a new visualization plugin as a standalone TypeScript/JavaScript package. This sets up all necessary files for your chart, including code, control panel, query logic, and tests. See the how-to guide and generator README.

2. Build and install: Build your plugin (npm run build), then install it into Superset’s superset-frontend directory (npm i -S /path/to/your/plugin).

3. Register the plugin: Import your chart plugin in superset-frontend/src/visualizations/presets/MainPreset.js and add it to the plugins array, e.g.:

   import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';
   ...
   new SupersetPluginChartHelloWorld().configure({ key: 'ext-hello-world' }),

   See example in MainPreset.js.

4. Feature flags: If your chart is experimental, you can conditionally include it based on the CHART_PLUGINS_EXPERIMENTAL feature flag. Enable this by adding FEATURE_FLAGS = {"CHART_PLUGINS_EXPERIMENTAL": True} to your config or setting the environment variable SUPERSET_FEATURE_CHART_PLUGINS_EXPERIMENTAL=True (details).

5. Backend changes: For most modern plugins, backend (Python) changes are not needed. If you require custom server-side data processing, subclass BaseViz in superset/viz.py and assign a unique viz_type (reference). Otherwise, focus on frontend development.

For more resources and community guides, check out the Superset Community Resource Library.

Let me know if you need more details on any step!

To reply, just mention @dosu.

---

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

[dosubot[bot]]

Legacy NVD3 charts in Superset do not support cross-linking (cross-filtering) and do not expose a public method like setDataMask for implementing cross-linked filtering. The transformProps for these charts only provides limited hooks such as onAddFilter and onBrushEnd for time range selection, but not for general cross-filtering between charts. The main visualization code (NVD3Vis.js) does not reference setDataMask or any mechanism for emitting cross-filter events, and the plugins are marked as deprecated and use the legacy API, which lacks support for interactive dashboard behaviors like cross-linking. If you need cross-filtering, consider migrating to modern chart types such as ECharts or plugin-based charts, which are designed with these features in mind see code details plugin metadata.

To reply, just mention @dosu.

---

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

[MidnightOakMapleNote]

Hello, I would like to ask: In Superset version 4.1.1, when I use setDataMask for a waterfall chart, why does the chart structure change entirely? Before using setDataMask, the chart contained all the original data; however, after using setDataMask, the chart structure only displays the filtered data and its corresponding total.

Furthermore, when I call setDataMask with the following parameters in an attempt to clear the filter—{ extraFormData: { filters: [ { col: formData.xAxis, op: 'IN' as const, val: [value], }, ], }, filterState: { label: undefined, value: null, selectedValues: null }, isCurrentValueSelected: false, }—the data fails to revert to its initial state. The only way to restore it is by manually refreshing the page. I want to know why this occurs. @dosu

[dosubot[bot]]

This is expected behavior in Superset 4.1.1. The waterfall chart is stateless and always renders the data returned by the backend, which is determined by the current filter state. When you use setDataMask to filter, the chart only receives and displays the filtered data and its corresponding total. Clearing the filter via setDataMask does not automatically trigger a new query for the original, unfiltered data—so the chart remains in a filtered state until you manually refresh the page or the dashboard triggers a full data reload. The plugin itself does not manage filter reset logic; it relies on the dashboard/container to handle filter clearing and data reloading (source).

Cross-filtering and improved filter handling for waterfall charts are under development in open PRs, but these changes are not present in 4.1.1 (source). For now, to restore the original chart state after clearing filters, make sure the dashboard or parent container triggers a full data reload (for example, by using the clearDataMask action or refreshing the dashboard) (source).

To reply, just mention @dosu.

---

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

[MidnightOakMapleNote]

Hello, does the waterfall chart support cross-filtering? @dosu

[dosubot[bot]]

The waterfall chart in Superset 4.1.1 does not support cross-filtering. There is a clear TODO in the codebase indicating that cross-filtering is planned but not yet implemented for this chart type. The current implementation does not include any cross-filtering logic or event handlers for setDataMask, so interactive filtering between charts is not possible with the waterfall chart in this version. For reference, see the relevant code comment and implementation details here.

To reply, just mention @dosu.

---

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