# sync-two-axes

> Algorithm to sync/align two axes' ticks so that their intervals are 'nice'.

Latest version **0.0.4** (published 2026-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install sync-two-axes
pnpm add sync-two-axes
yarn add sync-two-axes
bun add sync-two-axes
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2026-06-10 |
| First published | 2022-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | pc592 |
| Keywords | graph, graphs, axis, axes, sync, align, ticks, tick, marks |

## Links

- npm: https://www.npmjs.com/package/sync-two-axes
- Repository: https://github.com/pc592/sync-two-axes
- Homepage: https://github.com/pc592/sync-two-axes#readme
- Issues: https://github.com/pc592/sync-two-axes/issues
- npm.io page: https://npm.io/package/sync-two-axes

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2026-06-10
- 0.0.3 — 2026-06-10
- 0.0.2 — 2026-06-09
- 0.0.1 — 2022-08-11

## README

# sync-two-axes
Algorithm to sync/align two axes' ticks so that their intervals are 'nice'. If there are multiple 'nice' options, it should return the option with the largest tick count first.

"[T]he "nicest" numbers in decimal are 1, 2, and 5, and all power-of-ten multiples of these numbers."

#### Links

* Inspiration/Reference: https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks/16363437#16363437  
* NPM Package: https://www.npmjs.com/package/sync-two-axes  
* Tool: for convenience, a calculator is available via github-pages.
    - https://pc592.github.io/sync-two-axes/  

## Example

Imagine you have two data sets, both graphed on the same axis. The left, y1 axis, has a range of 0 to 200. The right, y2 axis, has a range of 0 to 50. For readability's sake, you want the tick marks across the two graphs to align on 'nice' numbers. That's where this algorithm comes in.

```js
  const y1 = {
    min: 0,
    max: 200,
  };
  const y2 = {
    min: 0,
    max: 50,
  };

  getAlignedTicksForTwoAxes(y1, y2);
```

Returns the following object:

```js
  {
    tickCount: 10,
    axis1TickInterval: 20,
    axis2TickInterval: 5,
  }
```

Which means there are 10 ticks across both axes, in intervals of 20 for y1 and intervals of 5 for y2.

You can also define _minTicks_ (default 3) and _maxTicks_ (default 10).

```js
  const minTicks = 15;
  const maxTicks = 30;
  getAlignedTicksForTwoAxes(y1, y2, minTicks, maxTicks); // None
```

Returns `'None'` since it could not determine an alignment fitting those requirements.

## Development/Contributing

I, unfortunately, have decided to do this on windows.

1. https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows
    - I chose to use [nvm-windows](https://github.com/coreybutler/nvm-windows).
    - Current node version: v18.6.0.

2. In the root directory, run `npm install`
    - Lint: `npm run lint`.
    - Test: `npm run test`. Easiest way to test and develop the package on its own.

3. For the tool:
    - Install [gulp-cli](https://gulpjs.com/docs/en/getting-started/quick-start/) to run `gulp`.
    - Otherwise, install [npx](https://docs.npmjs.com/cli/v11/commands/npx) and run `npx gulp`.

---
_Source: https://npm.io/package/sync-two-axes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
