Skip to content

Commit 5c8a20a

Browse files
ghiscodingghiscoding
committed
chore: add Doughtnut Charts
1 parent c83f1be commit 5c8a20a

File tree

8 files changed

+260
-84
lines changed

8 files changed

+260
-84
lines changed

‎docs/inserting-charts.md‎

Lines changed: 187 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Add charts to a workbook: create data, create a chart, add it, position it. That's all—just practical usage.
44

55
### Supported types
6-
`column` (vertical clustered), `bar` (horizontal), `line`, `pie`, `scatter`
6+
`column` (vertical clustered), `bar` (horizontal), `line`, `pie`, `doughnut`, `scatter`
77

88
### Core steps
99
1. Create a workbook & worksheet
@@ -16,7 +16,7 @@ Add charts to a workbook: create data, create a chart, add it, position it. That
1616
### Option summary (ChartOptions)
1717
| Option | Purpose | Notes |
1818
|--------|---------|-------|
19-
| type | `column` | `bar` | `line` | `pie` | `scatter` | Defaults to `column` |
19+
| type | `column` | `bar` | `line` | `pie` | `doughnut` | `scatter` | Defaults to `column` |
2020
| title | Chart title | Omit for none |
2121
| axis.x.title | X axis label | Ignored for pie |
2222
| axis.y.title | Y axis label | Ignored for pie |
@@ -62,58 +62,7 @@ ws.addDrawings(drawings.addDrawing(chart)); // or add drawings first then the ch
6262
await wb.generateFiles();
6363
```
6464

65-
### Horizontal bar chart
66-
```ts
67-
const barChart = new Chart({
68-
type: 'bar',
69-
title: 'Revenue (Horizontal Bar)',
70-
series: [
71-
{ name: 'Q1', valuesRange: 'Sales!$B$2:$B$4' },
72-
{ name: 'Q2', valuesRange: 'Sales!$C$2:$C$4' },
73-
],
74-
categoriesRange: 'Sales!$A$2:$A$4',
75-
});
76-
wb.addChart(barChart);
77-
```
78-
79-
### Line chart (with axis titles)
80-
```ts
81-
const lineChart = new Chart({
82-
type: 'line',
83-
title: 'Revenue Trend',
84-
axis: { x: { title: 'Month' }, y: { title: 'Total', showGridLines: true } },
85-
series: [{ name: 'Q1', valuesRange: 'Sales!$B$2:$B$13' }],
86-
categoriesRange: 'Sales!$A$2:$A$13',
87-
});
88-
wb.addChart(lineChart);
89-
```
90-
91-
### Pie chart
92-
```ts
93-
const pie = new Chart({
94-
type: 'pie',
95-
title: 'Share by Region',
96-
series: [{ name: '2025', valuesRange: 'Regions!$B$2:$B$6' }],
97-
categoriesRange: 'Regions!$A$2:$A$6',
98-
});
99-
wb.addChart(pie);
100-
```
101-
102-
### Scatter chart
103-
Provide both X and Y value ranges (numeric): (less common, placed last)
104-
```ts
105-
const scatter = new Chart({
106-
type: 'scatter',
107-
title: 'Distance vs Speed',
108-
axis: { x: { title: 'Distance' }, y: { title: 'Speed' } },
109-
series: [{
110-
name: 'Run A',
111-
xValuesRange: 'Runs!$A$2:$A$11',
112-
valuesRange: 'Runs!$B$2:$B$11',
113-
}],
114-
});
115-
wb.addChart(scatter);
116-
```
65+
<!-- Detailed per-type examples moved to the bottom section -->
11766

11867

11968
## Resizing (width & height)
@@ -141,7 +90,7 @@ The legend only appears when the chart has two or more series.
14190
- 2+ series: legend lists each `series.name`.
14291

14392
Notes:
144-
- Pie: if you add multiple series you get multiple pies; the legend shows the series names.
93+
- Pie / Doughnut: if you add multiple series you get multiple rings (doughnut) or pies; the legend shows the series names.
14594

14695
Example (legend will show 2 entries):
14796
```ts
@@ -195,6 +144,188 @@ new Chart({
195144
```
196145

197146
Notes:
198-
- Stacking ignored for pie & scatter.
147+
- Stacking ignored for: doughnut, pie & scatter
199148
- Percent stacking displays proportional contribution (0–100%).
200149
- Overlap is automatically set for stacked column/bar to align segments.
150+
151+
---
152+
153+
## Chart Type Examples
154+
155+
Below are minimal, focused examples for each supported chart type. They assume you have already created a workbook `wb`, added a worksheet `ws` with suitable data, and added that worksheet to the workbook. Only the chart-specific parts are shown.
156+
157+
#### Column
158+
```ts
159+
const col = new Chart({
160+
type: 'column',
161+
title: 'Monthly Revenue',
162+
axis: { x: { title: 'Month' }, y: { title: 'Amount', minimum: 0, showGridLines: true } },
163+
series: [
164+
{ name: 'Q1', valuesRange: 'Sales!$B$2:$B$13' },
165+
{ name: 'Q2', valuesRange: 'Sales!$C$2:$C$13' },
166+
],
167+
categoriesRange: 'Sales!$A$2:$A$13',
168+
});
169+
wb.addChart(col);
170+
```
171+
172+
#### Bar (horizontal)
173+
```ts
174+
const bar = new Chart({
175+
type: 'bar',
176+
title: 'Monthly Revenue (Horizontal)',
177+
series: [
178+
{ name: 'Q1', valuesRange: 'Sales!$B$2:$B$7' },
179+
{ name: 'Q2', valuesRange: 'Sales!$C$2:$C$7' },
180+
],
181+
categoriesRange: 'Sales!$A$2:$A$7',
182+
});
183+
wb.addChart(bar);
184+
```
185+
186+
#### Line
187+
```ts
188+
const line = new Chart({
189+
type: 'line',
190+
title: 'Trend',
191+
axis: { x: { title: 'Month' }, y: { title: 'Value', showGridLines: true } },
192+
series: [{ name: 'Q1', valuesRange: 'Sales!$B$2:$B$13' }],
193+
categoriesRange: 'Sales!$A$2:$A$13',
194+
});
195+
wb.addChart(line);
196+
```
197+
198+
#### Pie (single series for one pie)
199+
```ts
200+
const pie = new Chart({
201+
type: 'pie',
202+
title: 'Share by Region',
203+
series: [{ name: '2025', valuesRange: 'Regions!$B$2:$B$6' }],
204+
categoriesRange: 'Regions!$A$2:$A$6',
205+
});
206+
wb.addChart(pie);
207+
```
208+
209+
#### Doughnut (single series for one ring)
210+
```ts
211+
const doughnut = new Chart({
212+
type: 'doughnut',
213+
title: 'Share by Category',
214+
series: [{ name: '2025', valuesRange: 'Categories!$B$2:$B$6' }],
215+
categoriesRange: 'Categories!$A$2:$A$6',
216+
});
217+
wb.addChart(doughnut);
218+
```
219+
220+
#### Scatter (X/Y numeric ranges)
221+
```ts
222+
const scatter = new Chart({
223+
type: 'scatter',
224+
title: 'Distance vs Speed',
225+
axis: { x: { title: 'Distance' }, y: { title: 'Speed' } },
226+
series: [{
227+
name: 'Run A',
228+
xValuesRange: 'Runs!$A$2:$A$21',
229+
valuesRange: 'Runs!$B$2:$B$21',
230+
}],
231+
});
232+
wb.addChart(scatter);
233+
```
234+
235+
#### Column Stacked
236+
```ts
237+
const colStacked = new Chart({
238+
type: 'column',
239+
stacking: 'stacked',
240+
title: 'Stacked Revenue',
241+
axis: { x: { title: 'Month' }, y: { title: 'Total', minimum: 0, showGridLines: true } },
242+
series: [
243+
{ name: 'Product A', valuesRange: 'Sales!$B$2:$B$13' },
244+
{ name: 'Product B', valuesRange: 'Sales!$C$2:$C$13' },
245+
],
246+
categoriesRange: 'Sales!$A$2:$A$13',
247+
});
248+
wb.addChart(colStacked);
249+
```
250+
251+
#### Column Percent Stacked
252+
```ts
253+
const colPct = new Chart({
254+
type: 'column',
255+
stacking: 'percent',
256+
title: 'Product Mix %',
257+
axis: { x: { title: 'Month' }, y: { title: 'Percent', minimum: 0, maximum: 1, showGridLines: true } },
258+
series: [
259+
{ name: 'Product A', valuesRange: 'Sales!$B$2:$B$13' },
260+
{ name: 'Product B', valuesRange: 'Sales!$C$2:$C$13' },
261+
],
262+
categoriesRange: 'Sales!$A$2:$A$13',
263+
});
264+
wb.addChart(colPct);
265+
```
266+
267+
#### Line Stacked
268+
```ts
269+
const lineStacked = new Chart({
270+
type: 'line',
271+
stacking: 'stacked',
272+
title: 'Cumulative Trend',
273+
axis: { x: { title: 'Month' }, y: { title: 'Total', minimum: 0 } },
274+
series: [
275+
{ name: 'North', valuesRange: 'Regions!$B$2:$B$13' },
276+
{ name: 'South', valuesRange: 'Regions!$C$2:$C$13' },
277+
],
278+
categoriesRange: 'Regions!$A$2:$A$13',
279+
});
280+
wb.addChart(lineStacked);
281+
```
282+
283+
#### Line Percent Stacked
284+
```ts
285+
const linePct = new Chart({
286+
type: 'line',
287+
stacking: 'percent',
288+
title: 'Regional Contribution %',
289+
axis: { x: { title: 'Month' }, y: { title: 'Percent', minimum: 0, maximum: 1 } },
290+
series: [
291+
{ name: 'North', valuesRange: 'Regions!$B$2:$B$13' },
292+
{ name: 'South', valuesRange: 'Regions!$C$2:$C$13' },
293+
],
294+
categoriesRange: 'Regions!$A$2:$A$13',
295+
});
296+
wb.addChart(linePct);
297+
```
298+
299+
#### Bar Stacked
300+
```ts
301+
const barStacked = new Chart({
302+
type: 'bar',
303+
stacking: 'stacked',
304+
title: 'Stacked Horizontal',
305+
series: [
306+
{ name: 'Segment A', valuesRange: 'Segments!$B$2:$B$10' },
307+
{ name: 'Segment B', valuesRange: 'Segments!$C$2:$C$10' },
308+
],
309+
categoriesRange: 'Segments!$A$2:$A$10',
310+
});
311+
wb.addChart(barStacked);
312+
```
313+
314+
#### Bar Percent Stacked
315+
```ts
316+
const barPct = new Chart({
317+
type: 'bar',
318+
stacking: 'percent',
319+
title: 'Segment Share %',
320+
axis: { y: { minimum: 0, maximum: 1 } },
321+
series: [
322+
{ name: 'Segment A', valuesRange: 'Segments!$B$2:$B$10' },
323+
{ name: 'Segment B', valuesRange: 'Segments!$C$2:$C$10' },
324+
],
325+
categoriesRange: 'Segments!$A$2:$A$10',
326+
});
327+
wb.addChart(barPct);
328+
```
329+
330+
---
331+
End of chart type examples.

‎packages/demo/src/examples/example18.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ <h2 class="bd-title">
1919
</span>
2020
</h2>
2121
<div class="demo-subtitle">
22-
Create multiple chart types (column, bar, line, pie, scatter + stacked & percent stacked variants) and export them to an Excel file.
22+
Create multiple chart types (column, bar, line, pie, doughnut, scatter + stacked & percent stacked variants) and export them to an
23+
Excel file.
2324
</div>
2425
</div>
2526
</div>
@@ -59,6 +60,13 @@ <h2 class="bd-title">
5960
</tr>
6061
</tbody>
6162
</table>
63+
<div class="screenshot-wrapper mt-4">
64+
<h6 class="mb-2">Excel Preview (single sheet example)</h6>
65+
<p class="small text-muted mt-1">
66+
This screenshot shows one chart sheet only. The exported workbook includes every chart listed on the right.
67+
</p>
68+
<img id="chart-screenshot" class="img-fluid rounded border" style="max-width:100%;height:auto;">
69+
</div>
6270
</div>
6371
<div class="col-sm-5 offset-sm-1">
6472
<h5>Charts Created:</h5>
@@ -67,6 +75,7 @@ <h5>Charts Created:</h5>
6775
<li>Bar</li>
6876
<li>Line</li>
6977
<li>Pie</li>
78+
<li>Doughnut</li>
7079
<li>Scatter</li>
7180
<li>Column Stacked</li>
7281
<li>Bar Stacked</li>

0 commit comments

Comments
 (0)