chartletv0.1.0-alpha.3

Showcase

Each example shows real output produced by chartlet itself, from files in the project repository. Input on the left, output on the right.

Monthly revenue

examples/monthly-revenue.jsonDetail →
{
  "schemaVersion": 1,
  "type": "bar",
  "title": "Monthly revenue",
  "description": "Revenue increased in February and remained above January in March.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Month"
  },
  "valueAxis": {
    "title": "Revenue in thousands",
    "format": "number"
  },
  "data": [
    {
      "label": "January",
      "value": 120
    },
    {
      "label": "February",
      "value": 180
    },
    {
      "label": "March",
      "value": 150
    }
  ]
}
Monthly revenue
Monthly revenueRevenue increased in February and remained above January in March.Monthly revenue050100150200Revenue in thousandsJanuary: 120120JanuaryFebruary: 180180FebruaryMarch: 150150MarchMonth

Source: Example data

Show chart data
Data for Monthly revenue
CategoryValue
January120
February180
March150
  • Bar (vertical)
  • Compare categories

Operating costs

examples/operating-costs.jsonDetail →
{
  "schemaVersion": 1,
  "type": "bar",
  "title": "Operating costs",
  "description": "Operating costs rose over the half year, with the steepest increase in June.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Month"
  },
  "valueAxis": {
    "title": "Costs in thousands",
    "format": "number"
  },
  "data": [
    {
      "label": "January",
      "value": 84
    },
    {
      "label": "February",
      "value": 86
    },
    {
      "label": "March",
      "value": 92
    },
    {
      "label": "April",
      "value": 89
    },
    {
      "label": "May",
      "value": 96
    },
    {
      "label": "June",
      "value": 101
    }
  ]
}
Operating costs
Operating costsOperating costs rose over the half year, with the steepest increase in June.Operating costs050100150Costs in thousandsJanuary: 8484JanuaryFebruary: 8686FebruaryMarch: 9292MarchApril: 8989AprilMay: 9696MayJune: 101101JuneMonth

Source: Example data

Show chart data
Data for Operating costs
CategoryValue
January84
February86
March92
April89
May96
June101
  • Bar (vertical)
  • Track a cost trend

Quarterly change

examples/quarterly-change.jsonDetail →
{
  "schemaVersion": 1,
  "type": "bar",
  "orientation": "horizontal",
  "title": "Quarterly change",
  "source": "Example data",
  "categoryAxis": {
    "title": "Quarter"
  },
  "valueAxis": {
    "title": "Change",
    "format": "percent"
  },
  "data": [
    {
      "label": "First quarter",
      "value": 0.12
    },
    {
      "label": "Second quarter",
      "value": -0.04
    },
    {
      "label": "Third quarter with a deliberately long label",
      "value": 0.08
    },
    {
      "label": "Fourth quarter",
      "value": 0.15
    }
  ]
}
Quarterly change
Quarterly changeBar chart with 4 categories. Highest: 15% (Fourth quarter). Lowest: -4% (Second quarter).Quarterly change-5%0%5%10%15%ChangeQuarterFirst quarter: 12%12%First quarterSecond quarter: -4%-4%Second quarterThird quarter with a deliberately long label: 8%8%Third quarter with a deliber…Fourth quarter: 15%15%Fourth quarter

Source: Example data

Show chart data
Data for Quarterly change
CategoryValue
First quarter12%
Second quarter-4%
Third quarter with a deliberately long label8%
Fourth quarter15%
  • Bar (horizontal)
  • Show change and deviation

Signup conversion by page

examples/signup-conversion.jsonDetail →
{
  "schemaVersion": 1,
  "type": "bar",
  "orientation": "horizontal",
  "title": "Signup conversion by page",
  "description": "The referral page converts best, the blog worst.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Page"
  },
  "valueAxis": {
    "title": "Conversion rate",
    "format": "percent"
  },
  "data": [
    {
      "label": "Pricing",
      "value": 0.042
    },
    {
      "label": "Home",
      "value": 0.061
    },
    {
      "label": "Docs",
      "value": 0.038
    },
    {
      "label": "Blog",
      "value": 0.055
    },
    {
      "label": "Referral",
      "value": 0.074
    }
  ]
}
Signup conversion by page
Signup conversion by pageThe referral page converts best, the blog worst.Signup conversion by page0%2%4%6%8%Conversion ratePagePricing: 4.2%4.2%PricingHome: 6.1%6.1%HomeDocs: 3.8%3.8%DocsBlog: 5.5%5.5%BlogReferral: 7.4%7.4%Referral

Source: Example data

Show chart data
Data for Signup conversion by page
CategoryValue
Pricing4.2%
Home6.1%
Docs3.8%
Blog5.5%
Referral7.4%
  • Bar (horizontal)
  • Compare rates

Budget and actual costs

examples/budget-vs-actual.jsonDetail →
{
  "schemaVersion": 1,
  "type": "bar",
  "title": "Budget and actual costs",
  "source": "Example data",
  "categoryAxis": {
    "title": "Month"
  },
  "valueAxis": {
    "title": "Costs in thousands"
  },
  "categories": [
    "January",
    "February",
    "March",
    "April"
  ],
  "series": [
    {
      "name": "Budget",
      "values": [
        120,
        150,
        140,
        160
      ]
    },
    {
      "name": "Actual",
      "values": [
        130,
        145,
        152,
        null
      ]
    }
  ]
}
Series
Budget and actual costs
Budget and actual costsBar chart with 4 categories and 2 series (Budget, Actual). Highest: 160 (Budget in April). Lowest: 120 (Budget in January). 1 value is missing.Budget and actual costs050100150200Costs in thousandsBudgetActualJanuary – Budget: 120120January – Actual: 130130JanuaryFebruary – Budget: 150150February – Actual: 145145FebruaryMarch – Budget: 140140March – Actual: 152152MarchApril – Budget: 160160AprilMonth

Source: Example data

Show chart data
Data for Budget and actual costs
CategoryBudgetActual
January120130
February150145
March140152
April160Missing
  • Grouped bar
  • Plan versus actual

Revenue by channel

examples/revenue-by-channel.jsonDetail →
{
  "schemaVersion": 1,
  "type": "bar",
  "title": "Revenue by channel",
  "description": "Direct revenue grew every quarter and stayed the largest channel.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Quarter"
  },
  "valueAxis": {
    "title": "Revenue in thousands",
    "format": "number"
  },
  "categories": [
    "Q1",
    "Q2",
    "Q3",
    "Q4"
  ],
  "series": [
    {
      "name": "Direct",
      "values": [
        420,
        455,
        480,
        512
      ]
    },
    {
      "name": "Partners",
      "values": [
        180,
        205,
        198,
        236
      ]
    },
    {
      "name": "Marketplace",
      "values": [
        96,
        88,
        121,
        140
      ]
    }
  ]
}
Series
Revenue by channel
Revenue by channelDirect revenue grew every quarter and stayed the largest channel.Revenue by channel0200400600Revenue in thousandsDirectPartnersMarketplaceQ1 – Direct: 420420Q1 – Partners: 180180Q1 – Marketplace: 9696Q1Q2 – Direct: 455455Q2 – Partners: 205205Q2 – Marketplace: 8888Q2Q3 – Direct: 480480Q3 – Partners: 198198Q3 – Marketplace: 121121Q3Q4 – Direct: 512512Q4 – Partners: 236236Q4 – Marketplace: 140140Q4Quarter

Source: Example data

Show chart data
Data for Revenue by channel
CategoryDirectPartnersMarketplace
Q142018096
Q245520588
Q3480198121
Q4512236140
  • Grouped bar
  • Break down by segment

Customer satisfaction by region

examples/csat-by-region.jsonDetail →
{
  "schemaVersion": 1,
  "type": "bar",
  "orientation": "horizontal",
  "title": "Customer satisfaction by region",
  "description": "Satisfaction improved in every region from 2025 to 2026.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Region"
  },
  "valueAxis": {
    "title": "Score out of 5",
    "format": "number"
  },
  "categories": [
    "North",
    "South",
    "East",
    "West"
  ],
  "series": [
    {
      "name": "2025",
      "values": [
        4.1,
        4.3,
        3.9,
        4.4
      ]
    },
    {
      "name": "2026",
      "values": [
        4.3,
        4.4,
        4.1,
        4.6
      ]
    }
  ]
}
Series
Customer satisfaction by region
Customer satisfaction by regionSatisfaction improved in every region from 2025 to 2026.Customer satisfaction by region012345Score out of 5Region20252026North – 2025: 4.14.1North – 2026: 4.34.3NorthSouth – 2025: 4.34.3South – 2026: 4.44.4SouthEast – 2025: 3.93.9East – 2026: 4.14.1EastWest – 2025: 4.44.4West – 2026: 4.64.6West

Source: Example data

Show chart data
Data for Customer satisfaction by region
Category20252026
North4.14.3
South4.34.4
East3.94.1
West4.44.6
  • Grouped bar (horizontal)
  • Compare across groups

Monthly active users

examples/monthly-trend.jsonDetail →
{
  "schemaVersion": 1,
  "type": "line",
  "title": "Monthly active users",
  "description": "Usage grew through May. April has no reported value and is shown as a gap.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Month"
  },
  "valueAxis": {
    "title": "Active users",
    "format": "number"
  },
  "data": [
    {
      "label": "January",
      "value": 1200
    },
    {
      "label": "February",
      "value": 1460
    },
    {
      "label": "March",
      "value": 1390
    },
    {
      "label": "April",
      "value": null
    },
    {
      "label": "May",
      "value": 1810
    },
    {
      "label": "June",
      "value": 2050
    }
  ]
}
Monthly active users
Monthly active usersUsage grew through May. April has no reported value and is shown as a gap.Monthly active users1000120014001600180020002200Active usersJanuary: 12001200JanuaryFebruary: 14601460FebruaryMarch: 13901390MarchAprilMay: 18101810MayJune: 20502050JuneMonth

Source: Example data

Show chart data
Data for Monthly active users
CategoryValue
January1200
February1460
March1390
AprilMissing
May1810
June2050
  • Line
  • Show a trend

Weekly support tickets

examples/support-volume.jsonDetail →
{
  "schemaVersion": 1,
  "type": "line",
  "title": "Weekly support tickets",
  "description": "Ticket volume dipped in week four and recovered afterwards, peaking in week eight.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Week"
  },
  "valueAxis": {
    "title": "Tickets",
    "format": "number"
  },
  "data": [
    {
      "label": "Week 1",
      "value": 128
    },
    {
      "label": "Week 2",
      "value": 134
    },
    {
      "label": "Week 3",
      "value": 121
    },
    {
      "label": "Week 4",
      "value": 96
    },
    {
      "label": "Week 5",
      "value": 142
    },
    {
      "label": "Week 6",
      "value": 158
    },
    {
      "label": "Week 7",
      "value": 149
    },
    {
      "label": "Week 8",
      "value": 163
    }
  ]
}
Weekly support tickets
Weekly support ticketsTicket volume dipped in week four and recovered afterwards, peaking in week eight.Weekly support tickets80100120140160180TicketsWeek 1: 128128Week 1Week 2: 134134Week 2Week 3: 121121Week 3Week 4: 9696Week 4Week 5: 142142Week 5Week 6: 158158Week 6Week 7: 149149Week 7Week 8: 163163Week 8Week

Source: Example data

Show chart data
Data for Weekly support tickets
CategoryValue
Week 1128
Week 2134
Week 3121
Week 496
Week 5142
Week 6158
Week 7149
Week 8163
  • Line
  • Track a metric

Headcount

examples/headcount.jsonDetail →
{
  "schemaVersion": 1,
  "type": "line",
  "title": "Headcount",
  "description": "Headcount rose steadily from January to August.",
  "source": "Example data",
  "categoryAxis": {
    "title": "Month"
  },
  "valueAxis": {
    "title": "Employees",
    "format": "number"
  },
  "data": [
    {
      "label": "January",
      "value": 42
    },
    {
      "label": "February",
      "value": 44
    },
    {
      "label": "March",
      "value": 47
    },
    {
      "label": "April",
      "value": 50
    },
    {
      "label": "May",
      "value": 54
    },
    {
      "label": "June",
      "value": 58
    },
    {
      "label": "July",
      "value": 61
    },
    {
      "label": "August",
      "value": 66
    }
  ],
  "zoomSteps": [
    {
      "label": "All months",
      "from": 0,
      "to": 7
    },
    {
      "label": "January to April",
      "from": 0,
      "to": 3
    },
    {
      "label": "May to August",
      "from": 4,
      "to": 7
    }
  ]
}
View
Headcount
HeadcountHeadcount rose steadily from January to August.Headcount40506070EmployeesJanuary: 4242JanuaryFebruary: 4444FebruaryMarch: 4747MarchApril: 5050AprilMay: 5454MayJune: 5858JuneJuly: 6161JulyAugust: 6666AugustMonth
HeadcountHeadcount rose steadily from January to August.Headcount40424446485052EmployeesJanuary: 4242JanuaryFebruary: 4444FebruaryMarch: 4747MarchApril: 5050AprilMonth
HeadcountHeadcount rose steadily from January to August.Headcount5055606570EmployeesMay: 5454MayJune: 5858JuneJuly: 6161JulyAugust: 6666AugustMonth

Source: Example data

Show chart data
Data for Headcount
CategoryValue
January42
February44
March47
April50
May54
June58
July61
August66
  • Line
  • Show growth