# DatawrapperChart

An embedded Datawrapper chart that auto-resizes to the height Datawrapper reports, with title, description and notes.

**Category:** Components/Graphics/DatawrapperChart

**Import:** `import { DatawrapperChart } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `title` | `string` | — |  | Title of the graphic |
| `description` | `string` | — |  | Description of the graphic, passed in as a markdown string. |
| `frameTitle` | `string` | `''` |  | iframe title |
| `notes` | `string` | — |  | Notes to the graphic, passed in as a markdown string. |
| `ariaLabel` | `string` | `''` |  | iframe aria label |
| `id` | `string` | `''` |  | — |
| `src` | `string` | — | ✓ | Datawrapper embed URL |
| `scrolling` | `ScrollingOption` | `'no'` |  | iframe scrolling option |
| `height` | `number` | — |  | Pin the chart iframe to a fixed pixel height instead of letting it auto-resize to the height Datawrapper reports. Useful for lining several charts up at a uniform height in a grid. Pair it with `?fitchart=true` on the chart `src` so Datawrapper stretches the plot to fill the fixed height; without that flag the chart keeps its natural height and pads or clips the difference. |
| `width` | `ContainerWidth` | `'normal'` |  | Width of the chart within the text well. Options: `normal`, `wide`, `wider`, `widest`, `fluid` |
| `textWidth` | `ContainerWidth` | `'normal'` |  | Set a different width for the text within the text well, for example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`. |
| `titleSnippet` | `Snippet` | — |  | Custom headline and chatter snippet |
| `notesSnippet` | `Snippet` | — |  | Custom notes and source snippet |

## Examples

### Demo

```svelte
<DatawrapperChart
  src="https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html"
  id="abortion-rights-map"
  ariaLabel="map"
  frameTitle="Global abortion access"
/>
```

### With chatter

```svelte
<DatawrapperChart
  frameTitle="Global abortion access"
  ariaLabel="map"
  id="abortion-rights-map"
  src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
  title="Global abortion access"
  description="A map of worldwide access to abortion."
  notes={/* value — see Props/Types for full type */}
/>
```

## Documentation

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

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