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 and set up Plotly Chart Editor in Laravel 13?
- Run `composer require uneca/plotly-chart-editor`, include Plotly.js via CDN or npm, then add `@plotlyChartEditorStyles` and `@plotlyChartEditorScripts` to your Blade layout. Ensure Livewire 4.x is installed and `window.Plotly` is globally available before loading the package scripts.
- Does this package work with Laravel 12 or older versions?
- This package officially supports Laravel 12 and 13 only. Older versions may require backporting or adjustments, especially since it relies on Livewire 3/4 and PHP 8.4 features. Test thoroughly if downgrading.
- Can I customize the UI theme or add new trace types?
- Yes, the package supports theming via CSS variables (prefix `--plotly-editor-*`) and allows adding new trace type profiles by extending the schema in `config/plotly-chart-editor.php`. Documentation covers both in the README.
- What sync modes are available for saving chart configurations?
- The package offers multiple sync modes: Livewire events, Alpine store persistence, direct HTTP requests, or native Laravel events. Choose based on your app’s architecture—examples for each are provided in the docs.
- How do I handle large datasets or performance issues with Plotly.js?
- For large datasets, pre-filter data server-side or use Plotly’s built-in data reduction features. The Alpine store centralizes state, but avoid excessive real-time updates. Test with your expected dataset size and consider lazy-loading traces.
- Is there a way to validate chart configurations before saving?
- Yes, the package includes a `validChartConfig` validation rule. You can extend this in your Form Requests or use the built-in `validateChartConfig()` method in the Livewire component to enforce custom rules.
- How do I load an existing chart configuration into the editor?
- Use the `loadChartConfig()` method on the Livewire component and pass the configuration array. The package supports loading from databases, JSON, or even Alpine stores. See the ‘Loading an existing chart’ section in the docs.
- Will this package conflict with other frontend libraries like Chart.js or Highcharts?
- No direct conflicts exist, but ensure Plotly.js version consistency (peer dependency). If using npm, bundle Plotly.js separately to avoid version mismatches with other libraries.
- Can I use this package without Livewire or Alpine.js?
- No, this package is built for Livewire 3/4 and relies on Alpine.js for reactive state management. If your app doesn’t use Alpine, you’ll need to refactor or find an alternative like a vanilla JS solution.
- What are the alternatives to Plotly Chart Editor for Laravel?
- Alternatives include building a custom Livewire component with Plotly.js, using Laravel packages like `beberlei/chartjs` (for Chart.js), or frontend frameworks like Vue/React with Plotly integrations. This package stands out for its Laravel-native, schema-driven approach.
Weaver
How can I help you explore Laravel packages today?