0.3.2 • Published 1 year ago
svelte-plotly.js v0.3.2
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
yarn add svelte-plotly.js
ornpm 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.
- If you want to use
- 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} ... />
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 |
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) |
Roadmap
- add autosizing
- add debouncing
- add event redirecting
- add unit tests
- add SSR rendering to an image