feat(plugin-chart-echarts): add Gantt Chart plugin

[Quatters]

SUMMARY

This PR introduces a new "Gantt Chart" plugin built using Apache ECharts. This chart addresses the current lack of timeline-based visualizations, enabling users to effectively analyze event sequences and durations across a horizontal time axis.

Key features include:

• Representation of event durations as horizontal bars on a continuous time axis.
• Support for category-based vertical grouping with nested subcategories, facilitating detailed analysis within larger contexts.
• Functionality for fixed left/right time boundaries to compare intervals.
• Native ECharts zoom and scroll support for interactive data exploration.

The expected input data format includes start_time and end_time, a main category for the Y-axis, and an optional dimension for subcategories. Additional fields are supported for tooltips, enhancing data context upon interaction.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

gantt-demo.mp4

TESTING INSTRUCTIONS

Import demo: Chart Export Jun 07 2025.zip
It uses dataset of examples database. data.csv

ADDITIONAL INFORMATION

• Has associated issue: Closes [SIP-167] Timeline Chart Visualization #33349
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
    - [ ] Migration is atomic, supports rollback & is backwards-compatible
    - [ ] Confirm DB migration upgrade and downgrade tested
    - [ ] Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Inconsistent Enum Naming Convention ▹ view	✅ Fix detected
	Unnecessary Memoization ▹ view	✅ Fix detected
	Unhandled Dynamic Import ▹ view	✅ Fix detected
	Use template literals for multi-line strings ▹ view	🧠 Not in standard
	Potentially Missing Zoom Control Definition ▹ view	🧠 Incorrect
	TimePicker width not configurable ▹ view	🧠 Not in scope
	Inline CSS Should Be In Styled Components Or Theme ▹ view	✅ Fix detected
	Unexplained Magic Number ▹ view	✅ Fix detected
	Missing interface prop descriptions ▹ view	🧠 Not in scope
	Missing error handling for date parsing ▹ view	🧠 Incorrect

Files scanned

​

File Path	Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/Timeline/constants.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeline/buildQuery.ts	✅
superset-frontend/packages/superset-ui-core/src/chart/types/VizType.ts	✅
superset-frontend/src/components/TimePicker/index.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeline/index.ts	✅
superset-frontend/src/explore/components/controls/TimeRangeControl/index.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeline/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeline/EchartsTimeline.tsx	✅
superset-frontend/src/explore/components/controls/index.js	✅
superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/index.ts	✅
superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeline/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx	✅
superset-frontend/src/visualizations/presets/MainPreset.js	✅
superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx	✅
superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx	✅
superset-frontend/src/components/Chart/ChartRenderer.jsx	✅
superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeline/transformProps.ts	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[michael-s-molina]

Thanks for the PR @Quatters. Could you add a video, demonstrating the new plugin?

[Quatters]

Thanks for the PR @Quatters. Could you add a video, demonstrating the new plugin?

Sure! I've replaced gif with demo video.

[sfirke]

Thank your for the video (and the contribution!), I think this looks great. My only immediate suggestion is that I feel like "Gantt chart" is a more common name for this than "Timeline chart."

There are more comments in our repo for "Gantt chart" including this feature request with many upvotes - your feature will make them happy 😁 #23503 so I think that's what our users will search for. And Wikipedia calls it a Gantt chart, it has no entry for timeline chart.

What do you think about renaming this chart to be "Gantt chart"? (sorry for the the double email, I moved my thoughts from a comment to a review) We could give it the keyword Timeline so it will show up in chart search if someone looks for it as that name.

[github-actions]

@rusackas Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[rusackas]

So cool, thank you! Spinning up an ephemeral env so we can all play with it.

[github-actions]

@rusackas Ephemeral environment spinning up at http://35.88.138.93:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[mistercrunch]

My only immediate suggestion is that I feel like "Gantt chart" is a more common name for this than "Timeline chart."

I was going to comment that typically Gantt charts include a graph of dependencies and arrows to visualize them, but GPT seems to think it's not a strict requirement -> https://chatgpt.com/share/684b5885-26c0-8010-b92e-74248625313c

[Quatters]

Ok, I don't see any issues with renaming chart to Gantt. A quick search shows that Gantt chart much more often used with this type then Timeline (which is more generic to me). I also thought dependencies visualisation is mandatory for Gantt, but it's not.

Good suggestion!

[mistercrunch]

for consistency with other charts, should you just bring the entire titleControls section here?