chartlet 0.22.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><figure class="chartlet-figure" data-viz="chart"><figcaption>Rainfall by month</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewBox="0 0 640 480" id="chartlet-1ab8442d04b177cc" role="img" aria-labelledby="chartlet-1ab8442d04b177cc-title chartlet-1ab8442d04b177cc-description" class="chartlet-root"><title id="chartlet-1ab8442d04b177cc-title">Rainfall by month</title><desc id="chartlet-1ab8442d04b177cc-description">Polar chart of 12 categories, from the top clockwise: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec. Highest: Jul (85); lowest: Feb (41). Millimeters runs from 0 at the center to 100 at the outer ring.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-1ab8442d04b177cc .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-1ab8442d04b177cc .chartlet-label,#chartlet-1ab8442d04b177cc .chartlet-tick,#chartlet-1ab8442d04b177cc .chartlet-value,#chartlet-1ab8442d04b177cc .chartlet-value-inverse,#chartlet-1ab8442d04b177cc .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-1ab8442d04b177cc .chartlet-value,#chartlet-1ab8442d04b177cc .chartlet-value-inverse{font-weight:600}#chartlet-1ab8442d04b177cc .chartlet-value{fill:var(--chartlet-text)}#chartlet-1ab8442d04b177cc .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-1ab8442d04b177cc .chartlet-axis-title{font-weight:600}#chartlet-1ab8442d04b177cc .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1ab8442d04b177cc .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-1ab8442d04b177cc .chartlet-bar,#chartlet-1ab8442d04b177cc .chartlet-point{fill:var(--chartlet-accent)}#chartlet-1ab8442d04b177cc .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-1ab8442d04b177cc .chartlet-background{fill:var(--chartlet-background)}#chartlet-1ab8442d04b177cc .chartlet-polar-ring{fill:none;stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1ab8442d04b177cc .chartlet-polar-bar{fill:var(--chartlet-color-1);stroke:none}#chartlet-1ab8442d04b177cc .chartlet-polar-stem{stroke:var(--chartlet-color-1);stroke-width:2}#chartlet-1ab8442d04b177cc .chartlet-polar-dot{fill:var(--chartlet-color-1);stroke:var(--chartlet-background);stroke-width:1.5}#chartlet-1ab8442d04b177cc .chartlet-polar-tick{font-size:11px;fill:var(--chartlet-muted);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}</style><circle cx="320" cy="240" r="52" class="chartlet-polar-ring"/><circle cx="320" cy="240" r="104" class="chartlet-polar-ring"/><circle cx="320" cy="240" r="156" class="chartlet-polar-ring"/><circle cx="320" cy="240" r="208" class="chartlet-polar-ring"/><polyline points="320,240 297.512,134.204 302.459,133.272 307.443,132.571 312.455,132.103 317.483,131.869 322.517,131.869 327.545,132.103 332.557,132.571 337.541,133.272 342.488,134.204 320,240" class="chartlet-polar-bar"><title>Jan: 52</title></polyline><polyline points="320,240 346.353,158.894 350.098,160.208 353.778,161.695 357.384,163.351 360.91,165.173 364.347,167.158 367.688,169.3 370.926,171.595 374.053,174.038 377.063,176.625 320,240" class="chartlet-polar-bar"><title>Feb: 41</title></polyline><polyline points="320,240 392.65,174.586 395.615,178.037 398.416,181.622 401.047,185.333 403.502,189.163 405.777,193.103 407.866,197.145 409.765,201.279 411.469,205.498 412.975,209.79 320,240" class="chartlet-polar-bar"><title>Mar: 47</title></polyline><polyline points="320,240 407.486,221.404 408.256,225.495 408.835,229.617 409.222,233.761 409.416,237.919 409.416,242.081 409.222,246.239 408.835,250.383 408.256,254.505 407.486,258.596 320,240" class="chartlet-polar-bar"><title>Apr: 43</title></polyline><polyline points="320,240 442.648,279.851 440.661,285.514 438.413,291.078 435.908,296.532 433.153,301.864 430.152,307.061 426.913,312.114 423.442,317.01 419.747,321.739 415.836,326.291 320,240" class="chartlet-polar-bar"><title>May: 62</title></polyline><polyline points="320,240 428.56,360.568 422.833,365.488 416.883,370.136 410.723,374.503 404.367,378.578 397.829,382.353 391.121,385.82 384.26,388.971 377.259,391.8 370.135,394.299 320,240" class="chartlet-polar-bar"><title>Jun: 78</title></polyline><polyline points="320,240 356.759,412.936 348.673,414.459 340.525,415.605 332.333,416.369 324.114,416.752 315.886,416.752 307.667,416.369 299.475,415.605 291.327,414.459 283.241,412.936 320,240" class="chartlet-polar-bar"><title>Jul: 85</title></polyline><polyline points="320,240 274.364,380.452 267.879,378.177 261.507,375.602 255.261,372.734 249.156,369.578 243.204,366.142 237.418,362.432 231.812,358.458 226.396,354.226 221.183,349.748 320,240" class="chartlet-polar-bar"><title>Aug: 71</title></polyline><polyline points="320,240 230.347,320.724 226.688,316.465 223.232,312.041 219.985,307.461 216.955,302.735 214.147,297.873 211.569,292.885 209.226,287.783 207.123,282.578 205.265,277.28 320,240" class="chartlet-polar-bar"><title>Sep: 58</title></polyline><polyline points="320,240 208.1,263.785 207.114,258.553 206.374,253.281 205.879,247.98 205.631,242.662 205.631,237.338 205.879,232.02 206.374,226.719 207.114,221.447 208.1,216.215 320,240" class="chartlet-polar-bar"><title>Oct: 55</title></polyline><polyline points="320,240 201.308,201.435 203.231,195.954 205.407,190.569 207.831,185.291 210.497,180.132 213.401,175.102 216.536,170.213 219.895,165.475 223.471,160.898 227.256,156.493 320,240" class="chartlet-polar-bar"><title>Nov: 60</title></polyline><polyline points="320,240 240.668,151.893 244.853,148.297 249.201,144.9 253.702,141.709 258.347,138.731 263.125,135.972 268.027,133.439 273.041,131.136 278.157,129.069 283.363,127.243 320,240" class="chartlet-polar-bar"><title>Dec: 57</title></polyline><text x="324" y="185" text-anchor="start" class="chartlet-polar-tick">25</text><text x="324" y="133" text-anchor="start" class="chartlet-polar-tick">50</text><text x="324" y="81" text-anchor="start" class="chartlet-polar-tick">75</text><text x="324" y="29" text-anchor="start" class="chartlet-polar-tick">100</text><text x="320" y="14" text-anchor="middle" class="chartlet-label">Jan</text><text x="429" y="49.206" text-anchor="start" class="chartlet-label">Feb</text><text x="508.794" y="129" text-anchor="start" class="chartlet-label">Mar</text><text x="538" y="244" text-anchor="start" class="chartlet-label">Apr</text><text x="508.794" y="359" text-anchor="start" class="chartlet-label">May</text><text x="429" y="438.794" text-anchor="start" class="chartlet-label">Jun</text><text x="320" y="468" text-anchor="middle" class="chartlet-label">Jul</text><text x="211" y="438.794" text-anchor="end" class="chartlet-label">Aug</text><text x="131.206" y="359" text-anchor="end" class="chartlet-label">Sep</text><text x="102" y="244" text-anchor="end" class="chartlet-label">Oct</text><text x="131.206" y="129" text-anchor="end" class="chartlet-label">Nov</text><text x="211" y="49.206" text-anchor="end" class="chartlet-label">Dec</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="420" viewBox="0 0 380 420" id="chartlet-1ab8442d04b177cc-m" role="img" aria-labelledby="chartlet-1ab8442d04b177cc-m-title chartlet-1ab8442d04b177cc-m-description" class="chartlet-root"><title id="chartlet-1ab8442d04b177cc-m-title">Rainfall by month</title><desc id="chartlet-1ab8442d04b177cc-m-description">Polar chart of 12 categories, from the top clockwise: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec. Highest: Jul (85); lowest: Feb (41). Millimeters runs from 0 at the center to 100 at the outer ring.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-1ab8442d04b177cc-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-1ab8442d04b177cc-m .chartlet-label,#chartlet-1ab8442d04b177cc-m .chartlet-tick,#chartlet-1ab8442d04b177cc-m .chartlet-value,#chartlet-1ab8442d04b177cc-m .chartlet-value-inverse,#chartlet-1ab8442d04b177cc-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-1ab8442d04b177cc-m .chartlet-value,#chartlet-1ab8442d04b177cc-m .chartlet-value-inverse{font-weight:600}#chartlet-1ab8442d04b177cc-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-1ab8442d04b177cc-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-1ab8442d04b177cc-m .chartlet-axis-title{font-weight:600}#chartlet-1ab8442d04b177cc-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1ab8442d04b177cc-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-1ab8442d04b177cc-m .chartlet-bar,#chartlet-1ab8442d04b177cc-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-1ab8442d04b177cc-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-1ab8442d04b177cc-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-1ab8442d04b177cc-m .chartlet-polar-ring{fill:none;stroke:var(--chartlet-grid);stroke-width:1}#chartlet-1ab8442d04b177cc-m .chartlet-polar-bar{fill:var(--chartlet-color-1);stroke:none}#chartlet-1ab8442d04b177cc-m .chartlet-polar-stem{stroke:var(--chartlet-color-1);stroke-width:2}#chartlet-1ab8442d04b177cc-m .chartlet-polar-dot{fill:var(--chartlet-color-1);stroke:var(--chartlet-background);stroke-width:1.5}#chartlet-1ab8442d04b177cc-m .chartlet-polar-tick{font-size:11px;fill:var(--chartlet-muted);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-1ab8442d04b177cc-m .chartlet-title-small{font-size:18px}</style><circle cx="190" cy="210" r="34.25" class="chartlet-polar-ring"/><circle cx="190" cy="210" r="68.5" class="chartlet-polar-ring"/><circle cx="190" cy="210" r="102.75" class="chartlet-polar-ring"/><circle cx="190" cy="210" r="137" class="chartlet-polar-ring"/><polyline points="190,210 175.188,140.317 178.446,139.703 181.73,139.242 185.031,138.934 188.342,138.779 191.658,138.779 194.969,138.934 198.27,139.242 201.554,139.703 204.812,140.317 190,210" class="chartlet-polar-bar"><title>Jan: 52</title></polyline><polyline points="190,210 207.357,156.579 209.824,157.445 212.248,158.424 214.623,159.515 216.945,160.715 219.209,162.022 221.41,163.433 223.542,164.945 225.602,166.554 227.585,168.258 190,210" class="chartlet-polar-bar"><title>Feb: 41</title></polyline><polyline points="190,210 237.851,166.915 239.804,169.188 241.649,171.549 243.382,173.994 244.999,176.516 246.497,179.111 247.873,181.773 249.124,184.496 250.246,187.275 251.239,190.102 190,210" class="chartlet-polar-bar"><title>Mar: 47</title></polyline><polyline points="190,210 247.623,197.752 248.13,200.446 248.512,203.161 248.766,205.891 248.894,208.629 248.894,211.371 248.766,214.109 248.512,216.839 248.13,219.554 247.623,222.248 190,210" class="chartlet-polar-bar"><title>Apr: 43</title></polyline><polyline points="190,210 270.783,236.248 269.474,239.978 267.993,243.643 266.344,247.235 264.529,250.747 262.552,254.17 260.418,257.498 258.132,260.723 255.699,263.838 253.123,266.836 190,210" class="chartlet-polar-bar"><title>May: 62</title></polyline><polyline points="190,210 261.503,289.412 257.731,292.653 253.812,295.715 249.755,298.591 245.569,301.275 241.262,303.762 236.844,306.045 232.325,308.121 227.714,309.984 223.022,311.63 190,210" class="chartlet-polar-bar"><title>Jun: 78</title></polyline><polyline points="190,210 214.211,323.905 208.886,324.908 203.519,325.663 198.123,326.166 192.71,326.418 187.29,326.418 181.877,326.166 176.481,325.663 171.114,324.908 165.789,323.905 190,210" class="chartlet-polar-bar"><title>Jul: 85</title></polyline><polyline points="190,210 159.942,302.509 155.67,301.011 151.473,299.315 147.36,297.426 143.338,295.347 139.418,293.084 135.607,290.64 131.914,288.023 128.347,285.236 124.914,282.286 190,210" class="chartlet-polar-bar"><title>Aug: 71</title></polyline><polyline points="190,210 130.95,263.169 128.54,260.364 126.263,257.45 124.125,254.433 122.129,251.32 120.28,248.118 118.582,244.833 117.039,241.472 115.653,238.044 114.429,234.554 190,210" class="chartlet-polar-bar"><title>Sep: 58</title></polyline><polyline points="190,210 116.297,225.666 115.648,222.22 115.159,218.748 114.834,215.256 114.67,211.753 114.67,208.247 114.834,204.744 115.159,201.252 115.648,197.78 116.297,194.334 190,210" class="chartlet-polar-bar"><title>Oct: 55</title></polyline><polyline points="190,210 111.823,184.599 113.09,180.989 114.523,177.442 116.119,173.966 117.876,170.568 119.788,167.255 121.853,164.034 124.065,160.914 126.421,157.899 128.913,154.997 190,210" class="chartlet-polar-bar"><title>Nov: 60</title></polyline><polyline points="190,210 137.748,151.968 140.504,149.6 143.368,147.362 146.333,145.26 149.392,143.299 152.539,141.482 155.768,139.813 159.07,138.297 162.44,136.935 165.869,135.732 190,210" class="chartlet-polar-bar"><title>Dec: 57</title></polyline><text x="194" y="172.75" text-anchor="start" class="chartlet-polar-tick">25</text><text x="194" y="138.5" text-anchor="start" class="chartlet-polar-tick">50</text><text x="194" y="104.25" text-anchor="start" class="chartlet-polar-tick">75</text><text x="194" y="70" text-anchor="start" class="chartlet-polar-tick">100</text><text x="190" y="55" text-anchor="middle" class="chartlet-label">Jan</text><text x="263.5" y="80.694" text-anchor="start" class="chartlet-label">Feb</text><text x="317.306" y="134.5" text-anchor="start" class="chartlet-label">Mar</text><text x="337" y="214" text-anchor="start" class="chartlet-label">Apr</text><text x="317.306" y="293.5" text-anchor="start" class="chartlet-label">May</text><text x="263.5" y="347.306" text-anchor="start" class="chartlet-label">Jun</text><text x="190" y="367" text-anchor="middle" class="chartlet-label">Jul</text><text x="116.5" y="347.306" text-anchor="end" class="chartlet-label">Aug</text><text x="62.694" y="293.5" text-anchor="end" class="chartlet-label">Sep</text><text x="43" y="214" text-anchor="end" class="chartlet-label">Oct</text><text x="62.694" y="134.5" text-anchor="end" class="chartlet-label">Nov</text><text x="116.5" y="80.694" text-anchor="end" class="chartlet-label">Dec</text></svg></div><p class="chartlet-source">Source: Illustrative monthly totals of one weather station</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Rainfall by month</caption><thead><tr><th scope="col">Category</th><th scope="col">Millimeters</th></tr></thead><tbody><tr><th scope="row">Jan</th><td>52</td></tr><tr><th scope="row">Feb</th><td>41</td></tr><tr><th scope="row">Mar</th><td>47</td></tr><tr><th scope="row">Apr</th><td>43</td></tr><tr><th scope="row">May</th><td>62</td></tr><tr><th scope="row">Jun</th><td>78</td></tr><tr><th scope="row">Jul</th><td>85</td></tr><tr><th scope="row">Aug</th><td>71</td></tr><tr><th scope="row">Sep</th><td>58</td></tr><tr><th scope="row">Oct</th><td>55</td></tr><tr><th scope="row">Nov</th><td>60</td></tr><tr><th scope="row">Dec</th><td>57</td></tr></tbody></table></details></figure></div>