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.