storybook/docs/snippets/svelte/histogram-story.mdx.mdx
2022-09-08 21:20:10 +01:00

30 lines
695 B
Plaintext

```md
<!-- Histogram.stories.mdx -->
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import Histogram from './Histogram.svelte';
<Meta title="Histogram" component={Histogram} />
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/svelte/api/csf
to learn how to use render functions.
-->
<Canvas>
<Story
name="Default"
args={{
dataType: 'latency',
showHistogramLabels: true,
histogramAccentColor: '#1EA7FD',
label: 'Latency distribution',
}}
render={(args) => ({
Component: Histogram,
props: args,
})} />
</Canvas>
```