Superset Line Chart Adjustable Plugin

A custom Apache Superset visualization plugin that extends the ECharts Timeseries Line Chart with an adjustable line width control.

Features

• Adjustable Line Width: Real-time slider control (0.5 - 10 pixels)
• Area Chart Mode: Optional fill under the curve
• Markers: Configurable data point markers
• Data Zoom: Interactive zoom controls
• Full ECharts Integration: Leverages all standard timeseries features

Screenshot

Installation

1. Copy Plugin to Superset

Copy the plugin directory to your Superset frontend plugins folder:

cp -r plugin-chart-line-adjustable /path/to/superset-frontend/plugins/

2. Add Dependency

Add to superset-frontend/package.json in the dependencies section:

{
  "dependencies": {
    "@superset-ui/plugin-chart-line-adjustable": "file:./plugins/plugin-chart-line-adjustable"
  }
}

3. Register Plugin

Edit superset-frontend/src/visualizations/presets/MainPreset.js:

Add Import:

import { LineAdjustableChartPlugin } from '@superset-ui/plugin-chart-line-adjustable';

Add to plugins array:

new LineAdjustableChartPlugin().configure({
  key: 'line_adjustable',
}),

4. Install and Build

cd superset-frontend
npm install
npm run build

5. Restart Superset

Restart your Superset instance to load the new plugin.

Usage

1. Go to Charts → + Chart
2. Select a dataset with time-series data
3. Choose "Line Chart (Adjustable)" from the chart type selector (Category: Evolution)
4. Configure your metrics and dimensions
5. Use the Line Width slider in Chart Options to adjust thickness

Configuration Options

Option	Type	Default	Description
Line Width	Slider	2	Line thickness in pixels (0.5 - 10)
Area Chart	Checkbox	false	Fill area under the curve
Area Opacity	Slider	0.2	Opacity of filled area (0 - 1)
Marker	Checkbox	false	Show data point markers
Marker Size	Slider	6	Size of markers (0 - 20)
Data Zoom	Checkbox	false	Enable zoom controls
Show Legend	Checkbox	true	Display chart legend

Technical Details

• Chart Key: line_adjustable
• Category: Evolution
• Base Component: ECharts Timeseries
• Supported Annotations: Event, Formula, Interval, Timeseries

File Structure

plugin-chart-line-adjustable/
├── package.json          # Plugin metadata
├── tsconfig.json         # TypeScript config
├── README.md             # This file
├── src/
│   ├── index.ts          # Main export
│   ├── plugin.ts         # Plugin class & metadata
│   ├── buildQuery.ts     # Query builder
│   ├── controlPanel.tsx  # UI controls
│   ├── transformProps.ts # Props transformation
│   └── images/
│       └── thumbnail.png # Chart preview
└── types/
    └── external.d.ts     # TypeScript declarations

Requirements

• Apache Superset (development version or 4.x+)
• Node.js 18+
• npm 9+

Peer Dependencies

• @superset-ui/core
• @superset-ui/chart-controls
• @superset-ui/plugin-chart-echarts

License

Apache-2.0

Author

WellOxy

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

Changelog

0.1.0

• Initial release
• Adjustable line width feature
• Area chart support
• Marker configuration