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} />