Weave Code
Plotly Chart Editor Laravel Package
uneca/plotly-chart-editor
A Livewire chart builder for Laravel that gives users a sidebar editor to configure Plotly.js charts, with data viewer, sync modes, events, persistence helpers, validation, theming, and English, French, Portuguese, and Spanish support.
Plotly Chart Editor is a reactive Livewire component that gives your Laravel users a sidebar-driven builder for Plotly.js charts. Configure traces, layout, and data through an intuitive editor, with built-in support for English, French, Portuguese, and Spanish.
- Sidebar-driven editing for traces, axes, and layout options
- Multiple sync modes and a live data viewer for inspecting inputs
- Flexible persistence: Livewire props, native events, JS
CustomEvent, HTTP, or Alpine store - Load existing charts and validate configs with the
ValidChartConfigrule - Themeable, publishable assets and extensible trace-type profiles
Frequently asked questions about Plotly Chart Editor
- What are the requirements for uneca/plotly-chart-editor?
- The package requires PHP 8.4 or newer, Laravel 12 or 13, Livewire 3 or 4, Alpine 3, and Plotly.js 3.x exposed as window.Plotly. Plotly.js is a peer dependency and is not shipped by the package, so you must load it via CDN or npm before the editor directives. This is a bleeding-edge envelope, so confirm your runtime before evaluating further.
- How do I install and render the Livewire Plotly chart editor?
- Run composer require uneca/plotly-chart-editor, then load Plotly.js, for example the Plotly 3.5.0 CDN bundle, before adding @plotlyChartEditorStyles and @plotlyChartEditorScripts to your layout head. Place @livewireScripts before the closing body tag and embed the widget with the livewire:plotly-editor tag. No facade, model, or repository is registered.
- Does uneca/plotly-chart-editor support Laravel 11 or PHP 8.3?
- No. The package pins PHP 8.4+ and Laravel 12 or 13, with Livewire 3 or 4 and Plotly.js 3.x. Any estate on PHP 8.2 or 8.3 or on Laravel 10 or 11 must upgrade the platform before adopting the editor. That upgrade cost is the single largest blocker and should be confirmed before deeper analysis.
- How do I persist charts created with the Livewire Plotly editor?
- The README documents six patterns: a host Livewire component wrapper, a sibling Livewire listener, plain JavaScript plus an HTTP request, a native Laravel event listener, a JavaScript CustomEvent, and direct reads from the Alpine chartBuilder store. The package intentionally ships no persistence layer, so you own the schema, authorization, versioning, and read-only rendering path. Whichever pattern you pick, store the emitted config rather than resolved arrays.
- Why do my saved charts break when I rename a dataset column?
- The editor emits traces in reference form, carrying meta.columnNames such as {'x': 'Country', 'y': 'Population'} instead of resolved values, while actual data stays server-side in the immutable dataSources prop. This keeps sync payloads small for any dataset size, but hard-couples each saved chart to the dataset shape it was authored against. Rename a column or change its semantics and stored charts silently mis-render or fail, so add a schema_version column and a load-time validator.
- How do I validate a Plotly chart config before saving it?
- The package ships a ValidChartConfig rule you can use in a FormRequest, a Livewire validation call, or a controller before writing to storage. Pair it with a schema version check on load, since the package provides no validation on load and no migration helper for stored charts. Treat all numeric behaviour, such as debounce timing, as verify-in-spike.
- How do I render an existing saved chart in read-only mode?
- Use the getCompiledTraces() utility to resolve reference-form traces against your current dataSources, then pass the compiled traces to Plotly in a plain view. The editor itself is a Livewire plus Alpine widget, not a rendering layer, so the read-only path is yours to build. Keep the dataSources prop immutable so saved configs stay aligned with the dataset they were authored against.
- How do I add a custom Plotly trace type profile?
- The README has an Adding a new trace type profile section, and the shipped profiles cover bar, line, scatter, pie, and histogram via config/plotly-chart-editor.php. If you need more than those, publish the config and extend it, but expect to maintain a fork of that file from day one. Confirm the shipped profiles are sufficient before committing.
- Does the package work with Livewire 3 and Livewire 4 without double-loading Alpine?
- It supports both Livewire 3 and Livewire 4, but the Alpine story differs: Livewire 4 bundles Alpine, so do not load Alpine separately, while Livewire 3 needs Alpine 3 loaded yourself. Getting this wrong is a common source of double-Alpine breakage, so pin your target before writing the layout directives. The package registers one Alpine store, chartBuilder.
- What are the alternatives if uneca/plotly-chart-editor is abandoned?
- The package is MIT-licensed with single-organisation provenance from UNECA, zero stars, zero dependents, and no commercial support, so plan for vendor risk now. Realistic fallbacks are to fork and own the widget, or replace it with a hand-rolled Plotly wrapper around the same config shape. Also confirm your security review accepts server-supplied Plotly layout and config JSON rendered client-side, and settle the CSP story for the CDN-loaded Plotly bundle.
Weaver
How can I help you explore Laravel packages today?