Files
superset2/superset-frontend/plugins/plugin-chart-echarts
Claude Code 2bea03b3aa fix(charts): fix Bubble chart crash and correct example's time_range to a year with real data
Two issues surfaced while verifying #42328's live thumbnail-capture work
against this example chart:

1. Bubble/transformProps.ts set `xAxis.interval` directly from the
   xAxisLabelInterval control ('auto'/'0'), but xAxis.interval forces
   echarts' IntervalScale into a fixed-tick-spacing mode that expects a
   number. This crashed the axis "nice" tick calculation for every
   bubble_v2 chart -- not just this example, any bubble chart with the
   control at its default. The interval belongs nested under axisLabel,
   where it only controls how many labels are skipped, matching how
   every other echarts chart in this codebase (e.g. Timeseries) wires it.
   There was no existing test coverage for this file; added one.

2. Once the crash was fixed, the chart rendered with zero visible
   bubbles: the previous commit's `time_range` (2014, matching the
   convention used by sibling examples on this dataset) has zero
   non-null SP_DYN_LE00_IN (life expectancy) values in this particular
   dataset. The original legacy chart's own choice of 2011 was
   deliberate -- that year has real data for all three metrics used.
2026-08-14 14:05:06 -07:00
..

@superset-ui/plugin-chart-echarts

Version Libraries.io

This plugin provides Echarts viz plugins for Superset:

  • Timeseries Chart (combined line, area bar with support for predictive analytics)
  • Pie Chart

Usage

Configure key, which can be any string, and register the plugin. This key will be used to lookup this chart throughout the app.

import {
  EchartsTimeseriesChartPlugin,
  EchartsPieChartPlugin,
} from '@superset-ui/plugin-chart-echarts';

new EchartsTimeseriesChartPlugin().configure({ key: 'echarts-ts' }).register();
new EchartsPieChartPlugin().configure({ key: 'pie' }).register();

Then use it via SuperChart. See storybook for more details.

<SuperChart
  chartType="echarts-ts"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>