2017-03-21 01:36:54 +01:00
# New Axes
2019-01-29 13:34:16 +01:00
Axes in Chart.js can be individually extended. Axes should always derive from `Chart.Scale` but this is not a mandatory requirement.
2017-03-21 01:36:54 +01:00
```javascript
let MyScale = Chart.Scale.extend({
/* extensions ... */
});
// MyScale is now derived from Chart.Scale
```
Once you have created your scale class, you need to register it with the global chart object so that it can be used. A default config for the scale may be provided when registering the constructor. The first parameter to the register function is a string key that is used later to identify which scale type to use for a chart.
```javascript
Chart.scaleService.registerScaleType('myScale', MyScale, defaultConfigObject);
```
To use the new scale, simply pass in the string key to the config when creating a chart.
```javascript
var lineChart = new Chart(ctx, {
data: data,
type: 'line',
options: {
scales: {
2019-11-22 00:46:49 +01:00
y: {
2017-03-21 01:36:54 +01:00
type: 'myScale' // this is the same key that was passed to the registerScaleType function
2019-11-22 00:46:49 +01:00
}
2017-03-21 01:36:54 +01:00
}
}
2019-01-29 13:34:16 +01:00
});
2017-03-21 01:36:54 +01:00
```
## Scale Properties
Scale instances are given the following properties during the fitting process.
```javascript
{
2019-01-29 13:34:16 +01:00
left: number, // left edge of the scale bounding box
right: number, // right edge of the bounding box
top: number,
bottom: number,
width: number, // the same as right - left
height: number, // the same as bottom - top
2017-03-21 01:36:54 +01:00
// Margin on each side. Like css, this is outside the bounding box.
margins: {
2019-01-29 13:34:16 +01:00
left: number,
right: number,
top: number,
bottom: number
2017-03-21 01:36:54 +01:00
},
// Amount of padding on the inside of the bounding box (like CSS)
2019-01-29 13:34:16 +01:00
paddingLeft: number,
paddingRight: number,
paddingTop: number,
paddingBottom: number
2017-03-21 01:36:54 +01:00
}
```
## Scale Interface
To work with Chart.js, custom scale types must implement the following interface.
```javascript
{
// Determines the data limits. Should set this.min and this.max to be the data max/min
determineDataLimits: function() {},
// Generate tick marks. this.chart is the chart instance. The data object can be accessed as this.chart.data
// buildTicks() should create a ticks array on the axis instance, if you intend to use any of the implementations from the base class
buildTicks: function() {},
2019-11-05 00:07:01 +01:00
// Get the label to show for the given value
getLabelForValue: function(value) {},
2017-03-21 01:36:54 +01:00
// Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value
// @param index: index into the ticks array
2019-01-29 13:34:16 +01:00
getPixelForTick: function(index) {},
2017-03-21 01:36:54 +01:00
// Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value
// @param value : the value to get the pixel for
// @param index : index into the data array of the value
// @param datasetIndex : index of the dataset the value comes from
2019-01-29 13:34:16 +01:00
getPixelForValue: function(value, index, datasetIndex) {},
2017-03-21 01:36:54 +01:00
// Get the value for a given pixel (x coordinate for horizontal axis, y coordinate for vertical axis)
// @param pixel : pixel value
getValueForPixel: function(pixel) {}
}
```
Optionally, the following methods may also be overwritten, but an implementation is already provided by the `Chart.Scale` base class.
```javascript
2019-01-29 13:34:16 +01:00
{
2019-12-14 19:22:57 +01:00
// Adds labels to objects in the ticks array. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks);
generateTickLabels: function() {},
2017-03-21 01:36:54 +01:00
// Determine how much the labels will rotate by. The default implementation will only rotate labels if the scale is horizontal.
2019-12-14 19:22:57 +01:00
calculateLabelRotation: function() {},
2017-03-21 01:36:54 +01:00
// Fits the scale into the canvas.
// this.maxWidth and this.maxHeight will tell you the maximum dimensions the scale instance can be. Scales should endeavour to be as efficient as possible with canvas space.
// this.margins is the amount of space you have on either side of your scale that you may expand in to. This is used already for calculating the best label rotation
// You must set this.minSize to be the size of your scale. It must be an object containing 2 properties: width and height.
// You must set this.width to be the width and this.height to be the height of the scale
fit: function() {},
// Draws the scale onto the canvas. this.(left|right|top|bottom) will have been populated to tell you the area on the canvas to draw in
// @param chartArea : an object containing four properties: left, right, top, bottom. This is the rectangle that lines, bars, etc will be drawn in. It may be used, for example, to draw grid lines.
2019-01-29 13:34:16 +01:00
draw: function(chartArea) {}
}
2017-03-21 01:36:54 +01:00
```
The Core.Scale base class also has some utility functions that you may find useful.
```javascript
{
// Returns true if the scale instance is horizontal
isHorizontal: function() {},
// Get the correct value from the value from this.chart.data.datasets[x].data[]
// If dataValue is an object, returns .x or .y depending on the return of isHorizontal()
// If the value is undefined, returns NaN
// Otherwise returns the value.
2019-01-29 13:34:16 +01:00
// Note that in all cases, the returned value is not guaranteed to be a number
2017-03-21 01:36:54 +01:00
getRightValue: function(dataValue) {},
2019-01-29 13:34:16 +01:00
// Returns the scale tick objects ({label, major})
getTicks: function() {}
2017-03-21 01:36:54 +01:00
}
2019-01-29 13:34:16 +01:00
```