Axes

Quick start

editor.commands.updateChartAxis({ axis: 'y', changes: { step: 25 } })
editor.commands.updateChartAxis({ axis: 'x', changes: { labels: { angle: 45 } } })

Axis fields

x is the category axis and y the value axis, also when bars lie on their side.

Grid and axis lines

grid and line take { line?, width?, color? }:

Without grid and line, a chart has:

• grid lines at its values,
• no grid lines at its categories, except numbers on a scatter chart,
• a category axis line,
• no value axis line.

resolveAxisStrokes(spec) returns the lines as drawn.

Where a grid line is left out

A grid leaves out the line that would lie on the other axis line. That edge belongs to the axis.

• The value grid has no line where the category axis runs.
• The category grid has no line along the value axis.
• With x.line: { line: 'none' } the bottom of the chart has no line.
• When values go below 0, the category axis runs through the plot at 0, and the grid line at the lowest value stays.

Grid lines at some categories

The category grid (x.grid) also takes every and at.

• Bars have one line more than categories, at the right edge of the last bar.
• The value grid takes neither.
• A scatter chart with numbers on x takes neither.

editor.commands.updateChartAxis({
  axis: 'y',
  changes: { grid: { line: 'dotted', color: '#94a3b8' } },
})
editor.commands.updateChartAxis({ axis: 'x', changes: { grid: { line: 'solid', width: 0.5 } } })
editor.commands.updateChartAxis({ axis: 'x', changes: { grid: { line: 'solid', every: 3 } } })

Category labels

x.labels thins out the category labels the same way, for long labels on a narrow chart.

• The categories, their bars and their points stay; only labels are left out.
• At angle: 45 a label rises to the right and ends at its category, so long names fit side by side.
• Without every or at, labels that would overlap are left out.

editor.commands.updateChartAxis({ axis: 'x', changes: { labels: { every: 3 } } })
editor.commands.updateChartAxis({ axis: 'x', changes: { labels: { angle: 45 } } })

Tick step

y.step: 25 puts a tick, a label and a value grid line at 0, 25, 50 and so on.

• Both ends of the axis round out to whole steps unless min or max fix them.
• A step that would give more than 100 ticks is ignored.
• On a combo chart with a second axis, the step applies to the left one.

editor.commands.updateChartAxis({ axis: 'y', changes: { step: 25 } })

For a Renderer of your own

Which charts draw axes

• Line, bar, area, scatter and combo charts take every field (hasAxisLines(type)).
• A radar chart (hasRadarLines(type)): y.grid are the rings and x.line the spokes. Both are drawn by default.

In a Word document

• A color is used when it is a #rrggbb value; otherwise Word uses the theme's.
• A category axis line set to 'none' keeps the grid line along it.
• step becomes the value axis' major unit.
• labels.every becomes its label skip.
• labels.angle becomes the labels' rotation.
• labels.at has no form there, and Word writes every label.

Commands

updateChartAxis

Changes fields of spec.axes.x or spec.axes.y and keeps the rest. A field set to undefined is removed.

editor.commands.updateChartAxis({ axis: 'y', changes: { title: 'EUR', min: 0 } })