Weave Code
Plotly Chart Editor Laravel Package
uneca/plotly-chart-editor
Reactive Plotly.js chart builder for Laravel via Livewire. Sidebar-driven editor to configure traces and layout, multi-language UI (EN/FR/PT/ES), multiple sync modes and persistence options. Requires Plotly.js 3.x (peer dep), Alpine, PHP 8.4+.
A reactive chart builder for Laravel. This Livewire component gives your users a sidebar-driven editor to configure Plotly.js charts. It supports English, French, Portuguese, and Spanish.
Frequently asked questions about Plotly Chart Editor
- How do I install uneca/plotly-chart-editor in a Laravel 13 project?
- Run `composer require uneca/plotly-chart-editor`, then add `@plotlyChartEditorStyles` and `@plotlyChartEditorScripts` to your Blade layout’s `<head>` after loading Plotly.js. Ensure Livewire 4.x is installed and `@livewireScripts` is placed before `</body>`.
- Can I use this package with Laravel 12 and Livewire 3?
- Yes, the package explicitly supports Laravel 12/13 and Livewire 3.x/4.x. Verify your Livewire version matches the package’s requirements (check `composer.json` for `^3.0` or `^4.0`).
- What happens if I don’t load Plotly.js before the package directives?
- The package will fail to render charts because it relies on `window.Plotly` being globally available. Load Plotly.js via CDN or npm *before* `@plotlyChartEditorStyles` to avoid runtime errors.
- How do I customize trace types for my specific chart needs?
- Extend the editor by defining new trace types in `config/plotly-chart-editor.php` under the `traceTypes` array. Each entry maps to a Plotly trace type (e.g., `scatter`, `bar`) with customizable fields. No core code changes are needed.
- What sync modes are available, and when should I use each?
- The package offers three sync modes: `manual` (user-triggered updates), `auto` (real-time sync), and `hybrid` (combination). Use `auto` for live data visualization, `manual` for controlled updates, and `hybrid` if you need conditional sync logic.
- How do I persist chart configurations to a database?
- Use the `ValidChartConfig` validation rule to sanitize traces/layout before saving. Store the compiled JSON (via `getCompiledTraces()`) in a database field. The package supports multiple persistence strategies, including Livewire events, Laravel listeners, or direct Alpine store reads.
- Will this package work with Alpine.js stores already in my app?
- Potential conflicts may arise if your app uses `Alpine.store()` with the same namespace. The package uses `Alpine.store('chartBuilder')`—prefix or rename existing stores to avoid collisions. Test thoroughly in a staging environment.
- Can I use this package without Livewire, or is it strictly tied to Livewire components?
- The package is Livewire-first but includes Alpine/JS fallbacks for non-Livewire contexts. For pure Laravel apps, use the `plain JS + HTTP` persistence mode (Option C) or integrate with Alpine stores directly (Option F).
- How do I load an existing chart configuration into the editor?
- Pass the saved chart data (traces/layout) to the Livewire component via the `initialTraces` and `initialLayout` props. The editor will pre-populate the UI. Example: `<livewire:plotly-editor initialTraces='{!! json_encode($chart->traces) !!}' />`.
- Are there performance concerns with large datasets in the chart editor?
- The package streams data via `dataSources` and supports lazy-loading for traces. For large datasets, validate server-side with `ValidChartConfig` and consider pagination or chunking in your `dataSources` array. Test with your expected dataset size in a staging environment.
Weaver
How can I help you explore Laravel packages today?