d91f7b174c
git-subtree-dir: packages/graphics-components git-subtree-split: 247be9ce40bd338d3934534fb6392504a0cdc81f
45 lines
1.5 KiB
Text
45 lines
1.5 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as DatawrapperChartStories from './DatawrapperChart.stories.svelte';
|
|
|
|
<Meta of={DatawrapperChartStories} />
|
|
|
|
# DatawrapperChart
|
|
|
|
Easily add a responsive Datawrapper embed on your page.
|
|
|
|
```svelte
|
|
<script>
|
|
import { DatawrapperChart } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<DatawrapperChart
|
|
title="Global abortion access"
|
|
ariaLabel="map"
|
|
id="abortion-rights-map"
|
|
src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
|
|
/>
|
|
```
|
|
|
|
##### Getting the chart URL for `src`
|
|
|
|
Copy the source url for the Datawrapper chart in the `src` prop.
|
|
You can get this from the published url on Reuters Graphics.
|
|
|
|
- Publish the chart on Datawrapper.
|
|
- Go to the **Datawrapper charts** Teams channel, wait for the graphic to finish publishing.
|
|
- Inside **Embed code (for developers only)**, find and copy the url inside the `src` prop. (It ends in `media-embed.html`.)
|
|
|
|
**Note:** There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected.
|
|
|
|
<Canvas of={DatawrapperChartStories.Demo} />
|
|
|
|
## With chatter
|
|
|
|
By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
|
|
|
|
At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
|
|
|
|
Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.
|
|
|
|
<Canvas of={DatawrapperChartStories.WithChatter} />
|