import{j as t}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as o,C as n}from"./index-Z-6k0Xrj.js";import{D as s,a as h,W as p}from"./DatawrapperChart.stories-BMkI3dxO.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./DatawrapperChart-BBvguXT3.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./GraphicBlock-uLJTqaY1.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";function a(r){const e={code:"code",em:"em",h1:"h1",h2:"h2",h5:"h5",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...i(),...r.components};return t.jsxs(t.Fragment,{children:[t.jsx(o,{of:s}),`
`,t.jsx(e.h1,{id:"datawrapperchart",children:"DatawrapperChart"}),`
`,t.jsx(e.p,{children:"Easily add a responsive Datawrapper embed on your page."}),`
`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-svelte",children:`<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"
/>
`})}),`
`,t.jsxs(e.h5,{id:"getting-the-chart-url-for-src",children:["Getting the chart URL for ",t.jsx(e.code,{children:"src"})]}),`
`,t.jsxs(e.p,{children:["Copy the source url for the Datawrapper chart in the ",t.jsx(e.code,{children:"src"}),` prop.
You can get this from the published url on Reuters Graphics.`]}),`
`,t.jsxs(e.ul,{children:[`
`,t.jsx(e.li,{children:"Publish the chart on Datawrapper."}),`
`,t.jsxs(e.li,{children:["Go to the ",t.jsx(e.strong,{children:"Datawrapper charts"})," Teams channel, wait for the graphic to finish publishing."]}),`
`,t.jsxs(e.li,{children:["Inside ",t.jsx(e.strong,{children:"Embed code (for developers only)"}),", find and copy the url inside the ",t.jsx(e.code,{children:"src"})," prop. (It ends in ",t.jsx(e.code,{children:"media-embed.html"}),".)"]}),`
`]}),`
`,t.jsxs(e.p,{children:[t.jsx(e.strong,{children:"Note:"})," There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected."]}),`
`,t.jsx(n,{of:h}),`
`,t.jsx(e.h2,{id:"with-chatter",children:"With chatter"}),`
`,t.jsx(e.p,{children:"By default, Datawrapper will export your chart with the chart chatter like title, description and notes."}),`
`,t.jsxs(e.p,{children:["At the moment, these don't ",t.jsx(e.em,{children:"exactly"})," match our styles and can't be made to fit into the article well."]}),`
`,t.jsx(e.p,{children:"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."}),`
`,t.jsx(n,{of:p})]})}function X(r={}){const{wrapper:e}={...i(),...r.components};return e?t.jsx(e,{...r,children:t.jsx(a,{...r})}):a(r)}export{X as default};