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

docs/guide/types/box.md

@@ -70,10 +70,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
 
@@ -86,10 +86,10 @@ If one of the axes does not match an axis in the chart, the box will take the en
 | `drawTime` | See [drawTime](../options#draw-time).
 | `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` | Rotatation 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

@@ -81,12 +81,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
@@ -108,12 +108,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

@@ -85,10 +85,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

@@ -90,12 +90,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);
@@ -281,10 +281,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
 };
 

test/fixtures/box/noDefaultScales.js

@@ -0,0 +1,53 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      datasets: [{
+        data: [0, 5, 10, 15, 20, 22]
+      }]
+    },
+    options: {
+      scales: {
+        x1: {
+          display: false,
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        },
+        y1: {
+          display: true
+        }
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            box1: {
+              type: 'box',
+              adjustScaleRange: true,
+              xMin: 1,
+              xMax: 3,
+              yMin: -2.3,
+              yMax: 10,
+              backgroundColor: 'rgba(33, 101, 171, 0.5)',
+              borderColor: 'rgb(33, 101, 171)',
+              borderWidth: 2
+            },
+            box2: {
+              type: 'box',
+              adjustScaleRange: true,
+              xMin: 4,
+              xMax: 6,
+              yMin: 10,
+              yMax: 27,
+              backgroundColor: 'rgba(33, 101, 171, 0.5)',
+              borderColor: 'rgb(33, 101, 171)',
+              borderWidth: 2
+            }
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};