const legendPlugin = legend(MyLegend, { placement: "top-left", // "top-left" | "top-right" pxOffset: 8, // Distance from chart edges (default: 8) zIndex: 10, }); ```

Legend Plugin Features:

• Simple positioning: Only top-left or top-right corners to avoid axis conflicts
• Size-constrained: Legend cannot exceed chart drawing area dimensions
• Layout-agnostic: You control internal layout and styling
• Non-interfering: Designed to work harmoniously with chart interactions
• Plugin bus integration: Access cursor and focus data for smart interactions
• Automatic cleanup: Proper memory management and DOM cleanup

Plugin Bus Type Safety

When using multiple plugins, ensure type safety by properly typing the plugin bus:

```tsx import { createPluginBus } from "@dschz/solid-uplot"; import type { CursorPluginMessageBus, FocusSeriesPluginMessageBus, } from "@dschz/solid-uplot/plugins";

// Create a bus that includes all plugin message types const bus = createPluginBus();

const MyChart = () => { return ( ); }; ```

Creating Custom Plugins

The plugin system is open to extension. When authoring plugins for public consumption, follow this pattern:

```tsx import type { UplotPluginFactory } from "@dschz/solid-uplot"; import type { CursorPluginMessageBus } from "@dschz/solid-uplot/plugins";

// 1. Define your plugin's message type export type MyPluginMessage = { value: number; timestamp: number; };

// 2. Define your plugin's message bus export type MyPluginMessageBus = { myPlugin?: MyPluginMessage; };

// 3. Export your plugin factory export const myPlugin = ( options = {}, ): UplotPluginFactory => { return ({ bus }) => { if (!bus) { console.warn("[my-plugin]: A plugin bus is required"); return { hooks: {} }; }

return {
  hooks: {
    ready: (u) => {
      // Initialize plugin state
      bus.setData("myPlugin", {
        value: 0,
        timestamp: Date.now(),
      });
    },
    setData: (u) => {
      // Update plugin state
      bus.setData("myPlugin", "value", (prev) => prev + 1);
    },
  },
};

}; }; ```

External Component Integration

The plugin bus enables powerful integrations between charts and external components:

```tsx import { createPluginBus } from "@dschz/solid-uplot"; import type { FocusSeriesPluginMessageBus } from "@dschz/solid-uplot/plugins";

const bus = createPluginBus();

// External component that can trigger series focus const DataGrid = (props: { bus: typeof bus }) => { const handleRowHover = (seriesLabel: string) => { props.bus.setData("focusSeries", { sourceId: "data-grid", targets: [{ label: seriesLabel }], }); };

return

// Chart and grid interact through shared bus const MyDashboard = () => { return (

🔧 API Reference

SolidUplot Component

```tsx type SolidUplotEvents = { /** Callback fired when the uPlot instance is created / readonly onCreate?: (u: uPlot, meta: OnCreateMeta) => void; /* Callback fired when the cursor moves */ readonly onCursorMove?: (params: OnCursorMoveParams) => void; };

// Main component props (extends all uPlot.Options except plugins, width, height) type SolidUplotProps = SolidUplotOptions & SolidUplotEvents & { // Ref callback to access the chart container element ref?: Ref;

// CSS class name for the chart container (default: "solid-uplot")
// Additional classes will be appended to the default class
class?: string;

// CSS styles for the chart container (position is managed internally)
style?: Omit<JSX.CSSProperties, "position">;

// Enable automatic resizing to fit container (default: false)
autoResize?: boolean;

// Whether to reset scales when chart data is updated (default: true)
resetScales?: boolean;

// Where to place children components relative to the chart (default: "top")
childrenPlacement?: "top" | "bottom";

};

// Configuration options extending uPlot.Options with SolidJS enhancements type SolidUplotOptions = Omit< uPlot.Options, "plugins" | "width" | "height"

& { // Chart dimensions width?: number; // default: 600 height?: number; // default: 300

// Plugin configuration plugins?: SolidUplotPlugin[]; pluginBus?: SolidUplotPluginBus; };

// Plugin type (can be standard uPlot plugin or factory function) type SolidUplotPlugin = uPlot.Plugin | UplotPluginFactory; ```

Plugin Bus

```tsx // Plugin bus type (derived from createPluginBus return type) type SolidUplotPluginBus = ReturnType>;

// Create a plugin bus const createPluginBus: ( initialData?: T, ) => SolidUplotPluginBus; ```

Built-in Plugin Options

```tsx // Cursor Plugin const cursor = (): UplotPluginFactory;

// Focus Series Plugin const focusSeries = (options?: { pxThreshold?: number; // default: 15 }): UplotPluginFactory;

// Tooltip Plugin const tooltip = ( Component: Component, options?: { placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; id?: string; class?: string; style?: JSX.CSSProperties; zIndex?: number; // default: 20 } ): UplotPluginFactory;

// Legend Plugin const legend = ( Component: Component, options?: { placement?: "top-left" | "top-right"; // default: "top-left" pxOffset?: number; // default: 8 id?: string; class?: string; style?: JSX.CSSProperties; zIndex?: number; // default: 10 } ): UplotPluginFactory; ```

📚 Examples

Basic Chart

```tsx import { SolidUplot } from "@dschz/solid-uplot";

const BasicChart = () => { return ( ); }; ```

Chart with All Plugins

```tsx import { SolidUplot, createPluginBus } from "@dschz/solid-uplot"; import { cursor, tooltip, legend, focusSeries } from "@dschz/solid-uplot/plugins"; import type { CursorPluginMessageBus, FocusSeriesPluginMessageBus, TooltipProps, LegendProps, } from "@dschz/solid-uplot/plugins";

const MyTooltip: Component = (props) => (

const MyLegend: Component = (props) => { const cursorVisible = () => props.bus.data.cursor?.state[props.u.root.id]?.visible;

return (