@dschz/solid-plotly

✨ Features

Contents

Installation

npm install solid-js @dschz/solid-plotly
# or
pnpm add solid-js @dschz/solid-plotly
# or
yarn add solid-js @dschz/solid-plotly
# or
bun add solid-js @dschz/solid-plotly

Plotly.js Distribution

For Web Applications (Recommended)

npm install plotly.js-dist-min

Other Available Distributions

# Full bundle (~3MB) - All chart types and features
npm install plotly.js-dist
# Basic bundle (~1MB) - Common chart types (scatter, bar, line, pie, etc.)
npm install plotly.js-basic-dist
# Minimal bundle (~400KB) - Essential charts only
npm install plotly.js-dist-min
# Custom build - Advanced users who want to cherry-pick modules
npm install plotly.js

Quick Start

import { createSignal } from "solid-js";
import Plotly from "plotly.js-dist-min";
import { createPlotComponent } from "@dschz/solid-plotly";
// Create the Plot component bound to your Plotly module
const Plot = createPlotComponent(Plotly);
function App() {
 return (
 <Plot
 data={[
 {
 x: [1, 2, 3],
 y: [2, 6, 3],
 type: "scatter",
 mode: "lines+markers",
 marker: { color: "red" },
 },
 { type: "bar", x: [1, 2, 3], y: [2, 5, 3] },
 ]}
 layout={{ title: "My First Chart" }}
 onClick={(event) => console.log("Clicked:", event.points)}
 />
 );
}

API Reference

Factory Function

createPlotComponent(Plotly: PlotlyModule)

import Plotly from "plotly.js-basic-dist";
import { createPlotComponent } from "@dschz/solid-plotly";
const Plot = createPlotComponent(Plotly);

Component Props

Event Handlers

Mouse & Interaction Events

Selection Events

Layout Events

Legend Events

UI Element Events

Plot Lifecycle Events

Animation Events

Export Events

Framework Events

Examples

Reactive Data Updates

import { createSignal } from "solid-js";
import Plotly from "plotly.js-dist-min";
import { createPlotComponent, type PlotlyData } from "@dschz/solid-plotly";
const Plot = createPlotComponent(Plotly);
function ReactivePlot() {
 const [data, setData] = createSignal<PlotlyData[]>([
 { x: [1, 2, 3], y: [1, 4, 2], type: "scatter" },
 ]);
 const addPoint = () => {
 setData((prev) => [
 {
 ...prev[0],
 x: [...prev[0].x, prev[0].x.length + 1],
 y: [...prev[0].y, Math.random() * 10],
 },
 ]);
 };
 return (
 <div>
 <button onClick={addPoint}>Add Point</button>
 <Plot data={data()} layout={{ title: "Reactive Updates" }} />
 </div>
 );
}

Event Handling

import { createSignal } from "solid-js";
import type { PlotSelectionEvent } from "plotly.js";
import { createPlotComponent, type PlotlyData, type PlotlyLayout } from "@dschz/solid-plotly";
const Plot = createPlotComponent(Plotly);
function InteractivePlot() {
 const [selectedPoints, setSelectedPoints] = createSignal<PlotSelectionEvent["points"]>([]);
 const [data] = createSignal<PlotlyData[]>([
 { x: [1, 2, 3, 4], y: [10, 11, 12, 13], type: "scatter" },
 ]);
 const [layout] = createSignal<PlotlyLayout>({ title: "Click and Select Points" });
 return (
 <Plot
 data={data()}
 layout={layout()}
 onClick={(event) => {
 console.log("Clicked point:", event.points[0]);
 }}
 onSelected={(event) => {
 setSelectedPoints(event.points);
 console.log("Selected points:", event.points.length);
 }}
 onRelayout={(event) => {
 console.log("Layout changed:", event);
 }}
 />
 );
}

Responsive Layout

import { createSignal } from "solid-js";
import { createPlotComponent, type PlotlyData, type PlotlyLayout } from "@dschz/solid-plotly";
const Plot = createPlotComponent(Plotly);
function ResponsivePlot() {
 const [data] = createSignal<PlotlyData[]>([{ x: [1, 2, 3], y: [1, 4, 2], type: "scatter" }]);
 const [layout] = createSignal<PlotlyLayout>({ title: "Responsive Chart" });
 return (
 <div style={{ width: "100%", height: "400px" }}>
 <Plot
 data={data()}
 layout={layout()}
 useResize={true} // Default: true
 style={{ width: "100%", height: "100%" }}
 />
 </div>
 );
}

Animation

import { createSignal, createEffect, onCleanup } from "solid-js";
import { createPlotComponent, type PlotlyData, type PlotlyLayout } from "@dschz/solid-plotly";
const Plot = createPlotComponent(Plotly);
function AnimatedPlot() {
 const [frame, setFrame] = createSignal(0);
 const [isAnimating, setIsAnimating] = createSignal(false);
 const [layout] = createSignal<PlotlyLayout>({ title: "Animated Sine Wave" });
 createEffect(() => {
 if (!isAnimating()) return;
 const interval = setInterval(() => {
 setFrame((prev) => (prev + 1) % 60);
 }, 100);
 onCleanup(() => clearInterval(interval));
 });
 const data = (): PlotlyData[] => [
 {
 x: Array.from({ length: 50 }, (_, i) => i * 0.1),
 y: Array.from({ length: 50 }, (_, i) => Math.sin(i * 0.1 + frame() * 0.1)),
 type: "scatter",
 mode: "lines",
 },
 ];
 return (
 <div>
 <button onClick={() => setIsAnimating(!isAnimating())}>
 {isAnimating() ? "Stop" : "Start"} Animation
 </button>
 <Plot data={data()} layout={layout()} />
 </div>
 );
}

Customizing Plotly.js Bundle

// Full bundle (~3MB) - All chart types
import Plotly from "plotly.js-dist";
const Plot = createPlotComponent(Plotly);
// Basic bundle (~1MB) - Common chart types
import Plotly from "plotly.js-basic-dist";
const Plot = createPlotComponent(Plotly);
// Minimal bundle (~400KB) - Essential charts only
import Plotly from "plotly.js-dist-min";
const Plot = createPlotComponent(Plotly);

TypeScript Usage

import { createSignal } from "solid-js";
import {
 createPlotComponent,
 type PlotlyData,
 type PlotlyLayout,
 type PlotlyConfig,
 type PlotlyFigure,
 type PlotProps,
} from "@dschz/solid-plotly";
// Use utility types for your signals
const [data, setData] = createSignal<PlotlyData[]>([
 { x: [1, 2, 3], y: [1, 4, 2], type: "scatter" },
]);
const [layout, setLayout] = createSignal<PlotlyLayout>({
 title: "My Chart",
 xaxis: { title: "X Axis" },
 yaxis: { title: "Y Axis" },
});
const [config, setConfig] = createSignal<PlotlyConfig>({
 displayModeBar: true,
 responsive: true,
});
// Type-safe callbacks
const handleInitialized = (figure: PlotlyFigure, element: PlotlyHTMLElement) => {
 console.log("Initialized with", figure.data.length, "traces");
 setData(figure.data);
 setLayout(figure.layout);
};
// Create your Plot component
const Plot = createPlotComponent(Plotly);
function MyChart() {
 return (
 <Plot data={data()} layout={layout()} config={config()} onInitialized={handleInitialized} />
 );
}

Available Utility Types

Contributing

License