Chart plugin classes provide different visualization types for time series data. Each plugin extends the base ECharts plugin architecture with specific chart configurations and behaviors.
The main timeseries chart plugin that supports configurable chart types through form data configuration.
/**
* Generic timeseries chart plugin supporting multiple visualization types
* Supports line, area, bar, scatter, and step chart configurations
*/
class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
constructor();
}Usage:
import { EchartsTimeseriesChartPlugin } from "@superset-ui/plugin-chart-echarts";
const plugin = new EchartsTimeseriesChartPlugin();Specialized plugin for area charts with filled regions below the line.
/**
* Area chart plugin for visualizing data with filled areas
* Automatically sets area: true in form data
*/
class EchartsAreaChartPlugin extends EchartsChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
constructor();
}Standard line chart visualization for showing trends over time.
/**
* Line chart plugin for standard line visualizations
* Sets seriesType to EchartsTimeseriesSeriesType.Line
*/
class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
constructor();
}Vertical bar chart visualization for discrete time periods.
/**
* Bar chart plugin for bar-based time series visualization
* Sets seriesType to EchartsTimeseriesSeriesType.Bar
*/
class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
constructor();
}Scatter plot visualization for showing individual data points.
/**
* Scatter chart plugin for scatter plot visualizations
* Sets seriesType to EchartsTimeseriesSeriesType.Scatter
*/
class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
constructor();
}Smooth line chart with curve interpolation between data points.
/**
* Smooth line chart plugin with curve interpolation
* Sets seriesType to EchartsTimeseriesSeriesType.Smooth
*/
class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
constructor();
}Step-based line visualization showing discrete value changes.
/**
* Step chart plugin for step-based line visualization
* Creates stepped lines between data points
*/
class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
constructor();
}Each plugin includes comprehensive metadata defining its capabilities:
interface ChartMetadata {
behaviors: Behavior[];
category: string;
credits: string[];
description: string;
exampleGallery: { url: string }[];
supportedAnnotationTypes: AnnotationType[];
name: string;
tags: string[];
thumbnail: string;
}All timeseries plugins support:
import { chartPluginRegistry } from "@superset-ui/core";
import { EchartsTimeseriesLineChartPlugin } from "@superset-ui/plugin-chart-echarts";
// Register plugin
const plugin = new EchartsTimeseriesLineChartPlugin();
chartPluginRegistry.registerValue("echarts_timeseries_line", plugin);/**
* Base ECharts chart plugin class
*/
class EchartsChartPlugin<
T extends SqlaFormData = SqlaFormData,
P extends ChartProps = ChartProps,
> extends ChartPlugin<T, P> {
constructor(props: {
buildQuery: (formData: T) => QueryContext[];
controlPanel: ControlPanelConfig;
loadChart: () => Promise<any>;
metadata: ChartMetadata;
transformProps: (chartProps: P) => any;
});
}