Gallery
Let's look at the different chart types that are available to users.
Bar chart
Chart2Music JSON
{
"type": "bar",
"title": "Moons",
"info": {
"notes": [
"Source: NASA Science, Moons of Our Solar System, https://science.nasa.gov/solar-system/moons/"
]
},
"axes": {
"x": {
"label": "Planets",
"valueLabels": ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"]
},
"y": {
"label": "Number of Moons"
}
},
"data": [0, 0, 1, 2, 95, 146, 28, 16]
}
Floating bar chart
Floating bar charts use high and low values to draw bars that start and end away from zero. This example uses daily low and high temperatures.
Chart2Music JSON
{
"type": "bar",
"title": "Daily temperature range",
"info": {
"notes": [
"Source: Synthetic sample data created for the Chart2Music documentation; no external dataset."
]
},
"axes": {
"x": {
"label": "Day",
"valueLabels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
},
"y": {
"label": "Temperature"
}
},
"data": [
{ "x": 0, "low": 58, "high": 74 },
{ "x": 1, "low": 61, "high": 79 },
{ "x": 2, "low": 63, "high": 82 },
{ "x": 3, "low": 60, "high": 76 },
{ "x": 4, "low": 57, "high": 72 },
{ "x": 5, "low": 55, "high": 69 },
{ "x": 6, "low": 59, "high": 73 }
]
}
Histogram
Chart2Music JSON
{
"type": "bar",
"title": "US Population Age Distribution (2023)",
"info": {
"notes": [
"Source: U.S. Census Bureau, National Population by Characteristics: 2020-2025, https://www.census.gov/data/tables/time-series/demo/popest/2020s-national-detail.html"
]
},
"axes": {
"x": {
"label": "Age range",
"valueLabels": [
"0 - 4",
"5 - 9",
"10 - 14",
"15 - 19",
"20 - 24",
"25 - 29",
"30 - 34",
"35 - 39",
"40 - 44",
"45 - 49",
"50 - 54",
"55 - 59",
"60 - 64",
"65 - 69",
"70 - 74",
"75 - 79",
"80 - 84",
"85+"
]
},
"y": {
"label": "Estimated Population"
}
},
"data": [
18473000,
19929000,
20698000,
21577000,
22281000,
21788000,
23126000,
22178000,
21309000,
19537000,
20465000,
20380000,
21007000,
18417000,
15599000,
10851000,
6970000,
6047000
]
}
Pie chart
Chart2Music JSON
{
"type": "pie",
"title": "Where do Canadians live?",
"info": {
"notes": [
"Source: Statistics Canada, Population and dwelling counts: Canada, provinces and territories, 2021 Census, https://www150.statcan.gc.ca/t1/tbl1/en/tv.action?pid=9810000101"
]
},
"axes": {
"x": {
"label": "Province",
"valueLabels": [
"Ontario",
"Quebec",
"British Columbia",
"Alberta",
"Manitoba",
"Sasketchewan",
"Nova Scotia",
"New Brunswick",
"Newfoundland and Labrador",
"Prince Edward Island",
"Northwest Terrirotries",
"Yukon",
"Nunavut"
]
},
"y": {
"label": "Population (2021)"
}
},
"data": [14223942, 8501833, 5000879, 4262635, 1342153, 1132505, 969383, 775610, 510550, 154331, 41070, 40232, 36858]
}
Line chart
Chart2Music JSON
{
"type": "line",
"title": "US Census",
"info": {
"notes": [
"Source: U.S. Census Bureau, Historical Population Change Data, https://www.census.gov/data/tables/time-series/dec/popchange-data-text.html"
]
},
"axes": {
"x": {
"label": "Year"
},
"y": {
"label": "US Population"
}
},
"data": [
{ "x": 1790, "y": 3929214 },
{ "x": 1800, "y": 5308483 },
{ "x": 1810, "y": 7239881 },
{ "x": 1820, "y": 9638453 },
{ "x": 1830, "y": 12866020 },
{ "x": 1840, "y": 17069453 },
{ "x": 1850, "y": 23191876 },
{ "x": 1860, "y": 31443321 },
{ "x": 1870, "y": 38558371 },
{ "x": 1880, "y": 50189209 },
{ "x": 1890, "y": 62979766 },
{ "x": 1900, "y": 76212168 },
{ "x": 1910, "y": 92228531 },
{ "x": 1920, "y": 106021568 },
{ "x": 1930, "y": 123202660 },
{ "x": 1940, "y": 132165129 },
{ "x": 1950, "y": 151325798 },
{ "x": 1960, "y": 179323175 },
{ "x": 1970, "y": 203211926 },
{ "x": 1980, "y": 226545805 },
{ "x": 1990, "y": 248709873 },
{ "x": 2000, "y": 281421906 },
{ "x": 2010, "y": 308745538 },
{ "x": 2020, "y": 331449281 }
]
}
Band plot
Band plots use high and low values for each point. The data shape is documented in More complex chart types.
Chart2Music JSON
{
"type": "band",
"title": "Daily forecast range",
"info": {
"notes": [
"Source: Synthetic sample data created for the Chart2Music documentation; no external dataset."
]
},
"axes": {
"x": {
"label": "Day",
"valueLabels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
},
"y": {
"label": "Temperature"
}
},
"data": [
{ "x": 0, "low": 58, "high": 74 },
{ "x": 1, "low": 61, "high": 79 },
{ "x": 2, "low": 63, "high": 82 },
{ "x": 3, "low": 60, "high": 76 },
{ "x": 4, "low": 57, "high": 72 },
{ "x": 5, "low": 55, "high": 69 },
{ "x": 6, "low": 59, "high": 73 }
]
}
Candlestick
Candlestick charts use open, high, low, and close values. They are helpful for financial charts and other ranges where the start and end values both matter.
Chart2Music JSON
{
"type": "candlestick",
"title": "Sample stock prices",
"info": {
"notes": [
"Source: Synthetic sample data created for the Chart2Music documentation; no external dataset."
]
},
"axes": {
"x": {
"label": "Day",
"valueLabels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
},
"y": {
"label": "Price"
}
},
"data": [
{ "x": 0, "open": 102, "high": 110, "low": 98, "close": 106 },
{ "x": 1, "open": 106, "high": 112, "low": 101, "close": 103 },
{ "x": 2, "open": 103, "high": 108, "low": 99, "close": 107 },
{ "x": 3, "open": 107, "high": 115, "low": 104, "close": 113 },
{ "x": 4, "open": 113, "high": 117, "low": 109, "close": 111 }
]
}
Box
Chart2Music JSON
{
"type": "box",
"title": "Weekly earnings by education",
"info": {
"notes": [
"Source: U.S. Bureau of Labor Statistics, Table 5. Quartiles and selected deciles of usual weekly earnings of full-time wage and salary workers by selected characteristics, first quarter 2026 averages, not seasonally adjusted, https://www.bls.gov/news.release/wkyeng.t05.htm"
]
},
"axes": {
"x": {
"valueLabels": ["All people 25+", "Bachelor's degree or higher"]
},
"y": {
"label": "Usual weekly earnings"
}
},
"data": [
{
"x": 0,
"low": 664,
"q1": 887,
"median": 1295,
"q3": 1995,
"high": 3031
},
{
"x": 1,
"low": 870,
"q1": 1182,
"median": 1763,
"q3": 2677,
"high": 3896
}
]
}
Scatter
Chart2Music JSON
{
"type": "scatter",
"title": "European country land area and population",
"info": {
"notes": [
"Source: World Bank World Development Indicators. Land area uses AG.LND.TOTL.K2 for 2023; population uses SP.POP.TOTL for 2024. https://api.worldbank.org/v2/"
]
},
"axes": {
"x": {
"label": "Land area in square kilometers"
},
"y": {
"label": "Population"
}
},
"data": [
{ "label": "Austria", "x": 82520, "y": 9177982 },
{ "label": "Belgium", "x": 30494, "y": 11858610 },
{ "label": "Bulgaria", "x": 108560, "y": 6441421 },
{ "label": "Switzerland", "x": 39509.63, "y": 9005582 },
{ "label": "Czechia", "x": 77167.31, "y": 10905028 },
{ "label": "Germany", "x": 349430, "y": 83516593 },
{ "label": "Denmark", "x": 40000, "y": 5976992 },
{ "label": "Spain", "x": 499697.4, "y": 48848840 },
{ "label": "Finland", "x": 303960, "y": 5619911 },
{ "label": "France", "x": 538950, "y": 68551653 },
{ "label": "Greece", "x": 128900, "y": 10405134 },
{ "label": "Hungary", "x": 91260, "y": 9562065 },
{ "label": "Ireland", "x": 68890, "y": 5395790 },
{ "label": "Italy", "x": 295720, "y": 58952704 },
{ "label": "Netherlands", "x": 33670, "y": 17993485 },
{ "label": "Norway", "x": 364270, "y": 5572279 },
{ "label": "Poland", "x": 306270, "y": 36559233 },
{ "label": "Portugal", "x": 91605.6, "y": 10694681 },
{ "label": "Romania", "x": 230080, "y": 19051804 },
{ "label": "Sweden", "x": 407270, "y": 10569709 }
]
}
Matrix
Matrix charts can represent heatmaps and correlation matrices. Use type: "matrix" and provide rows of values for each group.
Fruit preference by age group
Apples
Bananas
Oranges
18-29
42
37
29
30-49
35
44
32
50+
28
31
46
Chart2Music JSON
{
"type": "matrix",
"title": "Fruit preference by age group",
"info": {
"notes": [
"Source: Synthetic sample data created for the Chart2Music documentation; no external dataset."
]
},
"axes": {
"x": {
"label": "Fruit",
"valueLabels": ["Apples", "Bananas", "Oranges"]
},
"y": {
"label": "Age group",
"valueLabels": ["18-29", "30-49", "50+"]
}
},
"data": {
"18-29": [42, 37, 29],
"30-49": [35, 44, 32],
"50+": [28, 31, 46]
}
}
Polyaxial
Polyaxial charts are proposed for chart families such as radar charts and parallel coordinates plots where each named measurement has its own axis.
This chart type is not supported by the current Chart2Music validator yet. The example below documents the intended shape and is covered by a test stub that records the current validation failures.
c2mChart({
type: "polyaxial",
title: "Service quality comparison",
axes: {
latency: {
minimum: 0,
maximum: 500,
format: (val) => `${val} ms`,
},
revenue: {
minimum: 0,
maximum: 1000,
format: (val) => `$${val * 1000}`,
},
error: {
minimum: 0,
maximum: 5,
format: (val) => `${val}%`,
},
satisfaction: {
minimum: 0,
maximum: 10,
format: (val) => `${val} of 10`,
},
coverage: {
minimum: 0,
maximum: 1,
format: (val) => `${val * 100}%`,
},
},
data: {
A: {
latency: 180,
revenue: 640,
error: 1.8,
satisfaction: 8.7,
coverage: 0.92,
},
B: {
latency: 240,
revenue: 720,
error: 1.2,
satisfaction: 8.1,
coverage: 0.88,
},
},
});
Treemap
World
Chart2Music JSON
{
"type": "treemap",
"title": "World population by region",
"info": {
"notes": [
"Source: United Nations, World Population Prospects 2024; regional and country values rounded for documentation, https://population.un.org/wpp/"
]
},
"axes": {
"x": {
"label": "Region",
"valueLabels": ["Africa", "Americas", "Asia", "Europe"]
},
"y": {
"label": "Population in millions"
}
},
"data": {
"world": [
{ "x": 0, "y": 1460, "label": "Africa", "children": "africa" },
{ "x": 1, "y": 1030, "label": "Americas", "children": "americas" },
{ "x": 2, "y": 4750, "label": "Asia", "children": "asia" },
{ "x": 3, "y": 742, "label": "Europe", "children": "europe" }
],
"africa": [
{ "x": 0, "y": 224, "label": "Nigeria" },
{ "x": 1, "y": 126, "label": "Ethiopia" },
{ "x": 2, "y": 112, "label": "Egypt" }
],
"americas": [
{ "x": 0, "y": 335, "label": "United States" },
{ "x": 1, "y": 216, "label": "Brazil" },
{ "x": 2, "y": 129, "label": "Mexico" }
],
"asia": [
{ "x": 0, "y": 1430, "label": "India" },
{ "x": 1, "y": 1420, "label": "China" },
{ "x": 2, "y": 278, "label": "Indonesia" }
],
"europe": [
{ "x": 0, "y": 144, "label": "Russia" },
{ "x": 1, "y": 84, "label": "Germany" },
{ "x": 2, "y": 68, "label": "United Kingdom" }
]
},
"options": {
"root": "world"
}
}