spec-not-object
The spec must be a plain JSON object. You passed something else, such as a string, array, null or undefined. A common cause is passing the raw JSON text instead of parsing it.
el.spec = JSON.parse(text); // not the string itselfmissing-field
Every spec needs the required fields type, data, and y. Some types also require x or path. One of them is absent.
{ "type": "bar", "x": "month", "y": "revenue",
"data": [{ "month": "Jan", "revenue": 12 }] }unknown-type
spec.type must be one of bar, line, area, scatter, heatmap, waterfall, treemap, sunburst, sankey, or hexmap. The message suggests the closest match when there is one, or the module to import for unloaded types.
{ "type": "bar", ... }
// For treemap: import "mayacharts/hierarchy" firstdata-not-array
spec.data must be an array of row objects. An object keyed by category, or a JSON string, is not accepted.
data: Object.entries(totals).map(([month, revenue]) => ({ month, revenue }))row-not-object
Every entry in spec.data must be a plain object. Arrays, numbers and null rows are rejected; the message names the index.
data: [{ "month": "Jan", "revenue": 12 }] // not [["Jan", 12]]unknown-field
spec.x, spec.y, spec.series, spec.path, spec.size, spec.name, or spec.colorBy names a field that no row has. The message lists the fields found in your data. Check spelling and case.
// rows have "month" and "revenue"
{ "x": "month", "y": "revenue" }non-numeric-y
The y field must hold finite numbers. null and undefined are allowed and draw a gap. Numeric strings are rejected, so convert them first.
data.map(r => ({ ...r, revenue: Number(r.revenue) }))non-numeric-field
A numeric field (size for scatter, x for scatter, or colorBy when it names a field) must hold finite numbers. null and undefined are allowed. Convert numeric strings first.
// for scatter x domain
data.map(r => ({ ...r, population: Number(r.population) }))non-positive-value
Hierarchy and flow types (treemap, sunburst, sankey, chord) require positive y values (> 0) because area or width represents magnitude. Filter out zero and negative rows.
data: data.filter(r => r.revenue > 0)A funnel counts what remains at each stage, so its y values cannot be negative. Zero is allowed; the step after a zero shows no percentage.
data: data.filter(r => r.users >= 0)unknown-option
The spec has a top-level key that mayaCharts does not know. The message suggests the closest known option. Typos such as "stacked" instead of "stack" land here.
{ "stack": true } // not "stacked"invalid-option
A known option has the wrong type, for example a string where a boolean is expected, or colors that is not an array of strings.
{ "legend": true, "colors": ["#2563eb", "#f97316"] }option-unsupported
This option is not valid for the chosen chart type or in combination with other options. For example, size applies only to scatter charts, path cannot be used with x, and drill cannot be combined with select.
// scatter chart with size field
{ "type": "scatter", "x": "x", "y": "y", "size": "population", ... }
// bar chart with path instead of x
{ "type": "bar", "path": ["region", "state"], "y": "revenue", ... }stack-unsupported
Stacking is not defined for line charts. Use an area chart or a bar chart to stack series.
{ "type": "area", "stack": true, ... }invalid-domain
spec.yDomain or spec.xDomain must be [min, max] with two finite numbers and min less than max.
{ "yDomain": [0, 100] }invalid-format
spec.format has an invalid preset or Intl options. Valid presets are auto, integer, decimal, compact, percent, currency, date, month, year, time, datetime. Intl options must be valid Intl.NumberFormat or Intl.DateTimeFormat options.
{ "format": "currency" }
{ "format": { "revenue": { "style": "currency", "currency": "USD" } } }invalid-theme
spec.theme contains a key that is not a theme token. Valid tokens are font, fontSize, fg, fgMuted, grid, bg, accent, radius, tooltipBg, tooltipFg, focus, good, bad, and series1 through series8.
{ "theme": { "accent": "#7c3aed" } }unsafe-css-value
Theme and color values are written into CSS custom properties, so they must be plain CSS values. Characters such as ; { } < > \ and url( or expression( are rejected for security.
{ "colors": ["#2563eb", "rgb(249 115 22)"] }invalid-size
The width and height render options must be finite numbers greater than zero.
renderShell(spec, { width: 760, height: 320 })unknown-state
The hexmap type requires x to be a US state name or USPS code. The message suggests the closest match. Valid values are the 50 state names, their 2-letter abbreviations, DC, and PR.
{ "type": "hexmap", "x": "state", "y": "population",
"data": [{ "state": "CA", "population": 39 }] }too-many-marks
The chart would render more than 5000 marks, which exceeds the performance limit. Reduce the number of categories with the limit option, or aggregate rows with aggregate (e.g., "mean" instead of "sum"). More than 200 distinct frame values also raise it: aggregate or bin the frame field.
// Limit to top 20 categories
{ "type": "bar", "x": "product", "y": "sales", "limit": 20, ... }
// Aggregate by day instead of hour
{ "aggregate": "mean", ... }invalid-date
spec.xType is "time" but an x value is neither an ISO 8601 date nor epoch milliseconds. Valid ISO 8601 dates are "2024-03" (year-month), "2024-03-05" (date) or "2024-03-05T14:30:00Z" (date-time; no offset means UTC). Epoch ms are finite numbers, negative ones are before 1970. To use text categories with dates, set xType: "category".
// ISO 8601 date
{ "type": "line", "x": "date", "y": "revenue", "xType": "time",
"data": [{ "date": "2024-01-15", "revenue": 5000 }] }
// Epoch milliseconds
{ "type": "line", "x": "timestamp", "y": "revenue", "xType": "time",
"data": [{ "timestamp": 1705276800000, "revenue": 5000 }] }
// Text labels with date format
{ "type": "line", "x": "date", "y": "revenue", "xType": "category",
"data": [{ "date": "Jan 2024", "revenue": 5000 }] }too-few-measures
A constellation places each row by how alike its measures are, so it needs y as an array of at least 2 numeric fields. Each measure is one dimension of the map.
{ "type": "constellation", "x": "team", "y": ["revenue", "margin", "growth"],
"data": [{ "team": "A", "revenue": 120, "margin": 0.3, "growth": 0.1 }] }