- console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
- }
- return isRequired;
-}
-
-/**
- * @function
- * @memberof Modifiers
- * @argument {Object} data - The data object generated by update method
- * @argument {Object} options - Modifiers configuration and options
- * @returns {Object} The data object, properly modified
- */
-function arrow(data, options) {
- var _data$offsets$arrow;
-
- // arrow depends on keepTogether in order to work
- if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
- return data;
- }
+ // IE10 10 FIX: Please, don't ask, the element isn't
+ // considered in DOM in some circumstances...
+ // This isn't reproducible in IE10 compatibility mode of IE11
+ try {
+ if (isIE(10)) {
+ rect = element.getBoundingClientRect();
+ var scrollTop = getScroll(element, 'top');
+ var scrollLeft = getScroll(element, 'left');
+ rect.top += scrollTop;
+ rect.left += scrollLeft;
+ rect.bottom += scrollTop;
+ rect.right += scrollLeft;
+ } else {
+ rect = element.getBoundingClientRect();
+ }
+ } catch (e) {}
- var arrowElement = options.element;
+ var result = {
+ left: rect.left,
+ top: rect.top,
+ width: rect.right - rect.left,
+ height: rect.bottom - rect.top
+ };
- // if arrowElement is a string, suppose it's a CSS selector
+ console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
+ }
+ return isRequired;
+ }
+
+ /**
+ * @function
+ * @memberof Modifiers
+ * @argument {Object} data - The data object generated by update method
+ * @argument {Object} options - Modifiers configuration and options
+ * @returns {Object} The data object, properly modified
+ */
+ function arrow(data, options) {
+ var _data$offsets$arrow;
+
+ // arrow depends on keepTogether in order to work
+ if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
return data;
}
- data.hide = false;
- data.attributes['x-out-of-boundaries'] = false;
+ var arrowElement = options.element;
+
+ // if arrowElement is a string, suppose it's a CSS selector
+ * Boundaries used by the modifier, can be `scrollParent`, `window`,
+ * `viewport` or any DOM element.
+ */
+ boundariesElement: 'scrollParent'
+ },
- /**
- * Applies the computed styles to the popper element.
- *
- * All the DOM manipulations are limited to this modifier. This is useful in case
- * you want to integrate Popper.js inside a framework or view library and you
- * want to delegate all the DOM manipulations to it.
- *
- * Note that if you disable this modifier, you must make sure the popper element
- * has its position set to `absolute` before Popper.js can do its work!
- *
- * Just disable this modifier and define you own to achieve the desired effect.
- *
- * @memberof modifiers
- * @inner
- */
- applyStyle: {
- /** @prop {number} order=900 - Index used to define the order of execution */
- order: 900,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: true,
- /** @prop {ModifierFn} */
- fn: applyStyle,
- /** @prop {Function} */
- onLoad: applyStyleOnLoad,
/**
- * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
- * @prop {Boolean} gpuAcceleration=true
- * If true, it uses the CSS 3d transformation to position the popper.
- * Otherwise, it will use the `top` and `left` properties.
+ * Modifier used to make sure the reference and its popper stay near eachothers
+ * without leaving any gap between the two. Expecially useful when the arrow is
+ * enabled and you want to assure it to point to its reference element.
+ * It cares only about the first axis, you can still have poppers with margin
+ * between the popper and its reference element.
+ * @memberof modifiers
+ * @inner
*/
- gpuAcceleration: undefined
- }
-};
-
-/**
- * The `dataObject` is an object containing all the informations used by Popper.js
- * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
- * @name dataObject
- * @property {Object} data.instance The Popper.js instance
- * @property {String} data.placement Placement applied to popper
- * @property {String} data.originalPlacement Placement originally defined on init
- * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
- * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
- * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
- * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
- * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)
- * @property {Object} data.boundaries Offsets of the popper boundaries
- * @property {Object} data.offsets The measurements of popper, reference and arrow elements.
+ * The element which will define the boundaries of the popper position,
+ * the popper will never be placed outside of the defined boundaries
+ * (except if keepTogether is enabled)
+ */
+ boundariesElement: 'viewport'
+ },
+
+ /**
+ * Modifier used to make the popper flow toward the inner of the reference element.
+ * By default, when this modifier is disabled, the popper will be placed outside
+ * the reference element.
+ * @memberof modifiers
+ * @inner
+ */
+ inner: {
+ /** @prop {number} order=700 - Index used to define the order of execution */
+ order: 700,
+ /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
+ enabled: false,
+ /** @prop {ModifierFn} */
+ fn: inner
+ },
+
+ /**
+ * Modifier used to hide the popper when its reference element is outside of the
+ * popper boundaries. It will set a `x-out-of-boundaries` attribute which can
+ * be used to hide with a CSS selector the popper when its reference is
+ * out of boundaries.
+ *
+ * Requires the `preventOverflow` modifier before it in order to work.
+ * @memberof modifiers
+ * @inner
+ */
+ hide: {
+ /** @prop {number} order=800 - Index used to define the order of execution */
+ order: 800,
+ /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
+ enabled: true,
+ /** @prop {ModifierFn} */
+ fn: hide
+ },
+
+ /**
+ * Computes the style that will be applied to the popper element to gets
+ * properly positioned.
+ *
+ * Note that this modifier will not touch the DOM, it just prepares the styles
+ * so that `applyStyle` modifier can apply it. This separation is useful
+ * in case you need to replace `applyStyle` with a custom implementation.
+ *
+ * This modifier has `850` as `order` value to maintain backward compatibility
+ * with previous versions of Popper.js. Expect the modifiers ordering method
+ * to change in future major versions of the library.
+ *
+ * @memberof modifiers
+ * @inner
+ */
+ computeStyle: {
+ /** @prop {number} order=850 - Index used to define the order of execution */
+ order: 850,
+ /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
+ enabled: true,
+ /** @prop {ModifierFn} */
+ fn: computeStyle,
+ /**
+ * @prop {Boolean} gpuAcceleration=true
+ * If true, it uses the CSS 3d transformation to position the popper.
+ * Otherwise, it will use the `top` and `left` properties.
+ */
+ gpuAcceleration: true,
+ /**
+ * @prop {string} [x='bottom']
+ * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
+ * Change this if your popper should grow in a direction different from `bottom`
+ */
+ x: 'bottom',
+ /**
+ * @prop {string} [x='left']
+ * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
+ * Change this if your popper should grow in a direction different from `right`
+ */
+ y: 'right'
+ },
+
+ /**
+ * Applies the computed styles to the popper element.
+ *
+ * All the DOM manipulations are limited to this modifier. This is useful in case
+ * you want to integrate Popper.js inside a framework or view library and you
+ * want to delegate all the DOM manipulations to it.
+ *
+ * Note that if you disable this modifier, you must make sure the popper element
+ * has its position set to `absolute` before Popper.js can do its work!
+ *
+ * Just disable this modifier and define you own to achieve the desired effect.
+ *
+ * @memberof modifiers
+ * @inner
+ */
+ applyStyle: {
+ /** @prop {number} order=900 - Index used to define the order of execution */
+ order: 900,
+ /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
+ enabled: true,
+ /** @prop {ModifierFn} */
+ fn: applyStyle,
+ /** @prop {Function} */
+ onLoad: applyStyleOnLoad,
+ /**
+ * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
+ * @prop {Boolean} gpuAcceleration=true
+ * If true, it uses the CSS 3d transformation to position the popper.
+ * Otherwise, it will use the `top` and `left` properties.
+ */
+ gpuAcceleration: undefined
+ }
+ };
/**
- * Callback called when the popper is created.<br />
- * By default, is set to no-op.<br />
- * Access Popper.js instance with `data.instance`.
- * @prop {onCreate}
+ * The `dataObject` is an object containing all the informations used by Popper.js
+ * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
+ * @name dataObject
+ * @property {Object} data.instance The Popper.js instance
+ * @property {String} data.placement Placement applied to popper
+ * @property {String} data.originalPlacement Placement originally defined on init
+ * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
+ * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
+ * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
+ * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
+ * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)
+ * @property {Object} data.boundaries Offsets of the popper boundaries
+ * @property {Object} data.offsets The measurements of popper, reference and arrow elements.
+ $link.addClass(ClassName.ACTIVE); // Set triggered links parents as active
+ // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
- $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ", " + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE); // Handle special case when .nav-link is inside .nav-item
+ $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ", " + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE); // Handle special case when .nav-link is inside .nav-item
+ $link.addClass(ClassName.ACTIVE); // Set triggered links parents as active
+ // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
- $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ", " + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE); // Handle special case when .nav-link is inside .nav-item
+ $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ", " + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE); // Handle special case when .nav-link is inside .nav-item
<h2 id="axis-range-settings">Axis Range Settings</h2>
<p>Given the number of axis range settings, it is important to understand how they all interact with each other.</p>
-<p>The <code>suggestedMax</code> and <code>suggestedMin</code> settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaing the auto fit behaviour.</p>
+<p>The <code>suggestedMax</code> and <code>suggestedMin</code> settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.</p>
<h2 id="axis-range-settings">Axis Range Settings</h2>
<p>Given the number of axis range settings, it is important to understand how they all interact with each other.</p>
-<p>The <code>suggestedMax</code> and <code>suggestedMin</code> settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaing the auto fit behaviour.</p>
+<p>The <code>suggestedMax</code> and <code>suggestedMin</code> settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.</p>
<p>The <code>data</code> property of a dataset for a bar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.</p>
<p>It is common to want to apply a configuration setting to all created radar charts. The global radar chart settings are stored in <code>Chart.defaults.radar</code>. Changing the global options only affects charts created after the change. Existing charts are not changed.</p>
<h2 id="data-structure">Data Structure</h2>
-<p>The <code>data</code> property of a dataset for a radar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.</p>
+<p>The <code>data</code> property of a dataset for a radar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.</p>
-<td>A callback that is called when a click event is registered on a label item</td>
+<td>A callback that is called when a click event is registered on a label item</td>
</tr>
<tr>
<td><code>onHover</code></td>
@@ -1105,6 +1118,7 @@
}
});
</code></pre>
+<p>Note that legendCallback is not called automatically and you must call <code>generateLegend()</code> yourself in code when creating a legend using this method.</p>
+<p>The label callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.</p>
<p>For example, to derive a new chart type that extends from a bubble chart, you would do the following.</p>
-<pre><code class="lang-javascript"><span class="hljs-comment">// Sets the default config for 'derivedBubble' to be the same as the bubble defaults.</span>
+<pre><code class="lang-javascript"><span class="hljs-comment">// Sets the default config for 'derivedBubble' to be the same as the bubble defaults.</span>
<span class="hljs-comment">// We look for the defaults by doing Chart.defaults[chartType]</span>
<span class="hljs-comment">// It looks like a bug exists when the defaults don't exist</span>
-<p>It's pretty common to want to update charts after they've been created. When the chart data is changed, Chart.js will animate to the new data values.</p>
+<p>It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate to the new data values and options.</p>
<h2 id="adding-or-removing-data">Adding or Removing Data</h2>
<p>Adding and removing data is supported by changing the data array. To add data, just add data into the data array as seen in this example.</p>
+<p>Scales can be updated separately without changing other options.
+To update the scales, pass in an object containing all the customization including those unchanged ones.</p>
+<p>Variables referencing any one from <code>chart.scales</code> would be lost after updating scales with a new <code>id</code> or the changed <code>type</code>.</p>
<p>Sometimes when a chart updates, you may not want an animation. To achieve this you can call <code>update</code> with a duration of <code>0</code>. This will render the chart synchronously and without an animation.</p>
<p>When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at <code>Chart.defaults.global.defaultColor</code>. It is initially set to <code>'rgba(0, 0, 0, 0.1)'</code></p>
<p>You can also pass a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient" target="_blank">CanvasGradient</a> object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.</p>
<h2 id="patterns-and-gradients">Patterns and Gradients</h2>
-<p>An alternative option is to pass a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern" target="_blank">CanvasPattern</a> or <a href="https://developer.mozilla.org/en/docs/Web/API/CanvasGradient" target="_blank">CanvasGradient</a> object instead of a string colour.</p>
+<p>An alternative option is to pass a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern" target="_blank">CanvasPattern</a> or <a href="https://developer.mozilla.org/en/docs/Web/API/CanvasGradient" target="_blank">CanvasGradient</a> object instead of a string colour.</p>
<p>For example, if you wanted to fill a dataset with a pattern from an image you could do the following.</p>
-<p>The hover configuration is passed into the <code>options.hover</code> namespace. The global hover configuration is at <code>Chart.defaults.global.hover</code>. To configure which events trigger chart interactions, see <a href="events.html#events">events</a>.</p>
+<p>The hover configuration is passed into the <code>options.hover</code> namespace. The global hover configuration is at <code>Chart.defaults.global.hover</code>. To configure which events trigger chart interactions, see <a href="events.html#events">events</a>.</p>