Ondřej Chrastina
Menu
CKEditor & Plotly.js Widget Showcase

CKEditor & Plotly.js Widget Showcase

Interactive Plotly.js charts living inside CKEditor 5 content: scatter, bar, line, pie, and histogram widgets with hover, zoom, and responsive resizing - a proof that rich data visualization and rich text editing can share one document.

Back to projects
Released: Thu Jul 03 2025
  • Live URL
  • Source Code

What's inside

A CKEditor 5 widget integration for the Plotly.js chart library. Editors insert interactive charts (scatter with trend lines, bar, line, pie, histogram) directly into their content; readers get hover tooltips, zoom and pan, and charts that resize with the page.

Why it exists

A recurring customer question made concrete: can serious data visualization live inside the editor instead of being pasted in as a static image? This proof of concept says yes, and shows the widget architecture that makes it survive editing, undo, and collaboration.

Resources

  • Repository on GitHub
  • Live demo
  • Twitter
  • GitHub
  • LinkedIn
  • Facebook
  • Instagram
  • YouTube
  • Medium
  • dev.to
  • Discord
    • © Ondřej Chrastina 2020–2026
    • Original Design: HTML5 UP
    • 💾 Source code - use GitHub issues for feedback 🙌
  • I am | Home
  • I write | Journal
  • I Code | Projects
  • I speak | Talks
  • PWA series
  • GitHub
Close