Download the PHP package uneca/plotly-chart-editor without Composer

On this page you can find all versions of the php package uneca/plotly-chart-editor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of uneca/plotly-chart-editor

Informations about the package plotly-chart-editor

Plotly Chart Editor

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.

Requirements

Installation

Load Plotly.js before the package directives (choose one):

CDN:

or npm:

Then add these Blade directives to your layout's <head> after Plotly.js:

Place @livewireScripts before </body>.

Quick start

Full control:

Layout

The editor fills its container. For a full-page editor without scrollbars, wrap <livewire:plotly-editor> in a flex container with height: 100vh:

Inline style:

Tailwind:

The @plotlyChartEditorStyles directive includes the inner flex rules — only the wrapper needs explicit sizing.

Props

Prop Type Default Description
dataSources array required Key-value pool of columns. Immutable after mount.
data array [] Pre-populated traces (each with optional meta.columnNames for column-referenced bindings).
layout array [] Initial Plotly layout config.
config array ['responsive' => true] Plotly config flags.
traceTypes array ['bar'] Enabled trace types; first is the default for new traces.
preloadSchema bool true Load all enabled schema profiles on mount.
syncMode string 'manual' manual | auto | hybrid (see Sync modes below).
showExport bool true Show the Export dropdown in the footer.
showDataViewer bool true Show the Data viewer button in the footer.

dataSources shape

All columns should be the same length. Length mismatches produce a non-blocking inline warning.

Sync modes

Mode Behaviour Save button
manual Syncs only when the user clicks Save. Visible
auto Debounced (~500ms) sync after each mutation. Shows "Synced ✓" on success. Hidden
hybrid Auto-sync AND a Save button for forced immediate sync. Visible

Data viewer

The footer includes a Data button (visible when showDataViewer is true, which is the default) that opens a modal table of all dataSources columns. Each column key is a table header, and the rows display the corresponding array values. This is read-only — for editing column values, modify the dataSources prop.

The modal can be closed by clicking the × button, clicking the overlay backdrop, or pressing Escape.

Events

Event Payload When
chart-synced { data: array, layout: array } After every successful sync (Livewire dispatch).
ChartSynced (native) $data + $layout Same moment, as a Laravel event class.
plotly-chart-editor:synced { traces, layout } Same moment, as a browser CustomEvent.
plotly-chart-editor:sync-failed { error } On sync failure, as a browser CustomEvent.

Payload notes: Traces in event payloads carry meta.columnNames (column references) but not the resolved data arrays. The actual data lives in dataSources on the server. To render a chart outside the editor, hydrate the traces by resolving meta.columnNames against your dataset — or use getCompiledTraces() to get Plotly-native traces with type aliases resolved and meta stripped. See "Loading an existing chart" below.

Persisting charts

You have several options to save chart data from the editor to your backend.
Choose the one that fits your app's architecture.

Example migration

Option A — Host Livewire component (wrapping)

Wrap <livewire:plotly-editor> in your own Livewire component. The Livewire chart-synced event bubbles up to parents, so #[On] works directly.

Pros: Clean PHP-only integration, easy to re-render other page parts.
Cons: Requires a Livewire component just to wrap the editor.

Option B — Listen directly from a sibling component

No wrapping needed. PlotlyEditor dispatches chart-synced as a browser event, so any other Livewire component on the page can listen and react.

Frontend (JS):

Backend (PHP): Use the #[On] attribute on a method in the sibling component — no JS needed at all.

Pros: No wrapping — components stay independent. Backend approach needs no JS.
Cons: The sibling component must register a listener (JS or #[On]).

Option C — Plain JS + HTTP request

No Livewire component at all. The editor lives in a regular Blade view; save via fetch.

Pros: Zero Livewire boilerplate in the host.
Cons: You handle CSRF, validation, and routing yourself.

Option D — Native Laravel event listener

The ChartSynced event class is dispatched alongside chart-synced. Register a listener.

Pros: Decoupled from Livewire entirely. Can be queued.
Cons: Requires registering a listener (one-time setup).

Option E — JS CustomEvent

The package dispatches plotly-chart-editor:synced on window. Listen from any JS framework.

Pros: Framework-agnostic. Works with React, Vue, vanilla JS.
Cons: Manual HTTP wiring.

Option F — Alpine store direct read

Read chart state directly from Alpine.store('chartBuilder') at any time.

Pros: Full control, no event wiring.
Cons: You must handle dirty-state tracking yourself.

Loading an existing chart

The editor syncs traces in reference form — each trace carries meta.columnNames (e.g. {'x': 'Country', 'y': 'Population'}) instead of raw data arrays. The actual column data lives in dataSources.

Pass stored traces and layout back to the editor:

The editor's Alpine store resolves meta.columnNames against dataSources at render time via compileTrace(), so the chart renders with the correct data.

For read-only display (outside the editor), resolve the bindings yourself or use getCompiledTraces() (see below).

Utility: getCompiledTraces()

When serving stored traces to Plotly directly (outside the editor), some type aliases need resolving (area → scatter, line → scatter). Call this method on the component:

Validation: ValidChartConfig rule

Validate incoming chart payloads in your controllers:

Publishing assets

None of the following publishes are required for the editor to work. Use them only if you need to override defaults.

Theming

All visual tokens are CSS custom properties declared in :root. Override them in your own stylesheet:

Full token reference

Token Default Purpose
--plotly-editor-bg #ffffff Root and canvas background
--plotly-editor-surface #f8fafc Sidebar and fold-header background
--plotly-editor-border #e2e8f0 All borders and dividers
--plotly-editor-text #0f172a Primary text
--plotly-editor-text-muted #64748b Labels and secondary text
--plotly-editor-accent #2563eb Active states, Save button, focus ring
--plotly-editor-accent-fg #ffffff Text on accent-colored surfaces
--plotly-editor-warning #d97706 Warning badge and inline messages
--plotly-editor-danger #dc2626 Delete button hover
--plotly-editor-success #16a34a "Saved ✓" and "Copied ✓" messages
--plotly-editor-radius 6px Border radius for controls and folds
--plotly-editor-sidebar-w 380px Sidebar width
--plotly-editor-font system-ui, sans-serif Editor font stack

Adding a new trace type profile

  1. Open config/plotly-chart-editor.php.

  2. Add an entry under profiles:

  3. Pass 'bubble' in traceTypes:

Pre-built types are loaded on mount. Exotic types are lazy-loaded on first use via a single Livewire request, then cached in the Alpine store for the remainder of the session.

Development

Browser tests are gated behind --group=browser and require a browser driver.

License

MIT — see LICENSE.md.

All versions of plotly-chart-editor with dependencies

PHP Build Version
Package Version
Requires php Version ^8.3
spatie/laravel-package-tools Version ^1.16
illuminate/contracts Version ^12.0 || ^13.0
livewire/livewire Version ^3.0 || ^4.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package uneca/plotly-chart-editor contains the following files

Loading the files please wait ...