How to transpose json arrays for chart.js, d3, and plotly
- Step 1
- Step 2Drop the data-point array — Drag the
.jsonfile holding your chart data onto the dropzone. The input must be a top-level array of objects, one object per data point (e.g.[{ "month": "Jan", "sales": 120 }, ...]). - Step 3Select Array → columnar — Pick the Array → columnar radio (
pivot-to-columnar) — the rows-to-columns direction, hinted as 'Array of records → columns object'. - Step 4Click Transpose — Press Transpose. Each field becomes one array: your category field becomes the
labels/x array and each metric becomes a series array, all in input order. - Step 5Confirm alignment — Check that the label column and every series column have equal length. If a series is short, a data point was missing that field — fix the source so every point has every series key, then re-run so axes stay aligned.
- Step 6Paste into your chart — Copy the relevant column array into your Chart.js dataset
data, D3 accessor, or Plotly tracex/y. Use Download to keep<name>.transposed.jsonfor a build step.
Where each transposed column goes per library
After Array → columnar, you have one array per field. This maps the columns onto the common chart libraries. The tool produces the JSON; you wire the arrays into the config.
| Library | Category column → | Metric column → | Notes |
|---|---|---|---|
| Chart.js | data.labels | datasets[n].data | One dataset per metric column; arrays must match labels length |
| Plotly | trace x | trace y | One trace object per series; x/y are parallel arrays |
| D3 | xScale domain source | value accessor array | Bind the column arrays or zip them back into points as needed |
| Recharts | rebuild row objects | rebuild row objects | Recharts wants row objects — use Columnar → array instead, or skip transposing |
Row array vs. columnar output
The same three data points before and after Array → columnar. The columnar form drops straight into Chart.js / Plotly; the row form needs a per-series map.
| Field | Row input (per object) | Columnar output (one array) | Chart use |
|---|---|---|---|
| month | "Jan", "Feb", "Mar" | ["Jan","Feb","Mar"] | x-axis / labels |
| sales | 120, 135, 98 | [120,135,98] | series 1 data |
| target | 100, 100, 120 | [100,100,120] | series 2 data |
| alignment | index per object | index across arrays | must stay equal length |
Cookbook
Before/after JSON for chart prep. Each shows the dropped row array and the column arrays you copy into a chart config, formatted with the tool's 2-space indentation.
Line chart: months + two series
ExampleA monthly sales feed becomes labels + two data arrays for a Chart.js or Plotly multi-series chart.
Input (monthly.json):
[
{ "month": "Jan", "sales": 120, "target": 100 },
{ "month": "Feb", "sales": 135, "target": 100 },
{ "month": "Mar", "sales": 98, "target": 120 }
]
Mode: Array → columnar
Output:
{
"month": ["Jan", "Feb", "Mar"],
"sales": [120, 135, 98],
"target": [100, 100, 120]
}
// labels = month ; datasets[0].data = sales ; datasets[1].data = targetPlotly scatter: x/y from a points array
ExampleAn event log of (x, y) points becomes two parallel arrays for a single Plotly trace.
Input (points.json):
[
{ "x": 0.1, "y": 2.4 },
{ "x": 0.4, "y": 3.1 },
{ "x": 0.9, "y": 1.8 }
]
Mode: Array → columnar
Output:
{
"x": [0.1, 0.4, 0.9],
"y": [2.4, 3.1, 1.8]
}
// trace = { x: out.x, y: out.y, mode: "markers" }Numbers stay numeric for auto-scaling
ExampleBecause values are not coerced to strings, Chart.js and Plotly auto-range the axis numerically instead of treating points as discrete categories.
Input:
[
{ "t": 1, "v": 12.5 },
{ "t": 2, "v": 18.0 }
]
Mode: Array → columnar
Output:
{
"t": [1, 2],
"v": [12.5, 18]
}Missing series value shifts the line
ExampleIf one data point lacks a series field, that series column is short and every later point shifts left — the line no longer matches its labels.
Input (Feb has no sales):
[
{ "month": "Jan", "sales": 120 },
{ "month": "Feb" },
{ "month": "Mar", "sales": 98 }
]
Mode: Array → columnar
Output (sales has 2 points, month has 3 — DESYNCED):
{
"month": ["Jan", "Feb", "Mar"],
"sales": [120, 98]
}Back to rows for a Recharts/data table
ExampleRecharts and most table components want row objects. Columnar → array rebuilds them from your chart columns.
Input (columns.json):
{
"month": ["Jan", "Feb"],
"sales": [120, 135]
}
Mode: Columnar → array
Output:
[
{ "month": "Jan", "sales": 120 },
{ "month": "Feb", "sales": 135 }
]Errors and edge cases
Real errors and silent failures sourced from each platform's own documentation. Match the wording to the row, fix what the row says to fix.
Input is an object, not an array
RejectedArray → columnar throws pivot-to-columnar requires an array of objects. Chart data must be a top-level array of point objects. If you already have columns (an object of arrays), use Columnar → array to go back to rows instead.
A data point is missing a series field
DesyncedThe tool appends a value only when the key exists, so a missing series field yields a shorter column and shifts every later point left — the series no longer lines up with its labels. Ensure every point carries every series key before transposing.
Series with different point counts
MisalignedIf sales appears in 10 points and target in only 8, the two columns have different lengths and will not align on a shared x-axis. Normalize the data so all series cover the same points.
Nested value objects in points
PreservedA nested object like { "coord": { "lat": 1, "lng": 2 } } is copied into the column array as a whole object, not split into lat/lng columns. Flatten with json-flattener first if each axis needs its own column.
Array of bare numbers
Rejected[1, 2, 3] has no object keys to turn into named series, so the result is an empty object {}. Wrap each value in an object (e.g. { "v": 1 }) if you need a named column.
Empty array `[]`
ExpectedProduces {} with no error — there are no points to derive columns from. Useful as a sanity check that the file actually contained data.
String numbers ("120")
PreservedIf your source stored numbers as strings, they stay strings in the column array, which can make a chart axis categorical. Convert types upstream, or post-process, before charting.
Invalid JSON
Parse errorJSON.parse fails on malformed input and nothing is produced. Repair with json-format-fixer, then re-run.
Very large telemetry file
BlockedFiles above 2 MB are blocked on Free; Pro allows up to 100 MB. For million-point series, downsample before charting anyway — browsers struggle to render that many points.
Need rows for Recharts
Wrong directionRecharts consumes row objects, not column arrays. Either skip the transpose, or use Columnar → array to convert columnar data back into the records Recharts expects.
Frequently asked questions
Which mode produces chart-ready arrays?
Array → columnar (pivot-to-columnar). It turns your array of data points into one object where each field is a parallel array — ideal for Chart.js labels/data, Plotly x/y, or D3 accessors.
How do I map the output to Chart.js?
Use your category column as data.labels and each metric column as a datasets[n].data. All arrays preserve input order, so they line up with the labels point-for-point.
How do I map it to Plotly?
Each trace takes parallel x and y arrays — assign the relevant columns directly, e.g. { x: out.month, y: out.sales }. Add one trace per series column.
Why is my line off by one point?
A data point was missing that series' field, so the column came out short and every later value shifted left. Make sure every point includes every series key, then re-transpose.
Are numbers kept numeric?
Yes — values are not coerced. Numbers stay numbers so chart axes auto-range correctly. If your source stored numbers as strings, they will remain strings; fix the types upstream.
Can I prep data for Recharts?
Recharts wants row objects, not columns. Skip the transpose, or use Columnar → array to convert columnar data back into the records Recharts reads.
Does it flatten nested point objects?
No. A nested object stays a single value inside the column array. Run json-flattener first if each nested field needs its own series column.
Is there a minify option for the output?
No — the UI is just the three mode radios, and output uses 2-space indentation. Minify afterwards with json-minifier if you embed it in code.
What size files can I use?
Free accepts up to 2 MB of JSON; Pro up to 100 MB. The JSON Transposer is a Pro tool and requires a Pro plan to run.
Is my data uploaded anywhere?
No. The transpose runs in your browser; the file never leaves the tab.
Can I feed a CSV of chart data?
Not directly. Convert it with csv-to-json first, then transpose the resulting array of objects.
What if some points have extra fields?
Every field seen in any point becomes a column. A field present in only some points yields a shorter column than the others — normalize the points so all share the same series keys for clean charts.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.