or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-components.mdchart-plugins.mddata-transformation.mdform-data.mdindex.mdquery-building.md
tile.json

index.mddocs/

Superset UI ECharts Plugin

Superset UI ECharts Plugin is a comprehensive visualization library for Apache Superset that provides 15+ chart types built on Apache ECharts. It includes timeseries charts (line, area, bar, scatter, step), statistical charts (pie, radar, box plot), specialized charts (funnel, gauge, treemap), and advanced visualizations with forecasting, annotations, and interactive controls.

Package Information

  • Package Name: @superset-ui/plugin-chart-echarts
  • Package Type: npm
  • Language: TypeScript/React
  • Installation: npm install @superset-ui/plugin-chart-echarts

Core Imports

import {
  // Timeseries Charts
  EchartsTimeseriesChartPlugin,
  EchartsAreaChartPlugin,
  EchartsTimeseriesLineChartPlugin,
  EchartsTimeseriesBarChartPlugin,
  EchartsTimeseriesScatterChartPlugin,
  EchartsTimeseriesSmoothLineChartPlugin,
  EchartsTimeseriesStepChartPlugin,
  EchartsMixedTimeseriesChartPlugin,
  
  // Statistical Charts
  EchartsPieChartPlugin,
  EchartsBoxPlotChartPlugin,
  EchartsRadarChartPlugin,
  EchartsHistogramChartPlugin,
  
  // Specialized Charts
  EchartsGaugeChartPlugin,
  EchartsFunnelChartPlugin,
  EchartsTreeChartPlugin,
  EchartsTreemapChartPlugin,
  EchartsHeatmapChartPlugin,
  EchartsSunburstChartPlugin,
  EchartsBubbleChartPlugin,
  EchartsSankeyChartPlugin,
  EchartsWaterfallChartPlugin,
  EchartsGraphChartPlugin,
  EchartsGanttChartPlugin,
  
  // Big Number Charts
  BigNumberChartPlugin,
  BigNumberTotalChartPlugin,
  BigNumberPeriodOverPeriodChartPlugin,
  
  // Constants and Types
  TimeseriesDefaultFormData
} from "@superset-ui/plugin-chart-echarts";

Basic Usage

import { EchartsTimeseriesLineChartPlugin } from "@superset-ui/plugin-chart-echarts";

// Register the plugin
const lineChartPlugin = new EchartsTimeseriesLineChartPlugin();

// Use in Superset chart registry
chartPluginRegistry.registerValue("echarts_timeseries_line", lineChartPlugin);

Architecture

The ECharts plugin suite is built around several key components:

  • Chart Plugin Classes: 25+ individual plugin implementations for different chart types (timeseries, pie, radar, box plot, funnel, etc.)
  • Transform System: Data transformation pipeline converting Superset queries into ECharts configurations
  • Form Data Interface: Comprehensive configuration interface supporting advanced chart customization
  • Component System: React components for rendering interactive visualizations
  • Query Builder: Sophisticated query building with support for time comparison, forecasting, and aggregation
  • Utility System: Shared utilities for series formatting, color management, and data processing

Capabilities

Chart Plugin Classes

Core chart plugin implementations providing different visualization types for time series data. Each plugin extends the base ECharts plugin architecture with specific chart configurations.

class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
>;

class EchartsAreaChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
>;

class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
>;

class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
>;

class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
>;

class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
>;

class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
>;

Chart Plugins

Data Transformation

Transform system that converts Superset query results and form data into ECharts-compatible configurations with support for complex data processing.

function transformProps(
  chartProps: EchartsTimeseriesChartProps
): TimeseriesChartTransformedProps;

interface TimeseriesChartTransformedProps extends 
  BaseTransformedProps<EchartsTimeseriesFormData>,
  ContextMenuTransformedProps,
  CrossFilterTransformedProps {
  legendData?: OptionName[];
  xValueFormatter: TimeFormatter | StringConstructor;
  xAxis: {
    label: string;
    type: AxisType;
  };
  onFocusedSeries: (series: string | null) => void;
}

Data Transformation

Form Data Configuration

Comprehensive form data interface providing extensive customization options for chart appearance, behavior, and data processing.

interface EchartsTimeseriesFormData extends QueryFormData, LegendFormData, TitleFormData {
  annotationLayers: AnnotationLayer[];
  area: boolean;
  colorScheme?: string;
  timeShiftColor?: boolean;
  contributionMode?: ContributionType;
  forecastEnabled: boolean;
  forecastPeriods: number;
  forecastInterval: number;
  logAxis: boolean;
  markerEnabled: boolean;
  markerSize: number;
  opacity: number;
  seriesType: EchartsTimeseriesSeriesType;
  stack: StackType;
  tooltipTimeFormat?: string;
  showTooltipTotal?: boolean;
  showTooltipPercentage?: boolean;
  truncateXAxis: boolean;
  truncateYAxis: boolean;
  yAxisFormat?: string;
  xAxisTimeFormat?: string;
  xAxisBounds: [number | undefined | null, number | undefined | null];
  yAxisBounds: [number | undefined | null, number | undefined | null];
  zoomable: boolean;
  richTooltip: boolean;
  xAxisLabelRotation: number;
  orientation?: OrientationType;
}

Form Data Configuration

Query Building

Advanced query building system with support for time series operations, forecasting, and complex data transformations.

function buildQuery(formData: QueryFormData): QueryContext[];

Query Building

Chart Components

React components for rendering interactive timeseries charts with full integration into the Superset ecosystem.

function EchartsTimeseries(props: TimeseriesChartTransformedProps): JSX.Element;

interface EchartsTimeseriesChartProps extends BaseChartProps<EchartsTimeseriesFormData> {
  formData: EchartsTimeseriesFormData;
}

Chart Components

Types

Core Enums

enum OrientationType {
  Vertical = 'vertical',
  Horizontal = 'horizontal',
}

enum EchartsTimeseriesSeriesType {
  Line = 'line',
  Scatter = 'scatter',
  Smooth = 'smooth',
  Bar = 'bar',
  Start = 'start',
  Middle = 'middle',
  End = 'end',
}

enum LegendOrientation {
  Top = 'top',
  Bottom = 'bottom',
  Left = 'left',
  Right = 'right',
}

enum LegendType {
  Scroll = 'scroll',
  Plain = 'plain',
}

Form Data Types

interface LegendFormData {
  legendMargin: number | null | string;
  legendOrientation: LegendOrientation;
  legendType: LegendType;
  showLegend: boolean;
  legendSort: 'asc' | 'desc' | null;
}

interface TitleFormData {
  xAxisTitle: string;
  xAxisTitleMargin: number;
  yAxisTitle: string;
  yAxisTitleMargin: number;
  yAxisTitlePosition: string;
}

type StackType = boolean | null | Partial<StackControlsValue>;

Base Types

interface BaseChartProps<T extends PlainObject> extends ChartProps<T> {
  queriesData: ChartDataResponseResult[];
}

interface BaseTransformedProps<F> {
  echartOptions: EChartsCoreOption;
  formData: F;
  height: number;
  width: number;
  refs: Refs;
  onContextMenu?: (clientX: number, clientY: number, filters?: ContextMenuFilters) => void;
  setDataMask?: SetDataMaskHook;
  onLegendStateChanged?: (state: LegendState) => void;
  filterState?: FilterState;
  emitCrossFilters?: boolean;
  coltypeMapping?: Record<string, number>;
  onLegendScroll?: (currentIndex: number) => void;
}