Superset Genral Doubt version 6

[user1500177]

I'm exploring the ECharts visualizations in Apache Superset v6 and noticed that Apache ECharts itself provides many line chart variants and other chart types, while in Superset version 6 when exposes only a smaller subset (for example, only a couple of line chart options etc comapared to whats in the apache E charts).

I have a few questions:
Is there a way to enable additional Apache ECharts chart types or line chart variants in Superset v6.0.0 through feature flags, [superset_config.py] or any other configuration?

Or is this the there only that many supported line charts in apache superset version 6?

I'm trying to understand whether the disparity between the Apache ECharts examples and the charts available in Superset is a configuration choice or an architectural limitation.

[dosubot[bot]]

The disparity you're seeing is an architectural decision, not a configuration choice. There are no feature flags or superset_config.py settings to enable additional ECharts chart types.

Here's why: Superset doesn't directly expose the ECharts library to users. Instead, each chart type is implemented as a dedicated plugin class (extending EchartsChartPlugin) that requires custom Superset-specific code [1]:

• A query builder (buildQuery) to fetch data from your datasource
• A control panel defining the UI options in the chart editor
• A transform function (transformProps) to convert Superset query results into ECharts options
• Metadata (category, description, thumbnails)

All available ECharts plugins are registered in MainPreset at application startup [2] — currently about 23 chart types including Line, Area, Bar, Step Line, Smooth Line, Scatter, Pie, Funnel, Radar, Gauge, Heatmap, Treemap, Sunburst, Sankey, Waterfall, Gantt, and others [3].

There is a CHART_PLUGINS_EXPERIMENTAL feature flag [4], but it only controls experimental plugins as a group — it doesn't unlock hidden chart types.

To add a new ECharts chart variant, you would need to write code:

1. Create a new plugin class extending EchartsChartPlugin
2. Implement buildQuery, controlPanel, transformProps, and metadata
3. Export it from the plugin package
4. Register it in MainPreset

So to directly answer your question: what you see is all that's currently supported out of the box in Superset. Expanding it requires development work rather than configuration.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[user1500177]

@dosu

Can u show me an example so that i am able to take and add the some of the type of apache e charts ? , i need to just add a single chart as a start a custom one that i like from apache echarts actually ? could you show me an example of the chages that i will have to make.

[dosubot[bot]]

Here's a step-by-step example of adding a custom ECharts chart to Superset, modeled on how existing plugins like Gauge are built.

1. Create a directory under superset-frontend/plugins/plugin-chart-echarts/src/YourChartType/ with this structure [1]:

YourChartType/
├── images/
│   ├── thumbnail.png
│   └── example1.jpg
├── index.ts            # Plugin class
├── EchartsYourChart.tsx # React component
├── controlPanel.tsx    # UI controls
├── transformProps.ts   # Data → ECharts options
├── buildQuery.ts       # Query construction
├── types.ts            # TypeScript interfaces
└── constants.ts        # Default config

2. Plugin class (index.ts) — registers your chart with Superset [2]:

import { t, Behavior } from '@superset-ui/core';
import controlPanel from './controlPanel';
import transformProps from './transformProps';
import buildQuery from './buildQuery';
import thumbnail from './images/thumbnail.png';
import { EchartsChartPlugin } from '../types';
import { EchartsYourChartFormData, EchartsYourChartProps } from './types';

export default class EchartsYourChartPlugin extends EchartsChartPlugin<
  EchartsYourChartFormData,
  EchartsYourChartProps
> {
  constructor() {
    super({
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsYourChart'),
      metadata: {
        behaviors: [Behavior.InteractiveChart, Behavior.DrillToDetail],
        category: t('ECharts'),
        credits: ['https://echarts.apache.org'],
        description: t('My custom ECharts chart'),
        name: t('Your Chart Name'),
        tags: [t('ECharts'), t('Custom')],
        thumbnail,
      },
      transformProps,
    });
  }
}

3. Build query (buildQuery.ts) — usually simple [3]:

import { buildQueryContext, QueryFormData } from '@superset-ui/core';

export default function buildQuery(formData: QueryFormData) {
  return buildQueryContext(formData, baseQueryObject => [
    { ...baseQueryObject },
  ]);
}

4. Transform props (transformProps.ts) — this is where you map Superset data into ECharts options [4]:

import { EChartsCoreOption } from 'echarts';
import { DataRecord } from '@superset-ui/core';

export default function transformProps(chartProps) {
  const { width, height, formData, queriesData } = chartProps;
  const data = (queriesData[0]?.data || []) as DataRecord[];

  // Transform your data into ECharts format
  const echartOptions: EChartsCoreOption = {
    series: [
      {
        type: 'yourEchartsType', // e.g. 'candlestick', 'parallel', etc.
        data: data.map(row => ({
          // Map Superset data to ECharts data format
        })),
      },
    ],
    // Add any other ECharts options (tooltip, legend, xAxis, yAxis, etc.)
  };

  return { formData, width, height, echartOptions, refs: {} };
}

5. React component (EchartsYourChart.tsx) — just a thin wrapper [5]:

import Echart from '../components/Echart';

export default function EchartsYourChart(props) {
  const { height, width, echartOptions, refs } = props;
  return (
    <Echart refs={refs} height={height} width={width} echartOptions={echartOptions} />
  );
}

6. Export from the package — add to superset-frontend/plugins/plugin-chart-echarts/src/index.ts [6]:

export { default as EchartsYourChartPlugin } from './YourChartType';

7. Register in MainPreset — add to superset-frontend/src/visualizations/presets/MainPreset.js [7]:

import { EchartsYourChartPlugin } from '@superset-ui/plugin-chart-echarts';

// Inside the plugins array:
new EchartsYourChartPlugin().configure({ key: 'echarts_your_chart' }),

That's it! After these changes, rebuild the frontend (npm run build or restart the dev server) and your new chart type will appear in the chart picker.

The key insight is that transformProps is where the real work happens — you take Superset's query results and construct the ECharts option object exactly as you would from the ECharts documentation. The rest is boilerplate registration and wiring.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.