From 221ff060412b1ce75b4f265083408cecf95e14f6 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 20 Apr 2026 08:39:06 +0000 Subject: [PATCH] Add StackedBarChart screenshot and full example to README https://claude.ai/code/session_01Bf9veNX9mqfMqrCEGnujAo --- README.md | 22 +++++++++++++++++++++- docs/stackedbarchart.png | Bin 0 -> 10361 bytes 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 docs/stackedbarchart.png diff --git a/README.md b/README.md index 6b07b43..900d2c1 100644 --- a/README.md +++ b/README.md @@ -243,6 +243,8 @@ const data = [ | `showLegend` | `Boolean` | `true` | Show a legend with one entry per key | | `legendPosition` | `'top'\|'bottom'\|'left'\|'right'` | `'bottom'` | Position of the legend relative to the chart | +![Stacked bar chart showing monthly fruit units](docs/stackedbarchart.png) + --- ### PieChart @@ -301,7 +303,7 @@ const data = [ ```jsx import React from 'react' -import { Timeline, ScatterPlot, Histogram, BarChart } from 'quick-charts' +import { Timeline, ScatterPlot, Histogram, BarChart, StackedBarChart } from 'quick-charts' const timelineData = Array.from({ length: 30 }, (_, i) => ({ date: new Date(2024, 2, i + 1), @@ -319,6 +321,15 @@ const barData = [ // ... ] +const stackedData = [ + { month: 'Jan', apples: 30, oranges: 20, bananas: 15 }, + { month: 'Feb', apples: 25, oranges: 30, bananas: 10 }, + { month: 'Mar', apples: 40, oranges: 15, bananas: 20 }, + { month: 'Apr', apples: 35, oranges: 25, bananas: 18 }, + { month: 'May', apples: 50, oranges: 35, bananas: 22 }, + { month: 'Jun', apples: 45, oranges: 40, bananas: 28 }, +] + const App = () => (
@@ -355,6 +366,15 @@ const App = () => ( yLabel="Sales" />
+
+ d.month} + keys={['apples', 'oranges', 'bananas']} + xLabel="Month" + yLabel="Units" + /> +
) ``` diff --git a/docs/stackedbarchart.png b/docs/stackedbarchart.png new file mode 100644 index 0000000000000000000000000000000000000000..1b75e12b8ced7e58ba162ba8586ff22f8b566f8e GIT binary patch literal 10361 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 literal 0 HcmV?d00001