Chart.js Specific Methods

configMerge(base, object1, object2, ...)

configMerge is used to merge a chart's configured options into the defaults for the chart type. We want to take the configured options where they are available and the defaults where they are not.

While configMerge seems pretty similar to Chart.helpers.extend there are a few minor differences and a few other differences that are notable.

While both configMerge and extend return a much more heavier value than what was passed in, extend modifies base, configMerge does not.
If both base and objectn have a property with the same name, extend simply takes objectn's value. configMerge merges objectn's value into base's value if they are both objects. The scale or scales properties are exceptions.
- When the property is named scale, we assume that the value is a scale and configMerge the default scale properties for that scale type onto base before we configMerge objectn's value. The type for the scale comes from objectn (and not base).
- When the property is named scales, we use Chart.helpers.scaleMerge to merge the values.
Primitives and null values in base are overwritten by objectn's values just like in extend

// primitives and arrays are overwritten, objects are merged
Chart.helpers.configMerge(
    { firstName: "John", parkingSpots: [ 1, 3, 5 ], address: { number: 21 } },
    { firstName: "Jane", parkingSpots: [ 2, 4, 6 ], address: { street: "Baker" } }
);
//  { firstName: "Jane", parkingSpots: [ 2, 4, 6 ], address: { number: 21, street: "Baker" } }

// the scale property has additional defaults added into it based on the scale type
configMerge(
    { scale: { name: "Bob" } },
    { scale: { type: "category" } }
);
//  { scale: { name: "bob", display: true, ...other defaults for the category scale... , type: "category" } }

getRelativePosition(event, chartInstance)

The browser attaches the position to click and touch events. This position is relative to the browser viewport. When dealing with events inside the canvas, we want the canvas coordinates. getRelativePosition gets you the canvas coordinates accounting for the position and padding of the canvas, and any device pixel scaling we may have done in retinaScale.

The return value is a position object with an x property and a y property set to the canvas coordinates of event.

scaleMerge(base, object1)

scaleMerge is used to merge a scales object into another. A scales object typically contains 2 arrays of scale configurations - one for x axes and one for y axes.

An array of scale configurations is merged into another using the following logic

If the base scales object doesn't have a configuration at that index, or if it doesn't have a scale type specified, we configMerge the object1 scale configuration onto the default scale properties for the scale type. If a type is not specified, it's assumed to be 'category' for xAxes scales and 'linear' for yAxes scales.
If the base scale configuration has a type that is different from that in object1, we configMerge the default scale properties (from object1) onto this and then the corresponding object1 scale configuration.
If the type matches, we configMerge the corresponding object1 scale configuration directly onto the base scale configuation.

For all other properties on the scales object, we directly use configMerge.

// if the types differ we get the defaults and then objectn's scale configuration
Chart.helpers.scaleMerge(
    { xAxes: [ { type: 'linear'   } ] },
    { xAxes: [ { type: 'category' } ] }
);
//  { xAxes: [ { display: true, ...other defaults for the category scale..., type: 'category' } ] }

// the default scale type is 'category' for xAxes (and 'linear' for yAxes)
Chart.helpers.scaleMerge(
    { xAxes: [    ] },
    { xAxes: [ {} ] }
);
//  { xAxes: [ { display: true, ...other defaults for the category scale..., type: 'category' } ] }

// if the scale types match a simple configMerge is done
Chart.helpers.scaleMerge(
    { xAxes: [ { type: 'linear', name: 'Bob'   } ] },
    { xAxes: [ { type: 'linear', height: '8ft' } ] }
);
//  { xAxes: [ { type: 'linear', name: 'Bob', height: '8ft' } ] }

// other properties are simply merged
Chart.helpers.scaleMerge(
    { backpack: { color: "blue" } },
    { backpack: { material: "kevlar" } }
);
//  { backpack: { color: "blue", material: "kevlar" } },

Chart.js Specific Methods