${payload.name}

2f:T7a6,{ 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"); const root = ReactDOM.createRoot(container); // Render the chart into the container root.render(chart); // Return the container element return container; }30:T5c0,{ const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } = 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` <${LineChart} width=${500} height=${300} data=${data} margin=${{ top: 5, right: 30, left: 20, bottom: 5 }} > <${CartesianGrid} strokeDasharray="3 3" /> <${XAxis} dataKey="name" /> <${YAxis} /> <${Tooltip} /> <${Legend} /> <${Line} type="monotone" dataKey="pv" stroke="#8884d8" activeDot=${{ r: 8 }} /> <${Line} type="monotone" dataKey="uv" stroke="#82ca9d" /> `; // Create a container element const container = document.createElement("div"); // Render the chart into the container const root = ReactDOM.createRoot(container); // Render the chart into the container root.render(chart); // Return the container element return container; }31:T40c,{ const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = 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` <${LineChart} width=${300} height=${100} data=${data} > <${Line} type="monotone" dataKey="pv" stroke="#8884d8" strokeWidth=${2} /> `; // 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; }32:T51c,{ const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = 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` <${LineChart} layout="vertical" width=${500} height=${300} data=${data} margin=${{ top: 20, right: 30, left: 20, bottom: 5 }} > <${CartesianGrid} strokeDasharray="3 3" /> <${XAxis} type="number" /> <${YAxis} dataKey="name" type="category" /> <${Tooltip} /> <${Legend} /> <${Line} dataKey="pv" stroke="#8884d8" /> <${Line} dataKey="uv" stroke="#82ca9d" /> `; // 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:T577,{ 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=${500} height=${400} data=${data} margin=${{ top: 10, right: 30, left: 0, bottom: 0 }} > <${CartesianGrid} strokeDasharray="3 3" /> <${XAxis} dataKey="name" /> <${YAxis} /> <${Tooltip} /> <${Area} type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" /> <${Area} type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" /> <${Area} type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" /> `; // 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; }34:T5f4,{ const { ComposedChart, Line, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = Recharts; const data = [ { name: "Page A", uv: 590, pv: 800, amt: 1400 }, { name: "Page B", uv: 868, pv: 967, amt: 1506 }, { name: "Page C", uv: 1397, pv: 1098, amt: 989 }, { name: "Page D", uv: 1480, pv: 1200, amt: 1228 }, { name: "Page E", uv: 1520, pv: 1108, amt: 1100 }, { name: "Page F", uv: 1400, pv: 680, amt: 1700 } ]; // Bind HTM's html function to React.createElement const jsx = htm.html; // Create chart using HTM's jsx syntax const chart = jsx` <${ComposedChart} width=${500} height=${400} data=${data} margin=${{ top: 20, right: 80, bottom: 20, left: 20 }} > <${CartesianGrid} stroke="#f5f5f5" /> <${XAxis} dataKey="name" label=${{ value: "Pages", position: "insideBottomRight", offset: 0 }} scale="band" /> <${YAxis} label=${{ value: "Index", angle: -90, position: "insideLeft" }} /> <${Tooltip} /> <${Legend} /> <${Area} type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" /> <${Bar} dataKey="pv" barSize=${20} fill="#413ea0" /> <${Line} type="monotone" dataKey="uv" stroke="#ff7300" /> `; // 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; }35:T12d6,{ const { Treemap } = Recharts; const data = [ { name: "axis", children: [ { name: "Axes", size: 1302 }, { name: "Axis", size: 24593 }, { name: "AxisGridLine", size: 652 }, { name: "AxisLabel", size: 636 }, { name: "CartesianAxes", size: 6703 } ] }, { name: "controls", children: [ { name: "AnchorControl", size: 2138 }, { name: "ClickControl", size: 3824 }, { name: "Control", size: 1353 }, { name: "ControlList", size: 4665 }, { name: "DragControl", size: 2649 }, { name: "ExpandControl", size: 2832 }, { name: "HoverControl", size: 4896 }, { name: "IControl", size: 763 }, { name: "PanZoomControl", size: 5222 }, { name: "SelectionControl", size: 7862 }, { name: "TooltipControl", size: 8435 } ] }, { name: "data", children: [ { name: "Data", size: 20544 }, { name: "DataList", size: 19788 }, { name: "DataSprite", size: 10349 }, { name: "EdgeSprite", size: 3301 }, { name: "NodeSprite", size: 19382 }, { name: "render", children: [ { name: "ArrowType", size: 698 }, { name: "EdgeRenderer", size: 5569 }, { name: "IRenderer", size: 353 }, { name: "ShapeRenderer", size: 2247 } ] }, { name: "ScaleBinding", size: 11275 }, { name: "Tree", size: 7147 }, { name: "TreeBuilder", size: 9930 } ] }, { name: "events", children: [ { name: "DataEvent", size: 7313 }, { name: "SelectionEvent", size: 6880 }, { name: "TooltipEvent", size: 3701 }, { name: "VisualizationEvent", size: 2117 } ] }, { name: "legend", children: [ { name: "Legend", size: 20859 }, { name: "LegendItem", size: 4614 }, { name: "LegendRange", size: 10530 } ] }, { name: "operator", children: [ { name: "distortion", children: [ { name: "BifocalDistortion", size: 4461 }, { name: "Distortion", size: 6314 }, { name: "FisheyeDistortion", size: 3444 } ] }, { name: "encoder", children: [ { name: "ColorEncoder", size: 3179 }, { name: "Encoder", size: 4060 }, { name: "PropertyEncoder", size: 4138 }, { name: "ShapeEncoder", size: 1690 }, { name: "SizeEncoder", size: 1830 } ] }, { name: "filter", children: [ { name: "FisheyeTreeFilter", size: 5219 }, { name: "GraphDistanceFilter", size: 3165 }, { name: "VisibilityFilter", size: 3509 } ] }, { name: "IOperator", size: 1286 }, { name: "label", children: [ { name: "Labeler", size: 9956 }, { name: "RadialLabeler", size: 3899 }, { name: "StackedAreaLabeler", size: 3202 } ] }, { name: "layout", children: [ { name: "AxisLayout", size: 6725 }, { name: "BundledEdgeRouter", size: 3727 }, { name: "CircleLayout", size: 9317 }, { name: "CirclePackingLayout", size: 12003 }, { name: "DendrogramLayout", size: 4853 }, { name: "ForceDirectedLayout", size: 8411 }, { name: "IcicleTreeLayout", size: 4864 }, { name: "IndentedTreeLayout", size: 3174 }, { name: "Layout", size: 7881 }, { name: "NodeLinkTreeLayout", size: 12870 }, { name: "PieLayout", size: 2728 }, { name: "RadialTreeLayout", size: 12348 }, { name: "RandomLayout", size: 870 }, { name: "StackedAreaLayout", size: 9121 }, { name: "TreeMapLayout", size: 9191 } ] }, { name: "Operator", size: 2490 }, { name: "OperatorList", size: 5248 }, { name: "OperatorSequence", size: 4190 }, { name: "OperatorSwitch", size: 2581 }, { name: "SortOperator", size: 2023 } ] } ]; // Bind HTM's html function to React.createElement const jsx = htm.html; // Create chart using HTM's jsx syntax const chart = jsx`

<${Treemap} width=${400} height=${200} data=${data} dataKey="size" aspectRatio=${ 4 / 3 } stroke="#fff" fill="#8884d8" />

`; // 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; }36:T67c,{ const { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend } = Recharts; const data01 = [ { x: 100, y: 200, z: 200 }, { x: 120, y: 100, z: 260 }, { x: 170, y: 300, z: 400 }, { x: 140, y: 250, z: 280 }, { x: 150, y: 400, z: 500 }, { x: 110, y: 280, z: 200 } ]; const data02 = [ { x: 200, y: 260, z: 240 }, { x: 240, y: 290, z: 220 }, { x: 190, y: 290, z: 250 }, { x: 198, y: 250, z: 210 }, { x: 180, y: 280, z: 260 }, { x: 210, y: 220, z: 230 } ]; // Bind HTM's html function to React.createElement const jsx = htm.html; // Create chart using HTM's jsx syntax const chart = jsx`

<${ScatterChart} width=${500} height=${400} margin=${{ top: 20, right: 20, bottom: 20, left: 20 }} > <${CartesianGrid} /> <${XAxis} type="number" dataKey="x" name="stature" unit="cm" /> <${YAxis} type="number" dataKey="y" name="weight" unit="kg" /> <${ZAxis} type="number" dataKey="z" range=${[ 60, 400 ]} name="score" unit="km" /> <${Tooltip} cursor=${{ strokeDasharray: "3 3" }} /> <${Legend} /> <${Scatter} name="A school" data=${data01} fill="#8884d8" shape="star" /> <${Scatter} name="B school" data=${data02} fill="#82ca9d" shape="triangle" />

`; // 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; }37:T57e,{ const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = 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`

<${BarChart} width=${500} height=${300} data=${data} margin=${{ top: 20, right: 30, left: 20, bottom: 5 }} > <${CartesianGrid} strokeDasharray="3 3" /> <${XAxis} dataKey="name" /> <${YAxis} /> <${Tooltip} /> <${Legend} /> <${Bar} dataKey="pv" stackId="a" fill="#8884d8" /> <${Bar} dataKey="amt" stackId="a" fill="#82ca9d" /> <${Bar} dataKey="uv" fill="#ffc658" />

`; // 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; }38:T580,{ const { Sankey, Tooltip } = Recharts; const data0 = { nodes: [ { name: "Visit" }, { name: "Direct-Favourite" }, { name: "Page-Click" }, { name: "Detail-Favourite" }, { name: "Lost" } ], links: [ { source: 0, target: 1, value: 3728.3 }, { source: 0, target: 2, value: 354170 }, { source: 2, target: 3, value: 62429 }, { source: 2, target: 4, value: 291741 } ] }; // Bind HTM's html function to React.createElement const jsx = htm.html; const MyCustomNode = ({ x, y, width, height, index, payload, containerWidth }) => { return jsx` ${payload.name} `; }; // Create chart using HTM's jsx syntax const chart = jsx` <${Sankey} width=${960} height=${500} data=${data0} node=${MyCustomNode} nodePadding=${50} margin=${{ left: 200, right: 200, top: 100, bottom: 100 }} link=${{ stroke: "#77c878" }} > <${Tooltip} /> `; // 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; }39:T9fd,{ const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Brush, AreaChart, Area } = 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`

A demo of synchronized AreaCharts

<${LineChart} width=${500} height=${200} data=${data} syncId="anyId" margin=${{ top: 10, right: 30, left: 0, bottom: 0 }} > <${CartesianGrid} strokeDasharray="3 3" /> <${XAxis} dataKey="name" /> <${YAxis} /> <${Tooltip} /> <${Line} type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />

Maybe some other content

<${AreaChart} width=${500} height=${200} data=${data} syncId="anyId" margin=${{ top: 10, right: 30, left: 0, bottom: 0 }} > <${CartesianGrid} strokeDasharray="3 3" /> <${XAxis} dataKey="name" /> <${YAxis} /> <${Tooltip} /> <${Area} type="monotone" dataKey="pv" stroke="#82ca9d" fill="#82ca9d" />

`; // 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; }3a:[] 2d:{"title":"Using Recharts on Observable (Latest React)","cells":[{"id":0,"value":"# Using Recharts on Observable (Latest React)","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"React = await import(\"https://esm.sh/react\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"ReactDOM = await import(\"https://esm.sh/react-dom/client\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"htm = await import(\"https://esm.sh/htm/react\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"Recharts = await import(\"https://esm.sh/recharts\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"{\n const { PieChart, Pie, Legend } = Recharts;\n\n const data = [\n { name: \"Group A\", value: 400 },\n { name: \"Group B\", value: 300 },\n { name: \"Group C\", value: 300 },\n { name: \"Group D\", value: 200 }\n ];\n\n // Bind HTM's html function to React.createElement\n const jsx = htm.html;\n\n // Create chart using HTM's jsx syntax\n const chart = jsx`\n

\n <${PieChart} width=${300} height=${300}>\n <${Pie} dataKey=\"value\" data=${data} fill=\"#8884d8\" label />\n \n

\n `;\n\n // Create a container element\n const container = document.createElement(\"div\");\n\n // Render the chart into the container\n ReactDOM.render(chart, container);\n\n // Return the container element\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"{\n const { FunnelChart, Funnel, Tooltip, LabelList } = Recharts;\n\n const data = [\n { value: 100, name: \"展现\", fill: \"#8884d8\" },\n { value: 80, name: \"点击\", fill: \"#83a6ed\" },\n { value: 50, name: \"访问\", fill: \"#8dd1e1\" },\n { value: 40, name: \"咨询\", fill: \"#82ca9d\" },\n { value: 26, name: \"订单\", fill: \"#a4de6c\" }\n ];\n\n // Bind HTM's html function to React.createElement\n const jsx = htm.html;\n\n // Create chart using HTM's jsx syntax\n const chart = jsx`\n <${FunnelChart} width=${730} height=${250}>\n <${Tooltip} />\n <${Funnel} dataKey=\"value\" data=${data} isAnimationActive>\n <${LabelList} position=\"right\" fill=\"#000\" stroke=\"none\" dataKey=\"name\" />\n \n \n `;\n\n // Create a container element\n const container = document.createElement(\"div\");\n\n // Render the chart into the container\n ReactDOM.render(chart, container);\n\n // Return the container element\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}