Axes

Axis options go in xAxis and yAxis (y2Axis for the right axis). For horizontal bars the value axis is still yAxis.

Whole-number ticks and a fixed step

For counts and people, integer: true rules out ticks such as 0.5. step fixes the distance between ticks (every 10, say). A step so small it would draw more than 200 ticks is ignored.

createChart('#chart', {
  type: 'bar',
  title: 'Support tickets by day',
  yAxis: { integer: true },
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [{ name: 'Tickets', data: [2, 3, 1, 3, 2] }],
  },
});

Reversed axes (ranks)

yAxis: { reverse: true } flips the value axis so small values are on top, for rank charts where #1 belongs at the top. On horizontal bars it flips the category order, putting the first item at the bottom.

createChart('#chart', {
  type: 'line',
  title: 'Search rank',
  yAxis: { reverse: true, integer: true, min: 1, title: 'Rank' },
  data: {
    labels: ['W1', 'W2', 'W3', 'W4', 'W5'],
    series: [
      { name: 'Our product', data: [8, 5, 3, 2, 1] },
      { name: 'Competitor', data: [1, 2, 2, 4, 6] },
    ],
  },
});

Two-line labels

A '\n' in a category label writes it on two lines, handy for long names. Tooltips and the table join the lines with a space.

createChart('#chart', {
  type: 'bar',
  title: 'Stores by district',
  data: {
    labels: ['Seoul\nGangnam-gu', 'Seoul\nSongpa-gu', 'Busan\nHaeundae-gu', 'Daegu\nSuseong-gu'],
    series: [{ name: 'Stores', data: [42, 35, 28, 19] }],
  },
});

A right y axis

Series in a different unit can sit on a right axis with axis: 'right'. The caveats and an example are on the combo chart page.