Axes & number formatting

Set axis bounds, titles, scales and numeric tick formatting. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

Try it live

Choose Change settings to expand the Y range; restore it to compare the same data at the original scale. The source observations stay unchanged.

Numeric axes support linear and logarithmic scales. Time/category X support depends on the chart type. Combination charts can assign supported series to an authored secondary Y axis.

Change settings

Loading chart…

Inspect live chart state

The chart uses the native Charts renderer. Buttons outside the plot are example application controls calling the public API.

Complete chart setup with sample data

Install Charts using the installation guide, then run this setup after the host mounts. The data is illustrative. Additional actions for this tool are explained below.

<div id="chart" style="width:100%;height:500px"></div>

import { createChartFactory } from '@revolist/charts/core';
import { lineChart } from '@revolist/charts/line';
import { groupedColumnChart } from '@revolist/charts/grouped-column';
import { columnLineChart } from '@revolist/charts/column-line';

const rows = [
  {
    "date": 1767225600000,
    "month": "Jan",
    "revenue": 65,
    "costs": 45
  },
  {
    "date": 1769904000000,
    "month": "Feb",
    "revenue": 82,
    "costs": 50
  },
  {
    "date": 1772323200000,
    "month": "Mar",
    "revenue": 76,
    "costs": 48
  },
  {
    "date": 1775001600000,
    "month": "Apr",
    "revenue": 95,
    "costs": 65
  },
  {
    "date": 1777593600000,
    "month": "May",
    "revenue": 110,
    "costs": 72
  },
  {
    "date": 1780272000000,
    "month": "Jun",
    "revenue": 102,
    "costs": 68
  },
  {
    "date": 1782864000000,
    "month": "Jul",
    "revenue": 121,
    "costs": 80
  },
  {
    "date": 1785542400000,
    "month": "Aug",
    "revenue": 115,
    "costs": 76
  },
  {
    "date": 1788220800000,
    "month": "Sep",
    "revenue": 135,
    "costs": 89
  },
  {
    "date": 1790812800000,
    "month": "Oct",
    "revenue": 128,
    "costs": 85
  },
  {
    "date": 1793491200000,
    "month": "Nov",
    "revenue": 145,
    "costs": 92
  },
  {
    "date": 1796083200000,
    "month": "Dec",
    "revenue": 155,
    "costs": 100
  }
];
const mapping = {
  "category": {
    "field": "date",
    "label": "month"
  },
  "series": [
    {
      "field": "revenue",
      "label": "Revenue"
    },
    {
      "field": "costs",
      "label": "Costs"
    }
  ]
};
const createChart = createChartFactory([lineChart, groupedColumnChart, columnLineChart]);
const container = document.getElementById('chart')!;
const chart = await createChart({
  container,
  data: rows,
  mapping,
  "chartType": "columnLine",
  "axes": {
    "x": {
      "scale": "time"
    },
    "y": {
      "min": 0,
      "max": 200,
      "title": "Revenue (€k)",
      "tickFormat": {
        "maximumFractionDigits": 1
      }
    }
  },
  "presentation": {
    "title": "Monthly performance",
    "subtitle": "Illustrative data · 2026",
    "legendPosition": "bottom"
  },
  "interaction": {
    "mode": "select",
    "selectionMode": "multiple"
  }
});

// When the host unmounts:
// chart.destroy();

API and configuration

await chart.update({ axes: {
  ...chart.model.axes,
  y: { min: 0, max: 400, title: 'Revenue (€k)',
    tickFormat: { notation: 'standard', maximumFractionDigits: 1 },
  },
} });

Support and behavior

Use the chart definition’s X scales and axis support. Bounds must be finite and increasing; log bounds must be positive. Units identify data semantics for compatibility checks; they do not convert values. Keep axis units consistent when linking charts.

Calendar boundaries and missing periods

Time axes choose real UTC calendar tick boundaries and responsive year, quarter, month, date or intraday labels. Daily/monthly views omit timestamp noise. Custom localeText.renderer.formatTimeAxisTick formatters receive the actual tick epoch, the date-only flag and the adaptive default text.

await chart.update({ axes: {
  x: { scale: 'time', interval: 'month', missingPeriods: 'gap' },
} });

interval sets the minimum tick cadence. With missingPeriods: 'gap', it also defines which missing periods break a line or area path. For example, February followed by April has a gap for March. Without the policy, existing finite observations remain connected. Explicit nulls break paths under either policy; zero stays a real observation. No missing source rows are invented.

See Calendar comparisons for previous-period overlays; a date-range preset changes the viewport rather than calculating a comparison.

State and cleanup

Authored settings are available through chart.model. Updates replace whole settings objects: spread fields you want to retain, and await the returned promise before reading state or exporting. Destroy the controller when its host unmounts.

All chart tools · Chart types · Data & Configuration