simplecharts

SVG charts without dependencies
git clone https://git.ce9e.org/simplecharts.git

commit
ed5604afb5db723055a8a31f60a2b782dea8b8d6
parent
bf490e6432daea2abc4f2106bcf282c99385a1f1
Author
Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date
2026-04-13 10:27
use (closed) polygon for stack areas

Diffstat

M simplecharts.py 6 +++++-
M tests/empty_StackedAreaRenderer.svg 6 +++---
M tests/float_StackedAreaRenderer.svg 6 +++---
M tests/long_StackedAreaRenderer.svg 10 +++++-----
M tests/no-legend_StackedAreaRenderer.svg 6 +++---
M tests/simple_StackedAreaRenderer.svg 6 +++---
M tests/single_StackedAreaRenderer.svg 2 +-

7 files changed, 23 insertions, 19 deletions


diff --git a/simplecharts.py b/simplecharts.py

@@ -84,6 +84,10 @@ class BaseRenderer:
   84    84         d = ' '.join(','.join(self.render_value(c) for c in p) for p in points)
   85    85         return self.element('polyline', points=d, **kwargs)
   86    86 
   -1    87     def polygon(self, points, **kwargs):
   -1    88         d = ' '.join(','.join(self.render_value(c) for c in p) for p in points)
   -1    89         return self.element('polygon', points=d, **kwargs)
   -1    90 
   87    91     def get_title(self, rows, legend, i, j):
   88    92         return rows[i]['values'][j]
   89    93 
@@ -321,7 +325,7 @@ class StackedAreaRenderer(BaseRenderer):
  321   325             dots += self.element(
  322   326                 'g', group, fill=self.get_color(j), stroke='white', role='row'
  323   327             )
  324    -1             s += self.polyline([
   -1   328             s += self.polygon([
  325   329                 (x, self.height - y) for x, y in points + list(reversed(prev))
  326   330             ], fill=self.get_color(j), stroke='white')
  327   331             prev = points

diff --git a/tests/empty_StackedAreaRenderer.svg b/tests/empty_StackedAreaRenderer.svg

@@ -11,9 +11,9 @@
   11    11 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="160" y="490">Apples</text>
   12    12 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="480" y="490">Oranges</text>
   13    13 		</g>
   14    -1 		<polyline fill="#e41a1c" points="160,479 480,479 480,479 160,479" stroke="white" />
   15    -1 		<polyline fill="#377eb8" points="160,479 480,479 480,479 160,479" stroke="white" />
   16    -1 		<polyline fill="#4daf4a" points="160,479 480,479 480,479 160,479" stroke="white" />
   -1    14 		<polygon fill="#e41a1c" points="160,479 480,479 480,479 160,479" stroke="white" />
   -1    15 		<polygon fill="#377eb8" points="160,479 480,479 480,479 160,479" stroke="white" />
   -1    16 		<polygon fill="#4daf4a" points="160,479 480,479 480,479 160,479" stroke="white" />
   17    17 		<g fill="#e41a1c" role="row" stroke="white">
   18    18 			<circle cx="160" cy="479" r="3" role="cell" />
   19    19 			<circle cx="480" cy="479" r="3" role="cell" />

diff --git a/tests/float_StackedAreaRenderer.svg b/tests/float_StackedAreaRenderer.svg

@@ -11,9 +11,9 @@
   11    11 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="160" y="490">Apples</text>
   12    12 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="480" y="490">Oranges</text>
   13    13 		</g>
   14    -1 		<polyline fill="#e41a1c" points="160,407 480,383 480,479 160,479" stroke="white" />
   15    -1 		<polyline fill="#377eb8" points="160,359 480,335 480,383 160,407" stroke="white" />
   16    -1 		<polyline fill="#4daf4a" points="160,239 480,263 480,335 160,359" stroke="white" />
   -1    14 		<polygon fill="#e41a1c" points="160,407 480,383 480,479 160,479" stroke="white" />
   -1    15 		<polygon fill="#377eb8" points="160,359 480,335 480,383 160,407" stroke="white" />
   -1    16 		<polygon fill="#4daf4a" points="160,239 480,263 480,335 160,359" stroke="white" />
   17    17 		<g fill="#e41a1c" role="row" stroke="white">
   18    18 			<circle cx="160" cy="407" r="3" role="cell">
   19    19 				<title>0.03</title>

diff --git a/tests/long_StackedAreaRenderer.svg b/tests/long_StackedAreaRenderer.svg

@@ -26,11 +26,11 @@
   26    26 			<rect fill="#ff7f00" height="10" width="10" x="308" y="5" />
   27    27 			<text dominant-baseline="middle" fill="#333" x="322" y="10">Other (82)</text>
   28    28 		</g>
   29    -1 		<polyline fill="#e41a1c" points="80,443 240,431 400,431 560,419 560,479 400,479 240,479 80,479" stroke="white" />
   30    -1 		<polyline fill="#377eb8" points="80,419 240,407 400,395 560,407 560,419 400,431 240,431 80,443" stroke="white" />
   31    -1 		<polyline fill="#4daf4a" points="80,359 240,371 400,347 560,383 560,407 400,395 240,407 80,419" stroke="white" />
   32    -1 		<polyline fill="#984ea3" points="80,311 240,347 400,335 560,335 560,383 400,347 240,371 80,359" stroke="white" />
   33    -1 		<polyline fill="#ff7f00" points="80,239 240,299 400,275 560,311 560,335 400,335 240,347 80,311" stroke="white" />
   -1    29 		<polygon fill="#e41a1c" points="80,443 240,431 400,431 560,419 560,479 400,479 240,479 80,479" stroke="white" />
   -1    30 		<polygon fill="#377eb8" points="80,419 240,407 400,395 560,407 560,419 400,431 240,431 80,443" stroke="white" />
   -1    31 		<polygon fill="#4daf4a" points="80,359 240,371 400,347 560,383 560,407 400,395 240,407 80,419" stroke="white" />
   -1    32 		<polygon fill="#984ea3" points="80,311 240,347 400,335 560,335 560,383 400,347 240,371 80,359" stroke="white" />
   -1    33 		<polygon fill="#ff7f00" points="80,239 240,299 400,275 560,311 560,335 400,335 240,347 80,311" stroke="white" />
   34    34 		<g fill="#e41a1c" role="row" stroke="white">
   35    35 			<circle cx="80" cy="443" r="3" role="cell">
   36    36 				<title>3</title>

diff --git a/tests/no-legend_StackedAreaRenderer.svg b/tests/no-legend_StackedAreaRenderer.svg

@@ -13,9 +13,9 @@
   13    13 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="400" y="490">Pears</text>
   14    14 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="560" y="490">Bananas</text>
   15    15 		</g>
   16    -1 		<polyline fill="#e41a1c" points="80,407 240,383 400,383 560,359 560,479 400,479 240,479 80,479" stroke="white" />
   17    -1 		<polyline fill="#377eb8" points="80,359 240,335 400,311 560,335 560,359 400,383 240,383 80,407" stroke="white" />
   18    -1 		<polyline fill="#4daf4a" points="80,239 240,263 400,215 560,287 560,335 400,311 240,335 80,359" stroke="white" />
   -1    16 		<polygon fill="#e41a1c" points="80,407 240,383 400,383 560,359 560,479 400,479 240,479 80,479" stroke="white" />
   -1    17 		<polygon fill="#377eb8" points="80,359 240,335 400,311 560,335 560,359 400,383 240,383 80,407" stroke="white" />
   -1    18 		<polygon fill="#4daf4a" points="80,239 240,263 400,215 560,287 560,335 400,311 240,335 80,359" stroke="white" />
   19    19 		<g fill="#e41a1c" role="row" stroke="white">
   20    20 			<circle cx="80" cy="407" r="3" role="cell">
   21    21 				<title>3</title>

diff --git a/tests/simple_StackedAreaRenderer.svg b/tests/simple_StackedAreaRenderer.svg

@@ -22,9 +22,9 @@
   22    22 			<rect fill="#4daf4a" height="10" width="10" x="592" y="-15" />
   23    23 			<text dominant-baseline="middle" fill="#333" x="606" y="-10">Joe</text>
   24    24 		</g>
   25    -1 		<polyline fill="#e41a1c" points="80,407 240,383 400,383 560,359 560,479 400,479 240,479 80,479" stroke="white" />
   26    -1 		<polyline fill="#377eb8" points="80,359 240,335 400,311 560,335 560,359 400,383 240,383 80,407" stroke="white" />
   27    -1 		<polyline fill="#4daf4a" points="80,239 240,263 400,215 560,287 560,335 400,311 240,335 80,359" stroke="white" />
   -1    25 		<polygon fill="#e41a1c" points="80,407 240,383 400,383 560,359 560,479 400,479 240,479 80,479" stroke="white" />
   -1    26 		<polygon fill="#377eb8" points="80,359 240,335 400,311 560,335 560,359 400,383 240,383 80,407" stroke="white" />
   -1    27 		<polygon fill="#4daf4a" points="80,239 240,263 400,215 560,287 560,335 400,311 240,335 80,359" stroke="white" />
   28    28 		<g fill="#e41a1c" role="row" stroke="white">
   29    29 			<circle cx="80" cy="407" r="3" role="cell">
   30    30 				<title>3</title>

diff --git a/tests/single_StackedAreaRenderer.svg b/tests/single_StackedAreaRenderer.svg

@@ -13,7 +13,7 @@
   13    13 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="400" y="490">Pears</text>
   14    14 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="560" y="490">Bananas</text>
   15    15 		</g>
   16    -1 		<polyline fill="#e41a1c" points="80,239 240,159 400,159 560,79 560,479 400,479 240,479 80,479" stroke="white" />
   -1    16 		<polygon fill="#e41a1c" points="80,239 240,159 400,159 560,79 560,479 400,479 240,479 80,479" stroke="white" />
   17    17 		<g fill="#e41a1c" role="row" stroke="white">
   18    18 			<circle cx="80" cy="239" r="3" role="cell">
   19    19 				<title>3</title>