Svelte-plotly.js NPM

Plotly.js for Svelte

This is an unofficial package that lets you efficiently use plotly.js inside your Svelte or SvelteKit app.

Usage

Install using pnpm add svelte-plotly.js or npm install svelte-plotly.js.
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.
Use in your app:

<script lang="ts">
  import Plot from 'svelte-plotly.js';

  const data = [
    {
      x: [1, 2, 3, 4, 5],
      y: [1, 2, 4, 8, 16]
    }
  ];
</script>

<Plot
  {data}
  layout={{
    margin: { t: 0 }
  }}
  fillParent="width"
  debounce={250}
/>

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. 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:

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:

<script lang="ts">
  import Plot from 'svelte-plotly.js';
  import libPlotly from 'plotly.js-basic-dist-min';
</script>

<Plot {libPlotly} ... />

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.

<script lang="ts">
  import Plot, { faToPlotly } from 'svelte-plotly.js';
  import { faExpand, faCompress } from '@fortawesome/free-solid-svg-icons';
  let fullscreen = false;
</script>

<Plot
    config={{
      modeBarButtonsToAdd: [
        {
          name: 'fullscreen',
          title: fullscreen ? 'Disable Fullscreen' : 'Enable Fullscreen',
          icon: fullscreen ? faToPlotly(faCompress) : faToPlotly(faExpand),
          click: () => (fullscreen = !fullscreen)
        }
      ],
    }}
    ...
/>

Properties

Prop	Type	Description
required `data`	`Data[]`	array of trace data, see https://plot.ly/javascript/reference/
`layout`	`Partial<Layout>`	layout of the plot, see https://plot.ly/javascript/reference/#layout
`config`	`Partial<Config>`	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 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), (src)
`on:animated`	—	triggers once an animation finished playing (demo), (docs), (src 1), (src 2)
`on:animating`	—	? (src)
`on:animatingFrame`	`FrameAnimationEvent`	? (src)
`on:animationInterrupted`	—	? (src)
`on:autoSize`	—	? (docs)
`on:beforeExport`	—	?
`on:beforeHover`	`PlotMouseEvent`	?
`on:beforePlot`	`BeforePlotEvent`	? (src)
`on:buttonClicked`	`ButtonClickedEvent`	?
`on:click`	`PlotMouseEvent`	? (docs 1), (docs 2)
`on:clickAnnotation`	`ClickAnnotationEvent`	?
`on:deselect`	—	? (docs)
`on:doubleClick`	—	? (docs)
`on:framework`	—	?
`on:hover`	`PlotHoverEvent`	? (docs)
`on:legendClick`	`LegendClickEvent`	? (docs)
`on:legendDoubleClick`	`LegendClickEvent`	? (docs)
`on:react`	`PlotUpdateEvent`	?
`on:redraw`	—	? (docs)
`on:relayout`	`PlotRelayoutEvent`	? (docs)
`on:relayouting`	`PlotRelayoutEvent`	? (docs)
`on:restyle`	`PlotRestyleEvent`	? (docs)
`on:selected`	`PlotSelectionEvent`	? (docs)
`on:selecting`	`PlotSelectionEvent`	? (docs)
`on:sliderChange`	`SliderChangeEvent`	?
`on:sliderEnd`	`SliderEndEvent`	?
`on:sliderStart`	`SliderStartEvent`	?
`on:sunburstClick`	`SunburstClickEvent`	?
`on:transitioned`	—	?
`on:transitioning`	—	?
`on:transitionInterrupted`	—	?
`on:unhover`	`PlotMouseEvent`	?
`on:update`	`PlotUpdateEvent`	?
`on:webGLContextLost`	—	? (docs)