Use scale defined in the chart when x/y ScaleID options are not set

docs/guide/migrationV2.md

@@ -1 +1,10 @@
 # 2.x Migration guide
+
+`chartjs-plugin-annotation` plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
+
+## Options
+
+A number of changes were made to the configuration options passed to the plugin configuration. Those changes are documented below.
+
+ * `xScaleID` option default has been changed, now set to `undefined`. If the option is missing, the plugin will try to use the first scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
+ * `yScaleID` option default has been changed, now set to `undefined`. If the option is missing, the plugin will try to use the first scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.

docs/guide/types/box.md

@@ -71,10 +71,10 @@ The following options are available for box annotations.
 | [`shadowOffsetY`](#styling) | `number` | Yes | `0`
 | [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`xScaleID`](#general) | `string` | Yes | `'x'`
+| [`xScaleID`](#general) | `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
-| [`yScaleID`](#general) | `string` | Yes | `'y'`
+| [`yScaleID`](#general) | `string` | Yes | `undefined`
 
 ### General
 
@@ -88,10 +88,10 @@ If one of the axes does not match an axis in the chart, the box will take the en
 | `rotation` | Rotation of the box in degrees.
 | `xMax` | Right edge of the box in units along the x axis.
 | `xMin` | Left edge of the box in units along the x axis.
-| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
+| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
 | `yMax` | Bottom edge of the box in units along the y axis.
 | `yMin` | Top edge of the box in units along the y axis.
-| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
+| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 
 ### Styling
 

docs/guide/types/ellipse.md

@@ -67,10 +67,10 @@ The following options are available for ellipse annotations.
 | [`shadowOffsetY`](#styling) | `number` | Yes | `0`
 | [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`xScaleID`](#general) | `string` | Yes | `'x'`
+| [`xScaleID`](#general) | `string` | Yes | `undefined`
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`yScaleID`](#general) | `string` | Yes | `'y'`
+| [`yScaleID`](#general) | `string` | Yes | `undefined`
 
 ### General
 
@@ -84,10 +84,10 @@ If one of the axes does not match an axis in the chart, the ellipse will take th
 | `rotation` | Rotation of the ellipse in degrees, default is 0.
 | `xMax` | Right edge of the ellipse in units along the x axis.
 | `xMin` | Left edge of the ellipse in units along the x axis.
-| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
+| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
 | `yMax` | Bottom edge of the ellipse in units along the y axis.
 | `yMin` | Top edge of the ellipse in units along the y axis.
-| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
+| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 
 ### Styling
 

docs/guide/types/label.md

@@ -84,12 +84,12 @@ The following options are available for label annotations.
 | [`xAdjust`](#general) | `number` | Yes | `0`
 | [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`xScaleID`](#general) | `string` | Yes | `'x'`
+| [`xScaleID`](#general) | `string` | Yes | `undefined`
 | [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yAdjust`](#general) | `number` | Yes | `0`
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`yScaleID`](#general) | `string` | Yes | `'y'`
+| [`yScaleID`](#general) | `string` | Yes | `undefined`
 | [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
 
 ### General
@@ -112,12 +112,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `xAdjust` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
 | `xMax` | Right edge of the box in units along the x axis.
 | `xMin` | Left edge of the box in units along the x axis.
-| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
+| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
 | `xValue` | X coordinate of the point in units along the x axis.
 | `yAdjust` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.
 | `yMax` | Bottom edge of the box in units along the y axis.
 | `yMin` | Top edge of the box in units along the y axis.
-| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
+| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 | `yValue` | Y coordinate of the point in units along the y axis.
 
 ### Styling

docs/guide/types/line.md

@@ -68,10 +68,10 @@ The following options are available for line annotations. All of these options c
 | [`value`](#positioning) | `number` | Yes | `undefined`
 | [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`xScaleID`](#positioning) | `string` | Yes | `'x'`
+| [`xScaleID`](#positioning) | `string` | Yes | `undefined`
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`yScaleID`](#positioning) | `string` | Yes | `'y'`
+| [`yScaleID`](#positioning) | `string` | Yes | `undefined`
 
 ### General
 
@@ -103,10 +103,10 @@ If `scaleID` is unset, then `xScaleID` and `yScaleID` are used to draw a line fr
 | `value` | End one of the line when a single scale is specified.
 | `xMax` | X coordinate of end two of the line in units along the x axis.
 | `xMin` | X coordinate of end one of the line in units along the x axis.
-| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
+| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
 | `yMax` | Y coordinate of end two of the line in units along the y axis.
 | `yMin` | Y coordinate of end one of the line in units along the y axis.
-| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
+| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 
 ### Styling
 

docs/guide/types/point.md

@@ -68,12 +68,12 @@ The following options are available for point annotations.
 | [`xAdjust`](#general) | `number` | Yes | `0`
 | [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`xScaleID`](#general) | `string` | Yes | `'x'`
+| [`xScaleID`](#general) | `string` | Yes | `undefined`
 | [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yAdjust`](#general) | `number` | Yes | `0`
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
-| [`yScaleID`](#general) | `string` | Yes | `'y'`
+| [`yScaleID`](#general) | `string` | Yes | `undefined`
 | [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
 
 ### General
@@ -92,12 +92,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `xAdjust` | Adjustment along x-axis (left-right) of point relative to computed position. Negative values move the point left, positive right.
 | `xMax` | Right edge of the box in units along the x axis.
 | `xMin` | Left edge of the box in units along the x axis.
-| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
+| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
 | `xValue` | X coordinate of the point in units along the x axis.
 | `yAdjust` | Adjustment along y-axis (top-bottom) of point relative to computed position. Negative values move the point up, positive down.
 | `yMax` | Bottom edge of the box in units along the y axis.
 | `yMin` | Top edge of the box in units along the y axis.
-| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
+| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 | `yValue` | Y coordinate of the point in units along the y axis.
 
 ### Styling

docs/guide/types/polygon.md

@@ -98,12 +98,12 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `xAdjust` | Adjustment along x-axis (left-right) of polygon relative to computed position. Negative values move the polygon left, positive right.
 | `xMax` | Right edge of the box in units along the x axis.
 | `xMin` | Left edge of the box in units along the x axis.
-| `xScaleID` | ID of the X scale to bind onto, default is 'x'.
+| `xScaleID` | ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'x'` axis. If more than one scale has been defined in the chart as `'x'` axis, the option is mandatory to select the right scale.
 | `xValue` | X coordinate of the polygon in units along the x axis.
 | `yAdjust` | Adjustment along y-axis (top-bottom) of polygon relative to computed position. Negative values move the polygon up, positive down.
 | `yMax` | Bottom edge of the box in units along the y axis.
 | `yMin` | Top edge of the box in units along the y axis.
-| `yScaleID` | ID of the Y scale to bind onto, default is 'y'.
+| `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 | `yValue` | Y coordinate of the polygon in units along the y axis.
 
 ### Styling

src/helpers/helpers.chart.js

@@ -21,6 +21,25 @@ export function scaleValue(scale, value, fallback) {
   return isFinite(value) ? scale.getPixelForValue(value) : fallback;
 }
 
+/**
+ * @param {Object} scales - chartjs object with all scales
+ * @param {Object} options - plugin options
+ * @param {string} key - annotation plugin scale id option key
+ * @returns {string} the unique scale defined in chartjs or the key passed as argument
+ */
+export function retrieveScaleID(scales, options, key) {
+  const scaleID = options[key];
+  if (scaleID || key === 'scaleID') {
+    return scaleID;
+  }
+  const axis = key.charAt(0);
+  const axes = Object.values(scales).filter((scale) => scale.axis && scale.axis === axis);
+  if (axes.length) {
+    return axes[0].id;
+  }
+  return axis;
+}
+
 /**
  * @param {Scale} scale
  * @param {{start: number, end: number}} options
@@ -48,8 +67,8 @@ function getChartDimensionByScale(scale, options) {
  */
 export function getChartPoint(chart, options) {
   const {chartArea, scales} = chart;
-  const xScale = scales[options.xScaleID];
-  const yScale = scales[options.yScaleID];
+  const xScale = scales[retrieveScaleID(scales, options, 'xScaleID')];
+  const yScale = scales[retrieveScaleID(scales, options, 'yScaleID')];
   let x = chartArea.width / 2;
   let y = chartArea.height / 2;
 
@@ -69,8 +88,9 @@ export function getChartPoint(chart, options) {
  * @returns {{x?:number, y?: number, x2?: number, y2?: number, width?: number, height?: number}}
  */
 export function getChartRect(chart, options) {
-  const xScale = chart.scales[options.xScaleID];
-  const yScale = chart.scales[options.yScaleID];
+  const scales = chart.scales;
+  const xScale = scales[retrieveScaleID(scales, options, 'xScaleID')];
+  const yScale = scales[retrieveScaleID(scales, options, 'yScaleID')];
   let {top: y, left: x, bottom: y2, right: x2} = chart.chartArea;
 
   if (!xScale && !yScale) {

src/scale.js

@@ -1,7 +1,8 @@
 import {isFinite, valueOrDefault, defined} from 'chart.js/helpers';
+import {retrieveScaleID} from './helpers';
 
 export function adjustScaleRange(chart, scale, annotations) {
-  const range = getScaleLimits(scale, annotations);
+  const range = getScaleLimits(chart.scales, scale, annotations);
   let changed = changeScaleLimit(scale, range, 'min', 'suggestedMin');
   changed = changeScaleLimit(scale, range, 'max', 'suggestedMax') || changed;
   if (changed && typeof scale.handleTickRangeOptions === 'function') {
@@ -29,8 +30,9 @@ function scaleLimitDefined(scaleOptions, limit, suggestedLimit) {
 
 function verifyScaleIDs(annotation, scales) {
   for (const key of ['scaleID', 'xScaleID', 'yScaleID']) {
-    if (annotation[key] && !scales[annotation[key]] && verifyProperties(annotation, key)) {
-      console.warn(`No scale found with id '${annotation[key]}' for annotation '${annotation.id}'`);
+    const scaleID = retrieveScaleID(scales, annotation, key);
+    if (scaleID && !scales[scaleID] && verifyProperties(annotation, key)) {
+      console.warn(`No scale found with id '${scaleID}' for annotation '${annotation.id}'`);
     }
   }
 }
@@ -48,7 +50,7 @@ function verifyProperties(annotation, key) {
   return false;
 }
 
-function getScaleLimits(scale, annotations) {
+function getScaleLimits(scales, scale, annotations) {
   const axis = scale.axis;
   const scaleID = scale.id;
   const scaleIDOption = axis + 'ScaleID';
@@ -59,7 +61,7 @@ function getScaleLimits(scale, annotations) {
   for (const annotation of annotations) {
     if (annotation.scaleID === scaleID) {
       updateLimits(annotation, scale, ['value', 'endValue'], limits);
-    } else if (annotation[scaleIDOption] === scaleID) {
+    } else if (retrieveScaleID(scales, annotation, scaleIDOption) === scaleID) {
       updateLimits(annotation, scale, [axis + 'Min', axis + 'Max', axis + 'Value'], limits);
     }
   }

src/types/box.js

@@ -92,10 +92,10 @@ BoxAnnotation.defaults = {
   shadowOffsetY: 0,
   xMax: undefined,
   xMin: undefined,
-  xScaleID: 'x',
+  xScaleID: undefined,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: 'y'
+  yScaleID: undefined
 };
 
 BoxAnnotation.defaultRoutes = {

src/types/ellipse.js

@@ -53,10 +53,10 @@ EllipseAnnotation.defaults = {
   shadowOffsetY: 0,
   xMax: undefined,
   xMin: undefined,
-  xScaleID: 'x',
+  xScaleID: undefined,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: 'y'
+  yScaleID: undefined
 };
 
 EllipseAnnotation.defaultRoutes = {

src/types/label.js

@@ -97,12 +97,12 @@ LabelAnnotation.defaults = {
   xAdjust: 0,
   xMax: undefined,
   xMin: undefined,
-  xScaleID: 'x',
+  xScaleID: undefined,
   xValue: undefined,
   yAdjust: 0,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: 'y',
+  yScaleID: undefined,
   yValue: undefined
 };
 

src/types/line.js

@@ -1,6 +1,6 @@
 import {Element} from 'chart.js';
 import {PI, toRadians, toPadding} from 'chart.js/helpers';
-import {clamp, scaleValue, rotated, drawBox, drawLabel, measureLabelSize, getRelativePosition, setBorderStyle, setShadowStyle} from '../helpers';
+import {clamp, scaleValue, rotated, drawBox, drawLabel, measureLabelSize, getRelativePosition, setBorderStyle, setShadowStyle, retrieveScaleID} from '../helpers';
 
 const pointInLine = (p1, p2, t) => ({x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y)});
 const interpolateX = (y, p1, p2) => pointInLine(p1, p2, Math.abs((y - p1.y) / (p2.y - p1.y))).x;
@@ -176,8 +176,8 @@ export default class LineAnnotation extends Element {
         y2 = max;
       }
     } else {
-      const xScale = chart.scales[options.xScaleID];
-      const yScale = chart.scales[options.yScaleID];
+      const xScale = chart.scales[retrieveScaleID(chart.scales, options, 'xScaleID')];
+      const yScale = chart.scales[retrieveScaleID(chart.scales, options, 'yScaleID')];
 
       if (xScale) {
         x = scaleValue(xScale, options.xMin, x);
@@ -283,10 +283,10 @@ LineAnnotation.defaults = {
   value: undefined,
   xMax: undefined,
   xMin: undefined,
-  xScaleID: 'x',
+  xScaleID: undefined,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: 'y'
+  yScaleID: undefined
 };
 
 LineAnnotation.descriptors = {

src/types/point.js

@@ -57,12 +57,12 @@ PointAnnotation.defaults = {
   xAdjust: 0,
   xMax: undefined,
   xMin: undefined,
-  xScaleID: 'x',
+  xScaleID: undefined,
   xValue: undefined,
   yAdjust: 0,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: 'y',
+  yScaleID: undefined,
   yValue: undefined
 };
 

src/types/polygon.js

@@ -86,12 +86,12 @@ PolygonAnnotation.defaults = {
   xAdjust: 0,
   xMax: undefined,
   xMin: undefined,
-  xScaleID: 'x',
+  xScaleID: undefined,
   xValue: undefined,
   yAdjust: 0,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: 'y',
+  yScaleID: undefined,
   yValue: undefined
 };