Reference - Data types - csv

{chart 'area',
       label='year',
       value='desktop, mobile, tablet',
       percent,
       title='Share of web visits by device',
       width=640,
       height=320}
  year,desktop,mobile,tablet
  2012,1820,210,95
  2013,1790,390,160
  2014,1750,610,230
  2015,1700,890,260
  2016,1640,1210,250
  2017,1580,1540,235
  2018,1510,1860,215
  2019,1450,2150,190
  2020,1520,2380,180
  2021,1430,2620,165
  2022,1380,2810,150
  2023,1340,2990,140
  2024,1300,3150,130
{/chart}

{chart 'area',
       label='year',
       value='coal, gas, nuclear, wind, solar',
       stacked,
       title='Electricity generated by source, in TWh',
       width=640,
       height=340}
  year,coal,gas,nuclear,wind,solar
  2010,310,250,140,40,12
  2011,300,235,138,48,20
  2012,315,205,136,55,28
  2013,305,190,135,62,32
  2014,285,180,134,70,36
  2015,265,195,132,82,40
  2016,225,230,130,90,44
  2017,210,240,128,105,48
  2018,195,235,127,115,53
  2019,150,255,125,130,60
  2020,125,245,118,145,70
  2021,140,235,120,140,82
  2022,150,205,110,155,100
  2023,110,190,112,175,118
  2024,90,180,112,190,135
{/chart}

{chart 'bar',
       label='month',
       value='amount',
       title='Sales per month',
       width=640,
       height=340}
  month,amount
  Jan,12400
  Feb,9500
  Mar,14300
  Apr,16100
  May,15200
  Jun,18750
{/chart}

{chart 'waterfall',
       label='step',
       value='amount',
       total='Profit',
       title='From revenue to profit, in thousands',
       width=640,
       height=340}
  step,amount
  Revenue,420
  Cost of sales,-180
  Salaries,-120
  Rent,-24
  Tax,-35
  Subsidy,12
{/chart}

{chart 'dual',
       label='month',
       value='revenue',
       line='margin',
       title='Revenue in thousands, and the margin in percent',
       width=640,
       height=340}
  month,revenue,margin
  Jan,182,12.5
  Feb,175,11.8
  Mar,214,14.2
  Apr,226,15.1
  May,248,16.4
  Jun,265,17.9
  Jul,231,15.2
  Aug,198,13.1
  Sep,252,16.8
  Oct,274,18.4
  Nov,318,19.6
  Dec,356,17.2
{/chart}

{chart 'pyramid',
       label='group',
       value='share',
       title='A day of food, share of the plate',
       width=560,
       height=340}
  group,share
  Fats and sweets,5
  Dairy,12
  Meat fish and beans,13
  Grains,30
  Vegetables and fruit,40
{/chart}

{chart 'pyramid',
       label='age',
       value='men, women',
       title='Population by age, in thousands',
       width=600,
       height=420}
  age,men,women
  0-9,512,488
  10-19,548,521
  20-29,601,584
  30-39,636,622
  40-49,598,590
  50-59,655,651
  60-69,540,566
  70-79,372,421
  80-89,148,226
  90+,24,61
{/chart}

{chart 'funnel',
       label='step',
       value='visitors',
       title='A month in a web shop, from visit to payment',
       width=600,
       height=320}
  step,visitors
  Visited the shop,48200
  Viewed a product,29650
  Added to the cart,8740
  Started checkout,4310
  Paid,3180
{/chart}

{chart 'gantt',
       label='task',
       from='begin',
       to='until',
       progress='done',
       mark='2026-03-20',
       title='A new website, done so far',
       width=640,
       height=320}
  task,begin,until,done
  Interviews,2026-01-12,2026-01-30,100
  Design,2026-01-26,2026-02-27,100
  Content,2026-02-16,2026-03-27,70
  Build,2026-02-23,2026-04-17,45
  Testing,2026-04-06,2026-04-30,0
  Launch,2026-05-01,2026-05-04,0
{/chart}

{chart 'orgchart',
       id='id',
       parent='boss',
       label='name',
       sub='role',
       title='Who reports to whom in a small software company',
       width=720,
       height=360}
  id,boss,name,role
  1,,Maria Jansen,Director
  2,1,Tom de Vries,Engineering
  3,1,Sara Bakker,Sales
  4,1,Yusuf Demir,Finance
  5,2,Lena Visser,Backend lead
  6,2,Omar Haddad,Frontend lead
  7,5,Pieter Smit,Developer
  8,5,Anouk Mulder,Developer
  9,6,Ravi Kumar,Developer
  10,6,Eva Bos,Designer
  11,3,Daan Meijer,Account manager
  12,3,Julia Peters,Account manager
  13,4,Noor el Amrani,Controller
  14,2,Kees Dekker,Tester
{/chart}

<main class="page home">

  <section class="hero">
    <div class="hero-text">
      <span class="kicker">PAD · {ignore}{chart}{/ignore}</span>
      <h1>Every chart,<br><span class="shine">drawn on the server.</span></h1>
      <p class="lead">One tag turns rows of JSON, YAML, CSV or PHP into an accessible SVG chart -
      lines, areas, streams, bars, funnels, pyramids, waterfalls, pies, waffles, marimekkos,
      parliaments, venns, gauges, radars, roses, bullets, histograms, violins, scatters, heatmaps,
      candlesticks, spirals, sankeys, chords, networks, treemaps, packs, org charts and gantt
      charts. No JavaScript, so it prints, caches and shows up in an e-mail.</p>
      <ul class="stats">
        <li><b>46</b> kinds</li>
        <li><b>{$exampleCount}</b> examples</li>
        <li><b>0</b> lines of JavaScript</li>
      </ul>
    </div>
    <a class="hero-card" href="?sankey/energy" aria-label="Open the energy sankey">
      {page 'sankey/energy'}
    </a>
  </section>

  {families}
  <section class="family" id="{$family}">
    <header class="family-head">
      <h2>{$label}</h2>
      <span class="family-line">{$tagline}</span>
    </header>
    <div class="cards">
      {examples}
      <a class="card" href="?{$page}">
        <span class="card-chart">{page $page}</span>
        <span class="card-body">
          <span class="card-title">{$title}</span>
          <span class="card-text">{$text}</span>
        </span>
      </a>
      {/examples}
    </div>
  </section>
  {/families}

</main>

{chart 'rings',
       label='ring',
       value='done',
       to='goal',
       title='Today\'s activity against its goals',
       width=520,
       height=280}
  ring,done,goal
  Move (kcal),468,600
  Exercise (min),34,30
  Stand (hours),9,12
{/chart}

{chart 'proportional',
       label='country',
       value='mt',
       title='CO₂ from fossil fuels in 2022, in million tonnes',
       width=680,
       height=340}
  country,mt
  China,11397
  United States,5057
  India,2830
  Russia,1652
  Japan,1054
  Iran,691
  Germany,666
  Saudi Arabia,663
  South Korea,601
  Canada,548
  Brazil,484
  United Kingdom,320
{/chart}

{chart 'bullet',
       label='kpi',
       value='actual',
       target='goal',
       bands='poor, fair',
       to='max',
       title='The quarter against its targets',
       width=640,
       height=300}
  kpi,actual,goal,poor,fair,max
  Revenue (k€),1240,1400,900,1200,1600
  Profit (k€),182,160,100,150,250
  Satisfaction (1-5),4.1,4.4,3,4,5
  New customers,318,300,200,280,400
  On time (%),91,95,80,90,100
{/chart}

{chart 'waffle',
       label='use',
       value='kwh',
       title='Where the energy of a home goes, kWh a year',
       width=520,
       height=280}
  use,kwh
  Heating,11800
  Hot water,3200
  Appliances,2350
  Cooking,640
  Lighting,520
  Standby,310
{/chart}