Advanced Plotly.js in-plot State Hydration
for custom ModeBar Button Modes
- Export Mode to vector SVG, PDF, and alpha channel WEBP, PNG files
- Quick Edit of title, axes, ranges, legend position and legend items
- Modes-aware Light Mode toggle
- Code (scripts and compiled code) under MIT license.
- Plotly brand assets (icons, logos) under CC BY 4.0 license. Copyright by Plotly, Inc.
- Brand assets (icons, logos) under CC BY 4.0 license. Copyright by CONGINEER Ltd.
- Media assets (video, audio, graphics, animations) under CC BY 4.0 license. Copyright by CONGINEER Ltd.
The functionality demonstrated below is partial result of a recent development effort toward the CemGEMS web application release v.0.8.0 cemgems.app aimed at implementing:
- the maximum achievable responsiveness of data input tables and interactive charts/plots
- the stateful "quick" and/or "full" editability of interactive charts/plots
All charts have been rewritten from pure D3.js and/or DC.js to Plotly.js.
After substantial experimentation, a framework-agnostic state hydration architecture was found and implemented for the customized Plotly ModeBar buttons.
- PNG and WEBP Export is always transparent, i.e. has no background
- Light Mode Export transparency is achieved via white background outside of the Plotly graph div
Exported files:
- SVG Export is always transparent, i.e. has no background
- PDF Export in dark mode is set to pick the app background (no background in light mode)
- Export and Light Modes are set to persist on any change of layout or data, e.g. axis, chart type, etc.
Exported files:
- Quick Edit Mode light/dark theme is aware of Light Mode switch
- Quick Edit Mode is set to auto-deactivate on any significant change, e.g. axis, chart type, etc.
Exported file: