• 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:

• Light mode PNG
• Dark mode WEBP

- 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:

• Light mode SVG
• Dark mode PDF
• More area SVG
• Legend in place SVG

- 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:

• Light mode PDF