charcoal 0.1.1

Declarative, DataFrame-native chart library for Polars. No browser required.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Quarterly Sales (Stacked)</title>
  <style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      background: #ffffff;
      padding: 1rem;
      box-sizing: border-box;
    }
    svg { max-width: 100%; height: auto; }
  </style>
</head>
<body>
<svg id="cc_000001" xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500">
<rect x="0.00" y="0.00" width="800.00" height="500.00" fill="#FFFFFF"/>
<defs><clipPath id="cc_000001_clip"><rect x="70.00" y="50.00" width="700.00" height="390.00"/></clipPath></defs>
<line x1="157.50" y1="50.00" x2="157.50" y2="440.00" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="332.50" y1="50.00" x2="332.50" y2="440.00" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="507.50" y1="50.00" x2="507.50" y2="440.00" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="682.50" y1="50.00" x2="682.50" y2="440.00" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="440.00" x2="770.00" y2="440.00" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="391.25" x2="770.00" y2="391.25" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="342.50" x2="770.00" y2="342.50" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="293.75" x2="770.00" y2="293.75" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="245.00" x2="770.00" y2="245.00" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="196.25" x2="770.00" y2="196.25" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="147.50" x2="770.00" y2="147.50" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="98.75" x2="770.00" y2="98.75" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="50.00" x2="770.00" y2="50.00" stroke="#E0E0E0" stroke-width="1.00"/>
<line x1="70.00" y1="440.00" x2="770.00" y2="440.00" stroke="#333333" stroke-width="1.00"/>
<line x1="157.50" y1="440.00" x2="157.50" y2="445.00" stroke="#333333" stroke-width="1.00"/>
<text x="157.50" y="461.00" text-anchor="middle" font-size="12" fill="#333333">Q1</text>
<line x1="332.50" y1="440.00" x2="332.50" y2="445.00" stroke="#333333" stroke-width="1.00"/>
<text x="332.50" y="461.00" text-anchor="middle" font-size="12" fill="#333333">Q2</text>
<line x1="507.50" y1="440.00" x2="507.50" y2="445.00" stroke="#333333" stroke-width="1.00"/>
<text x="507.50" y="461.00" text-anchor="middle" font-size="12" fill="#333333">Q3</text>
<line x1="682.50" y1="440.00" x2="682.50" y2="445.00" stroke="#333333" stroke-width="1.00"/>
<text x="682.50" y="461.00" text-anchor="middle" font-size="12" fill="#333333">Q4</text>
<line x1="70.00" y1="50.00" x2="70.00" y2="440.00" stroke="#333333" stroke-width="1.00"/>
<line x1="65.00" y1="440.00" x2="70.00" y2="440.00" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="444.20" text-anchor="end" font-size="12" fill="#333333">0</text>
<line x1="65.00" y1="391.25" x2="70.00" y2="391.25" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="395.45" text-anchor="end" font-size="12" fill="#333333">20</text>
<line x1="65.00" y1="342.50" x2="70.00" y2="342.50" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="346.70" text-anchor="end" font-size="12" fill="#333333">40</text>
<line x1="65.00" y1="293.75" x2="70.00" y2="293.75" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="297.95" text-anchor="end" font-size="12" fill="#333333">60</text>
<line x1="65.00" y1="245.00" x2="70.00" y2="245.00" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="249.20" text-anchor="end" font-size="12" fill="#333333">80</text>
<line x1="65.00" y1="196.25" x2="70.00" y2="196.25" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="200.45" text-anchor="end" font-size="12" fill="#333333">100</text>
<line x1="65.00" y1="147.50" x2="70.00" y2="147.50" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="151.70" text-anchor="end" font-size="12" fill="#333333">120</text>
<line x1="65.00" y1="98.75" x2="70.00" y2="98.75" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="102.95" text-anchor="end" font-size="12" fill="#333333">140</text>
<line x1="65.00" y1="50.00" x2="70.00" y2="50.00" stroke="#333333" stroke-width="1.00"/>
<text x="61.00" y="54.20" text-anchor="end" font-size="12" fill="#333333">160</text>
<g clip-path="url(#cc_000001_clip)">
<rect x="96.25" y="337.62" width="122.50" height="102.38" fill="#4C72B0"/>
<rect x="96.25" y="245.00" width="122.50" height="92.62" fill="#DD8452"/>
<rect x="271.25" y="305.94" width="122.50" height="134.06" fill="#4C72B0"/>
<rect x="271.25" y="186.50" width="122.50" height="119.44" fill="#DD8452"/>
<rect x="446.25" y="291.31" width="122.50" height="148.69" fill="#4C72B0"/>
<rect x="446.25" y="152.38" width="122.50" height="138.94" fill="#DD8452"/>
<rect x="621.25" y="249.88" width="122.50" height="190.12" fill="#4C72B0"/>
<rect x="621.25" y="89.00" width="122.50" height="160.88" fill="#DD8452"/>
</g>
<text x="400.00" y="30.00" text-anchor="middle" font-size="16" fill="#333333">Quarterly Sales (Stacked)</text>
<text x="420.00" y="494.00" text-anchor="middle" font-size="12" fill="#333333">category</text>
<text x="24.50" y="245.00" text-anchor="middle" font-size="12" fill="#333333" transform="rotate(-90.00,24.50,245.00)" >sales</text>
<rect x="778.00" y="50.00" width="12.00" height="12.00" fill="#4C72B0" rx="2.00"/>
<text x="794.00" y="59.60" text-anchor="start" font-size="12" fill="#333333">North</text>
<rect x="778.00" y="66.00" width="12.00" height="12.00" fill="#DD8452" rx="2.00"/>
<text x="794.00" y="75.60" text-anchor="start" font-size="12" fill="#333333">South</text>
</svg>
</body>
</html>