31:T8dd,{ const { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } = Recharts; const data = [ { name: "Page A", uv: 4000, pv: 2400, amt: 2400 }, { name: "Page B", uv: 3000, pv: 1398, amt: 2210 }, { name: "Page C", uv: 2000, pv: 9800, amt: 2290 }, { name: "Page D", uv: 2780, pv: 3908, amt: 2000 }, { name: "Page E", uv: 1890, pv: 4800, amt: 2181 }, { name: "Page F", uv: 2390, pv: 3800, amt: 2500 }, { name: "Page G", uv: 3490, pv: 4300, amt: 2100 } ]; // Create chart using React.createElement instead of JSX const chart = React.createElement( AreaChart, { width: 730, height: 250, data: data, margin: { top: 10, right: 30, left: 0, bottom: 0 } }, React.createElement( "defs", null, React.createElement( "linearGradient", { id: "colorUv", x1: "0", y1: "0", x2: "0", y2: "1" }, React.createElement("stop", { offset: "5%", stopColor: "#8884d8", stopOpacity: 0.8 }), React.createElement("stop", { offset: "95%", stopColor: "#8884d8", stopOpacity: 0 }) ), React.createElement( "linearGradient", { id: "colorPv", x1: "0", y1: "0", x2: "0", y2: "1" }, React.createElement("stop", { offset: "5%", stopColor: "#82ca9d", stopOpacity: 0.8 }), React.createElement("stop", { offset: "95%", stopColor: "#82ca9d", stopOpacity: 0 }) ) ), React.createElement(XAxis, { dataKey: "name" }), React.createElement(YAxis), React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), React.createElement(Tooltip), React.createElement(Area, { type: "monotone", dataKey: "uv", stroke: "#8884d8", fillOpacity: 1, fill: "url(#colorUv)" }), React.createElement(Area, { type: "monotone", dataKey: "pv", stroke: "#82ca9d", fillOpacity: 1, fill: "url(#colorPv)" }) ); // Render the chart const container = document.createElement("div"); // Render into the container ReactDOM.render(chart, container); // Return the container element return container; }32:T786,{ const { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } = Recharts; const data = [ { name: "Page A", uv: 4000, pv: 2400, amt: 2400 }, { name: "Page B", uv: 3000, pv: 1398, amt: 2210 }, { name: "Page C", uv: 2000, pv: 9800, amt: 2290 }, { name: "Page D", uv: 2780, pv: 3908, amt: 2000 }, { name: "Page E", uv: 1890, pv: 4800, amt: 2181 }, { name: "Page F", uv: 2390, pv: 3800, amt: 2500 }, { name: "Page G", uv: 3490, pv: 4300, amt: 2100 } ]; // Bind HTM's html function to React.createElement const jsx = htm.html; // Create chart using HTM's jsx syntax const chart = jsx` <${AreaChart} width=${730} height=${250} data=${data} margin=${{ top: 10, right: 30, left: 0, bottom: 0 }} > <${XAxis} dataKey="name" /> <${YAxis} /> <${CartesianGrid} strokeDasharray="3 3" /> <${Tooltip} /> <${Area} type="monotone" dataKey="uv" stroke="#8884d8" fillOpacity=${1} fill="url(#colorUv)" /> <${Area} type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity=${1} fill="url(#colorPv)" /> `; // Create a container element const container = document.createElement("div"); // Render the chart into the container ReactDOM.render(chart, container); // Return the container element return container; }33:[] 2f:{"title":"Rechart Without Build system","cells":[{"id":0,"value":"# Rechart Without Build system","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"React = await import(\"https://esm.sh/react@18.2.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"ReactDOM = await import(\"https://esm.sh/react-dom@18.2.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"htm = await import(\"https://esm.sh/htm/react@18.2.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"Recharts = await import(\"https://esm.sh/recharts@2.12.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"{\n // Bind HTM to React's createElement\n var jsx = htm.html;\n\n // Define your React component\n const App = () => jsx`\n

Hello, World!

This is JSX-like syntax with HTM and React.

\n `;\n\n // Render the React component\n const container = document.createElement(\"div\");\n ReactDOM.render(jsx`<${App} />`, container);\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}