Chart properties

Canonical Format 2.0 fields for chart data, presets, axes, lines, fills, and bars.

Properties Rendered examples Reference JSON

Four semantic row types

Each row reads the first object in chartViewModels. The row type selects the chart geometry; the model supplies data and presentation.

Bar

barChart

Compares values across labeled categories.

Line

lineBarChart

Shows change across an ordered sequence.

Area

areaChart

Adds a filled region beneath an interpolated line.

Range

rangeChart

Shows a lower and upper bound for every category.

Canonical v2 shape

Writers use usesGradient. The misspelled useGradent key is accepted only while migrating a document version 1 project.

Point order is significant. Range charts should provide both minValue and maxValue for every point.

{
  "id": "weekly-demand",
  "type": "areaChart",
  "chartViewModels": [{
    "chartStyle": "standard",
    "usesCustomChartStyle": true,
    "showXAxis": true,
    "showYAxis": true,
    "usesGradient": true,
    "lineWidth": 3,
    "showGridLines": true,
    "showSymbols": false,
    "yAxisPosition": "leading",
    "interpolation": "monotone",
    "dataPoints": [
      { "label": "Mon", "value": 18 },
      { "label": "Tue", "value": 27 },
      { "label": "Wed", "value": 23 }
    ]
  }]
}

Property reference

Preset means the default is resolved from chartStyle. Explicit values take precedence in every renderer.

Property	Type and values	Default	Applies to	Meaning
`chartStyle`	`standard`, `compactTrend`, `sparkline`, `metricInline`	`standard`	All charts	Selects a coordinated set of defaults.
`usesCustomChartStyle`	Boolean	`false`	All charts	Records that the stored appearance no longer matches the selected preset.
`showYAxis`	Boolean	Preset	All charts	Shows numeric values and tick marks.
`showXAxis`	Boolean	Preset	All charts	Shows category labels and tick marks.
`tintColor`	Adaptive color object or `null`	Theme	All charts	Overrides the theme chart tint.
`highlightLargestBar`	Boolean	`true`	Bar	Emphasizes the largest bar by reducing the opacity of the others.
`barTopCornerRadius`	Non-negative integer	`8`	Bar	Rounds the two upper corners in platform points or dp.
`usesGradient`	Boolean	Preset	All charts	Uses a tint-derived gradient instead of a flat treatment.
`lineWidth`	Positive number	Preset	Line, area	Sets line thickness in platform points or dp.
`showGridLines`	Boolean	Preset	All charts	Draws chart-aligned lines when an axis is visible.
`showSymbols`	Boolean	`false`	Line, area	Marks every rendered data point.
`yAxisPosition`	`leading` or `trailing`	Preset	All charts	Places the numeric axis relative to the active layout direction.
`interpolation`	`linear`, `monotone`, `catmullRom`, `cardinal`, `stepStart`, `stepCenter`, `stepEnd`	Preset	Line, area	Defines how the path travels between consecutive points.
`dataPoints`	Array of `ChartDataPoint`	Empty array	All charts	Supplies ordered labels, values, and optional range bounds.

ChartDataPoint

label: Required string used for the category label.
value: Required number used by every chart and its accessibility description.
minValue: Optional lower bound for a range chart.
maxValue: Optional upper bound for a range chart.

Interpolation

linear: Straight segments.
monotone: Smooth without overshooting local values.
catmullRom: Smooth curve passing through each point.
cardinal: Rounded curve with balanced tension.
stepStart: Changes at the start of each interval.
stepCenter: Changes halfway through each interval.
stepEnd: Changes at the end of each interval.

Preset defaults

Presets provide stable starting values. Store explicit overrides and set usesCustomChartStyle when an editor presents the result as Custom.

Preset	Axes	Grid	Gradient	Line	Y axis	Interpolation
`standard`	Both	Shown	On	3	Leading	Cardinal
`compactTrend`	Both	Shown	Off	3	Trailing	Cardinal
`sparkline`	Hidden	Hidden	Off	2.5	Leading	Monotone
`metricInline`	Hidden	Hidden	Off	2	Leading	Monotone

Rendered examples

The same Format 2.0 pages rendered by iOS, Android, and the Web runtime. Open any image to inspect it at full resolution.

Appearance

Bar chart properties

Axes, tint, largest-bar emphasis, top radius, gradient, grid, axis position, and data points.

barChart

Full chart presets

Standard and compact-trend defaults with leading and trailing numeric axes.

lineBarChart

Minimal chart presets

Sparkline and metric-inline defaults without axes or grid lines.

lineBarChart

Smooth interpolation

Linear, monotone, and Catmull–Rom paths with symbols, line width, tint, and data points.

lineBarChart

Cardinal and step start

A rounded cardinal curve compared with a step that changes at each interval start.

lineBarChart

Centered and ending steps

Step-center and step-end interpolation using the same ordered data.

lineBarChart

Area chart properties

Axes, gradient, line width, grid, symbols, axis position, interpolation, tint, and data.

areaChart

Range chart properties

Lower and upper bounds with axes, grid, gradient, tint, and ordered category labels.

rangeChart