# chartjs-plugin-cyclic-axis

> A Chart.js plugin that enables cyclic pan functionality in linear scatter charts.

Latest version **1.0.0-alpha.2** (published 2021-11-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install chartjs-plugin-cyclic-axis
pnpm add chartjs-plugin-cyclic-axis
yarn add chartjs-plugin-cyclic-axis
bun add chartjs-plugin-cyclic-axis
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.2 |
| Published | 2021-11-28 |
| First published | 2021-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Maor Assayag |
| Maintainers | maorassayag |
| Keywords | chart.js, chart, cyclic axis, cyclic chart, plugin, cyclic |

## Links

- npm: https://www.npmjs.com/package/chartjs-plugin-cyclic-axis
- Homepage: https://github.com/MaorAssayag/chartjs-plugin-cyclic-axis
- Issues: https://github.com/MaorAssayag/chartjs-plugin-cyclic-axis/issues
- npm.io page: https://npm.io/package/chartjs-plugin-cyclic-axis

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0-alpha.2 (latest) — 2021-11-28
- 1.0.0-alpha.1 — 2021-11-28
- 1.0.0-alpha.0 — 2021-11-28

## README

<p align="center">
  <img src="https://github.com/MaorAssayag/chartjs-plugin-cyclic-axis/blob/main/assets/chartjs-cyclic-axis-logo.svg" alt="Your image title" width="300"/>
</p>

<p align="center">
  <a href="//npmjs.com/package/chartjs-plugin-cyclic-axis"><img src="https://badge.fury.io/js/chartjs-plugin-cyclic-axis.svg" alt="Version"></a>
  <a href="https://github.com/maorassayag/chartjs-plugin-cyclic-axis/issues"><img src="https://img.shields.io/github/issues/maorassayag/chartjs-plugin-cyclic-axis" alt="issues"></a>
  <a href="https://github.com/maorassayag/chartjs-plugin-cyclic-axis"><img src="https://img.shields.io/github/stars/maorassayag/chartjs-plugin-cyclic-axis" alt="stars"></a>
  <a href="https://github.com/maorassayag/chartjs-plugin-cyclic-axis/blob/master/LICENSE"><img src="https://img.shields.io/github/license/maorassayag/chartjs-plugin-cyclic-axis" alt="LICENSE"></a>
</p>

## Overview

Chart.js plugin that enables cyclic pan functionality in linear scatter charts :bar_chart:

Live Demo [github page](https://maorassayag.github.io/chartjs-plugin-cyclic-axis/)

#
### Installation
`npm install --save chartjs-plugin-cyclic-axis`

### Usage
- import the plugin
```js
import * as cyclicAxisPlugin from 'chartjs-plugin-cyclic-axis';
```

- Register the plugin
 ```js
Chart.register(cyclicAxisPlugin);

```
- Declare custom axis
```js
    var myChart = new Chart(this.ctx, {
      type: 'scatter',
      data: [],
      options: {
        scales: {
          x: {
            display: true,
            type: 'cyclicAxis' as any, // 'cyclicAxis' is this plugin custom axis ID
            min: -180,
            max: 180,
            rightValue: 180,
            cyclicPanning: true,
            ticks: {
              stepSize: 5,
            } as any,
          } as any,
        },
     }
    );
```
See the [plugins](http://www.chartjs.org/docs/latest/developers/plugins.html) documentation for more info.

### Example with [zoom plugin](https://github.com/chartjs/chartjs-plugin-zoom) 
```js
    this.myChart = new Chart(this.ctx, {
      type: 'scatter',
      data: data, // predefined random data
      options: {
        scales: {
          x: {
            display: true,
            type: 'cyclicAxis' as any,
            min: -180,
            max: 180,
            rightValue: 180,
            cyclicPanning: true,
            ticks: {
              stepSize: 5,
            } as any,
          } as any,
        },
        plugins: {
          zoom: {
            pan: {
              // pan options and/or events
              enabled: true,
              mode: 'x',
              overScaleMode: 'x',
            },
            limits: {
              // axis limits
              y: {min: 0, max: 100},
              x: {min: -180, max: 180},
            },
            zoom: {
              // zoom options and/or events
              mode: 'y',
              wheel: {
                enabled: true,
              },
            }
          },
        }
      }
    });
```
Full Angular example is available [here](https://github.com/MaorAssayag/chartjs-plugin-cyclic-axis/tree/main/cyclic-example).

### Options
The plugin options can be changed in the `scales` options per chart:

The default chart options are:

```js
options: {
  scales: {
    x: {
      display: true,
      type: 'cyclicAxis' as any,
      min: -180,
      max: 180,
      rightValue: 180,
      cyclicPanning: true,
      ticks: {
        stepSize: 5,
      } as any,
    } as any,
  },
}
```

Chart options:

`max`: ([Number]) max value of tick range.

`min`: ([Number]) min value of tick range.

`rightValue`: ([Number]) initialize tick value on the right of the graph

`ticks.stepSize`: ([Number]) diff between ticks

# Warning

This is not supposed to be used in production. It is a first try to accomplish basic custom pan functionallity in a certain way. You are not forced to do everything exactly as it is shown here, decide what works best for you and your team.
However, this is a great staring point for custom development for whatever special usecase.

---
_Source: https://npm.io/package/chartjs-plugin-cyclic-axis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._