docs: update example to include stacked bars

EvHaus · Jun 30, 2023 · ed141c9 · ed141c9
1 parent c018c02
commit ed141c9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/examples/basic.pdf b/examples/basic.pdf
diff --git a/examples/composed.pdf b/examples/composed.pdf
diff --git a/examples/composed.tsx b/examples/composed.tsx
@@ -18,42 +18,49 @@ const data = [
 	{
 		name: 'Page A',
 		uv: 4000,
+		uw: 800,
 		pv: 2400,
 		amt: 2400,
 	},
 	{
 		name: 'Page B',
 		uv: 3000,
+		uw: 400,
 		pv: 1398,
 		amt: 2210,
 	},
 	{
 		name: 'Page C',
 		uv: 2000,
+		uw: 500,
 		pv: 9800,
 		amt: 2290,
 	},
 	{
 		name: 'Page D',
 		uv: 2780,
+		uw: 100,
 		pv: 3908,
 		amt: 2000,
 	},
 	{
 		name: 'Page E',
 		uv: 1890,
+		uw: 900,
 		pv: 4800,
 		amt: 2181,
 	},
 	{
 		name: 'Page F',
 		uv: 2390,
+		uw: 1000,
 		pv: 3800,
 		amt: 2500,
 	},
 	{
 		name: 'Page G',
 		uv: 3490,
+		uw: 200,
 		pv: 4300,
 		amt: 2100,
 	},
@@ -66,11 +73,12 @@ const MyDocument = () => (
 				<ComposedChart data={data} height={250} width={500}>
 					<XAxis dataKey='name' />
 					<YAxis />
-					<Legend />
 					<CartesianGrid stroke='#f5f5f5' />
 					<Area type='monotone' dataKey='amt' fill='#8884d8' stroke='#8884d8' />
-					<Bar dataKey='pv' barSize={20} fill='#413ea0' />
+					<Bar dataKey='pv' fill='#413ea0' stackId='stack' />
+					<Bar dataKey='uw' fill='#ffbb00' stackId='stack' />
 					<Line type='monotone' dataKey='uv' stroke='#ff7300' />
+					<Legend />
 				</ComposedChart>
 			</ReactPDFChart>
 		</Page>