# svelte-plotly.js > Unoficial Plotly package for Svelte and SvelteKit Latest version **2.0.0** (published 2026-04-07) · MIT license · 0 weekly downloads ## Install ```sh npm install svelte-plotly.js pnpm add svelte-plotly.js yarn add svelte-plotly.js bun add svelte-plotly.js ``` ## Health **Score 55/100 (C)** — status: active. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2026-04-07 | | First published | 2022-05-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM | | Dependencies | 4 | | Unpacked size | 54.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 25 | | Author | Michal Grňo | | Maintainers | c.sha, richard.ivanek | ## Links - npm: https://www.npmjs.com/package/svelte-plotly.js - Repository: https://github.com/m93a/svelte-plotly.js - Issues: https://github.com/m93a/svelte-plotly.js/issues - npm.io page: https://npm.io/package/svelte-plotly.js ## Dependencies (4) - [lodash-es](https://npm.io/package/lodash-es.md) ^4.18.1 - [@types/lodash-es](https://npm.io/package/@types/lodash-es.md) ^4.17.12 - [@types/plotly.js](https://npm.io/package/@types/plotly.js.md) ^3.0.10 - [@fortawesome/fontawesome-common-types](https://npm.io/package/@fortawesome/fontawesome-common-types.md) ^7.2.0 ## Recent versions - 2.0.0 (latest) — 2026-04-07 - 1.1.0-rc1 (rc) — 2024-08-03 - 1.2.0 — 2024-08-05 - 1.1.0 — 2024-08-05 - 1.0.0 — 2024-08-01 - 0.5.1 — 2024-07-31 - 0.5.0 — 2024-07-31 - 0.4.0 — 2024-06-27 - 0.3.2 — 2022-12-05 - 0.3.1 — 2022-12-05 - 0.3.0 — 2022-09-27 - 0.2.1 — 2022-08-21 - 0.2.0 — 2022-07-17 - 0.1.7 — 2022-06-19 - 0.1.6 — 2022-05-19 - … 6 more at https://npm.io/package/svelte-plotly.js/versions ## README # Plotly.js for Svelte This is an unofficial package that lets you efficiently use [plotly.js](https://plotly.com/javascript/) inside your Svelte or SvelteKit app. ## Usage 1. Install using `pnpm add svelte-plotly.js` or `npm install svelte-plotly.js`. 2. Choose a Plotly distribution: - If you want to use `plotly.js-dist`, just install it. - If you want to use a different distribution, take a look at [this section](#custom-plotly-distribution). 3. Use in your app: ```svelte ``` ## Custom Plotly distribution Let's say you want to use svelte-plotly.js with a custom Plotly.js distribution, for example [`plotly.js-basic-dist-min`](https://www.npmjs.com/package/plotly.js-basic-dist-min). If you use Vite for bundling, the recommended way to do this would be to install `plotly.js-basic-dist-min` and then register it as an alias for `plotly.js-dist` by adding the following to your [`vite.config.js`](https://vitejs.dev/config/shared-options.html#resolve-alias): ```js resolve: { alias: { "plotly.js-dist": "plotly.js-basic-dist-min", lodash: "lodash-es", }, }, ``` If you don't use Vite, or this approach doesn't work for you, you can also use the `libPlotly` prop of the `Plotly` component: ```svelte ``` ## Using FontAwesome icons Plotly allows you to modify the chart's _mode bar_ (ie. the buttons in the chart's top right corner). However, you can't use any svelte component – it must be an icon in Plotly's specified format. This library includes a helper function `faToPlotly` that converts a FontAwesome icon to exactly what Plotly needs. ```svelte (fullscreen = !fullscreen) } ], }} ... /> ``` ## Properties | Prop | Type | Description | | -------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **required `data`** | `Data[]` | array of trace data, see https://plot.ly/javascript/reference/ | | `layout` | `Partial` | layout of the plot, see https://plot.ly/javascript/reference/#layout | | `config` | `Partial` | configuration, see https://plot.ly/javascript/configuration-options/ | | `class` | `string` | class that will be passed to the HTML element wrapping the plot | | `fillParent` | `boolean \| 'width' \| 'height'` | automatically resize the plot to fill the width and/or height of its parent element | | `debounce` | `number \| DebounceOptions` | debounce all changes to the plot | | `libPlotly` | `Plotly \| null \| undefined` | an alternative Plotly bundle to use; if undefined, it defaults to the `plotly.js-dist` package; if null, no plot will be drawn and no library will be downloaded | | `configReactivityStrategy` | `'none' \| 'static-plot'` | walkaround for an [upstream bug](https://github.com/m93a/svelte-plotly.js/issues/10) causing `config` not to update, enabled by default | | `bind:element` | `HTMLDivElement` | the HTML element wrapping the plot | | `bind:plot` | `PlotlyHTMLElement` | the inner HTML element containing the plot | ## Events _**NOTE:** Due to Plotly's atrocious documentation, most events aren't even mentioned anywhere. Links to source code are provided as the bare minimum information about each event._ | Prop | Callback argument | Description | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `on:afterExport` | — | ? | | `on:afterPlot` | — | triggers each time a chart is plotted, or re-plotted after the restyling or relayout of a plot [(docs)](https://plotly.com/javascript/plotlyjs-events/#afterplot-event), [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L405) | | `on:animated` | — | triggers once an animation finished playing [(demo)](https://codepen.io/csha/pen/NWYJGgg), [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events), [(src 1)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L405), [(src 2)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3445) | | `on:animating` | — | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3308) | | `on:animatingFrame` | [`FrameAnimationEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L126) | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3293) | | `on:animationInterrupted` | — | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3189) | | `on:autoSize` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) | | `on:beforeExport` | — | ? | | `on:beforeHover` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ? | | `on:beforePlot` | [`BeforePlotEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L243) | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L72) | | `on:buttonClicked` | [`ButtonClickedEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L46) | ? | | `on:click` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ? [(docs 1)](https://plotly.com/javascript/plotlyjs-events/#click-event), [(docs 2)](https://plotly.com/javascript/click-events/) | | `on:clickAnnotation` | [`ClickAnnotationEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L119) | ? | | `on:deselect` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) | | `on:doubleClick` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#double-click-event) | | `on:framework` | — | ? | | `on:hover` | [`PlotHoverEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L74) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#hover-event) | | `on:legendClick` | [`LegendClickEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L138) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#legend-click-events) | | `on:legendDoubleClick` | [`LegendClickEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L138) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#legend-click-events) | | `on:react` | [`PlotUpdateEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L52) | ? | | `on:redraw` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) | | `on:relayout` | [`PlotRelayoutEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L110) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#update-data) | | `on:relayouting` | [`PlotRelayoutEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L110) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#update-data) | | `on:restyle` | [`PlotRestyleEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L102) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#update-data) | | `on:selected` | [`PlotSelectionEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L92) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#select-event) | | `on:selecting` | [`PlotSelectionEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L92) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#select-event) | | `on:sliderChange` | [`SliderChangeEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L203) | ? | | `on:sliderEnd` | [`SliderEndEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L214) | ? | | `on:sliderStart` | [`SliderStartEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L210) | ? | | `on:sunburstClick` | [`SunburstClickEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L219) | ? | | `on:transitioned` | — | ? | | `on:transitioning` | — | ? | | `on:transitionInterrupted` | — | ? | | `on:unhover` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ? | | `on:update` | [`PlotUpdateEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L52) | ? | | `on:webGLContextLost` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) | # Roadmap - [x] add autosizing - [x] add debouncing - [x] add event redirecting - [ ] add unit tests - [ ] add SSR rendering to an image --- _Source: https://npm.io/package/svelte-plotly.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._