Overview

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

Live Demo github page

Installation

npm install --save chartjs-plugin-cyclic-axis

Usage

• import the plugin

import * as cyclicAxisPlugin from 'chartjs-plugin-cyclic-axis';

• Register the plugin

Chart.register(cyclicAxisPlugin);

• Declare custom axis

    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 documentation for more info.

Example with zoom plugin

    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.

Options

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

The default chart options are:

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.