| [`borderWidth`](#borderwidth) | The bar border width (in pixels).
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
-All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.
+All these values, if `undefined`, fallback to the associated [`elements.bar.*`](../configuration/elements.md#bar-configuration) options.
#### borderSkipped
| `hoverBorderColor` | The bar border color when hovered.
| `hoverBorderWidth` | The bar border width when hovered (in pixels).
-All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.
+All these values, if `undefined`, fallback to the associated [`elements.bar.*`](../configuration/elements.md#bar-configuration) options.
## Dataset Configuration
title: Elements
---
-While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[rectangles](#rectangle-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
+While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[bars](#bar-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
## Global Configuration
The element options can be specified per chart or globally. The global options for elements are defined in `Chart.defaults.elements`. For example, to set the border width of all bar charts globally you would do:
```javascript
-Chart.defaults.elements.rectangle.borderWidth = 2;
+Chart.defaults.elements.bar.borderWidth = 2;
```
## Point Configuration
| `fill` | `boolean`\|`string` | `true` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes).
| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
-## Rectangle Configuration
+## Bar Configuration
-Rectangle elements are used to represent the bars in a bar chart.
+Bar elements are used to represent the bars in a bar chart.
-Global rectangle options: `Chart.defaults.elements.rectangle`.
+Global bar options: `Chart.defaults.elements.bar`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Looks for the dataset that matches the current index and returns that metadata. This returned data has all of the metadata that is used to construct the chart.
-The `data` property of the metadata will contain information about each point, rectangle, etc. depending on the chart type.
+The `data` property of the metadata will contain information about each point, bar, etc. depending on the chart type.
Extensive examples of usage are available in the [Chart.js tests](https://github.com/chartjs/Chart.js/tree/master/test).
#### Specific changes
+* `elements.rectangle` is now `elements.bar`
* `hover.animationDuration` is now configured in `animation.active.duration`
* `responsiveAnimationDuration` is now configured in `animation.resize.duration`
* Polar area `elements.arc.angle` is now configured in degrees instead of radians.
* `Chart.Animation.animationObject` was renamed to `Chart.Animation`
* `Chart.Animation.chartInstance` was renamed to `Chart.Animation.chart`
* `Chart.canvasHelpers` was merged with `Chart.helpers`
+* `Chart.elements.Arc` was renamed to `Chart.elements.ArcElement`
+* `Chart.elements.Line` was renamed to `Chart.elements.LineElement`
+* `Chart.elements.Point` was renamed to `Chart.elements.PointElement`
+* `Chart.elements.Rectangle` was renamed to `Chart.elements.BarElement`
* `Chart.layoutService` was renamed to `Chart.layouts`
* `Chart.pluginService` was renamed to `Chart.plugins`
* `helpers.callCallback` was renamed to `helpers.callback`
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {
- rectangle: {
+ bar: {
borderWidth: 2,
}
},
legend: false,
tooltips: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: colorize.bind(null, false),
borderColor: colorize.bind(null, true),
borderWidth: 2
me.updateElements(meta.data, 0, meta.data.length, mode);
}
- updateElements(rectangles, start, count, mode) {
+ updateElements(bars, start, count, mode) {
const me = this;
const reset = mode === 'reset';
const vscale = me._cachedMeta.vScale;
if (includeOptions) {
properties.options = options;
}
- me.updateElement(rectangles[i], i, properties, mode);
+ me.updateElement(bars[i], i, properties, mode);
}
}
*/
BarController.defaults = {
datasetElementType: false,
- dataElementType: 'rectangle',
+ dataElementType: 'bar',
dataElementOptions: [
'backgroundColor',
'borderColor',
DatasetController.defaults = {};
/**
- * Element type used to generate a meta dataset (e.g. Chart.element.Line).
+ * Element type used to generate a meta dataset (e.g. Chart.element.LineElement).
*/
DatasetController.prototype.datasetElementType = null;
/**
- * Element type used to generate a meta data (e.g. Chart.element.Point).
+ * Element type used to generate a meta data (e.g. Chart.element.PointElement).
*/
DatasetController.prototype.dataElementType = null;
ctx.stroke();
}
-export default class Arc extends Element {
+export default class ArcElement extends Element {
constructor(cfg) {
super();
}
}
-Arc.id = 'arc';
+ArcElement.id = 'arc';
/**
* @type {any}
*/
-Arc.defaults = {
+ArcElement.defaults = {
borderAlign: 'center',
borderColor: '#fff',
borderWidth: 2,
/**
* @type {any}
*/
-Arc.defaultRoutes = {
+ArcElement.defaultRoutes = {
backgroundColor: 'color'
};
/**
* Helper function to get the bounds of the bar regardless of the orientation
- * @param {Rectangle} bar the bar
+ * @param {BarElement} bar the bar
* @param {boolean} [useFinalPosition]
* @return {object} bounds of the bar
* @private
&& (skipY || y >= bounds.top && y <= bounds.bottom);
}
-export default class Rectangle extends Element {
+export default class BarElement extends Element {
constructor(cfg) {
super();
}
}
-Rectangle.id = 'rectangle';
+BarElement.id = 'bar';
/**
* @type {any}
*/
-Rectangle.defaults = {
+BarElement.defaults = {
borderSkipped: 'start',
borderWidth: 0
};
/**
* @type {any}
*/
-Rectangle.defaultRoutes = {
+BarElement.defaultRoutes = {
backgroundColor: 'color',
borderColor: 'color'
};
import {_updateBezierControlPoints} from '../helpers/helpers.curve';
/**
- * @typedef { import("./element.point").default } Point
+ * @typedef { import("./element.point").default } PointElement
*/
function setStyle(ctx, vm) {
* Create path from points, grouping by truncated x-coordinate
* Points need to be in order by x-coordinate for this to work efficiently
* @param {CanvasRenderingContext2D} ctx - Context
- * @param {Line} line
+ * @param {LineElement} line
* @param {object} segment
* @param {number} segment.start - start index of the segment, referring the points array
* @param {number} segment.end - end index of the segment, referring the points array
* Create path from points, grouping by truncated x-coordinate
* Points need to be in order by x-coordinate for this to work efficiently
* @param {CanvasRenderingContext2D} ctx - Context
- * @param {Line} line
+ * @param {LineElement} line
* @param {object} segment
* @param {number} segment.start - start index of the segment, referring the points array
* @param {number} segment.end - end index of the segment, referring the points array
}
/**
- * @param {Line} line - the line
+ * @param {LineElement} line - the line
* @returns {function}
* @private
*/
return _pointInLine;
}
-export default class Line extends Element {
+export default class LineElement extends Element {
constructor(cfg) {
super();
/**
* First non-skipped point on this line
- * @returns {Point|undefined}
+ * @returns {PointElement|undefined}
*/
first() {
const segments = this.segments;
/**
* Last non-skipped point on this line
- * @returns {Point|undefined}
+ * @returns {PointElement|undefined}
*/
last() {
const segments = this.segments;
/**
* Interpolate a point in this line at the same value on `property` as
* the reference `point` provided
- * @param {Point} point - the reference point
+ * @param {PointElement} point - the reference point
* @param {string} property - the property to match on
- * @returns {Point|undefined}
+ * @returns {PointElement|undefined}
*/
interpolate(point, property) {
const me = this;
}
}
-Line.id = 'line';
+LineElement.id = 'line';
/**
* @type {any}
*/
-Line.defaults = {
+LineElement.defaults = {
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0,
/**
* @type {any}
*/
-Line.defaultRoutes = {
+LineElement.defaultRoutes = {
backgroundColor: 'color',
borderColor: 'color'
};
import Element from '../core/core.element';
import {drawPoint} from '../helpers/helpers.canvas';
-export default class Point extends Element {
+export default class PointElement extends Element {
constructor(cfg) {
super();
}
}
-Point.id = 'point';
+PointElement.id = 'point';
/**
* @type {any}
*/
-Point.defaults = {
+PointElement.defaults = {
borderWidth: 1,
hitRadius: 1,
hoverBorderWidth: 1,
/**
* @type {any}
*/
-Point.defaultRoutes = {
+PointElement.defaultRoutes = {
backgroundColor: 'color',
borderColor: 'color'
};
-export {default as Arc} from './element.arc';
-export {default as Line} from './element.line';
-export {default as Point} from './element.point';
-export {default as Rectangle} from './element.rectangle';
+export {default as ArcElement} from './element.arc';
+export {default as LineElement} from './element.line';
+export {default as PointElement} from './element.point';
+export {default as BarElement} from './element.bar';
import {_angleBetween, _angleDiff, _normalizeAngle} from './helpers.math';
/**
- * @typedef { import("../elements/element.line").default } Line
- * @typedef { import("../elements/element.point").default } Point
+ * @typedef { import("../elements/element.line").default } LineElement
+ * @typedef { import("../elements/element.point").default } PointElement
*/
function propertyFn(property) {
* @param {number} segment.start - start index of the segment, referring the points array
* @param {number} segment.end - end index of the segment, referring the points array
* @param {boolean} segment.loop - indicates that the segment is a loop
- * @param {Point[]} points - the points that this segment refers to
+ * @param {PointElement[]} points - the points that this segment refers to
* @param {object} [bounds]
- * @param {string} bounds.property - the property of a `Point` we are bounding. `x`, `y` or `angle`.
+ * @param {string} bounds.property - the property of a `PointElement` we are bounding. `x`, `y` or `angle`.
* @param {number} bounds.start - start value of the property
* @param {number} bounds.end - end value of the property
* @private
/**
* Returns the segments of the line that are inside given bounds
- * @param {Line} line
+ * @param {LineElement} line
* @param {object} [bounds]
* @param {string} bounds.property - the property we are bounding with. `x`, `y` or `angle`.
* @param {number} bounds.start - start value of the `property`
/**
* Compute solid segments from Points, when spanGaps === false
- * @param {Point[]} points - the points
+ * @param {PointElement[]} points - the points
* @param {number} start - start index
* @param {number} max - max index (can go past count on a loop)
* @param {boolean} loop - boolean indicating that this would be a loop if no gaps are found
/**
* Compute the continuous segments that define the whole line
* There can be skipped points within a segment, if spanGaps is true.
- * @param {Line} line
+ * @param {LineElement} line
* @private
*/
export function _computeSegments(line) {
* @see https://github.com/chartjs/Chart.js/issues/2440#issuecomment-256461897
*/
-import Line from '../elements/element.line';
+import LineElement from '../elements/element.line';
import {_boundSegment, _boundSegments} from '../helpers/helpers.segment';
import {clipArea, unclipArea} from '../helpers/helpers.canvas';
import {isArray, isFinite, isObject, valueOrDefault} from '../helpers/helpers.core';
/**
* @typedef { import('../core/core.controller').default } Chart
* @typedef { import('../core/core.scale').default } Scale
- * @typedef { import("../elements/element.point").default } Point
+ * @typedef { import("../elements/element.point").default } PointElement
*/
/**
}
/**
- * @param {Line} line
+ * @param {LineElement} line
*/
function parseFillOption(line) {
const options = line.options;
}
/**
- * @param {Line} line
+ * @param {LineElement} line
* @param {number} index
* @param {number} count
*/
return null;
}
-// TODO: use elements.Arc instead
+// TODO: use elements.ArcElement instead
class simpleArc {
constructor(opts) {
this.x = opts.x;
}
/**
- * @param {{ chart: Chart; scale: Scale; index: number; line: Line; }} source
- * @return {Line}
+ * @param {{ chart: Chart; scale: Scale; index: number; line: LineElement; }} source
+ * @return {LineElement}
*/
function buildStackLine(source) {
const {chart, scale, index, line} = source;
addPointsBelow(points, sourcePoints[j], linesBelow);
}
}
- return new Line({points, options: {}});
+ return new LineElement({points, options: {}});
}
const isLineAndNotInHideAnimation = (meta) => meta.type === 'line' && !meta.hidden;
/**
* @param {Chart} chart
* @param {number} index
- * @return {Line[]}
+ * @return {LineElement[]}
*/
function getLinesBelow(chart, index) {
const below = [];
}
/**
- * @param {Point[]} points
- * @param {Point} sourcePoint
- * @param {Line[]} linesBelow
+ * @param {PointElement[]} points
+ * @param {PointElement} sourcePoint
+ * @param {LineElement[]} linesBelow
*/
function addPointsBelow(points, sourcePoint, linesBelow) {
const postponed = [];
}
/**
- * @param {Line} line
- * @param {Point} sourcePoint
+ * @param {LineElement} line
+ * @param {PointElement} sourcePoint
* @param {string} property
- * @returns {{point?: Point, first?: boolean, last?: boolean}}
+ * @returns {{point?: PointElement, first?: boolean, last?: boolean}}
*/
function findPoint(line, sourcePoint, property) {
const point = line.interpolate(sourcePoint, property);
}
/**
- * @param {Point[] | { x: number; y: number; }} boundary
- * @param {Line} line
- * @return {Line?}
+ * @param {PointElement[] | { x: number; y: number; }} boundary
+ * @param {LineElement} line
+ * @return {LineElement?}
*/
function createBoundaryLine(boundary, line) {
let points = [];
points = pointsFromSegments(boundary, line);
}
- return points.length ? new Line({
+ return points.length ? new LineElement({
points,
options: {tension: 0},
_loop,
line = meta.dataset;
source = null;
- if (line && line.options && line instanceof Line) {
+ if (line && line.options && line instanceof LineElement) {
source = {
visible: chart.isDatasetVisible(i),
index: i,
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: [
'#ff88ff',
'#888888',
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: [
'#000000',
'#888888'
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: function(ctx) {
var value = ctx.dataset.data[ctx.dataIndex] || 0;
return value > 8 ? '#ff00ff'
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: '#00ff00'
}
},
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: [
'#ff88ff',
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: function(ctx) {
var value = ctx.dataset.data[ctx.dataIndex] || 0;
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#00ff00',
borderWidth: 8
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#888',
borderWidth: 8,
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#888',
borderSkipped: function(ctx) {
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#888',
borderSkipped: 'left',
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#80808080',
borderSkipped: false,
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#888',
borderWidth: [
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: '#888',
borderColor: '#f00',
borderWidth: -4
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#888',
borderSkipped: false,
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#80808080',
borderSkipped: false,
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#888',
borderWidth: function(ctx) {
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'transparent',
borderColor: '#888',
borderWidth: 4
}
},
elements: {
- rectangle: {
+ bar: {
backgroundColor: '#00ff00',
borderWidth: 8
}
title: false,
indexAxis: 'y',
elements: {
- rectangle: {
+ bar: {
backgroundColor: '#AAAAAA80',
borderColor: '#80808080',
borderWidth: {bottom: 6, left: 15, top: 6, right: 15}
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: '#AAAAAA80',
borderColor: '#80808080',
borderWidth: {bottom: 6, left: 15, top: 6, right: 15}
expect(meta.controller._getStackIndex(3)).toBe(3);
});
- it('should create rectangle elements for each data item during initialization', function() {
+ it('should create bar elements for each data item during initialization', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
});
var meta = chart.getDatasetMeta(1);
- expect(meta.data.length).toBe(4); // 4 rectangles created
- expect(meta.data[0] instanceof Chart.elements.Rectangle).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Rectangle).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Rectangle).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Rectangle).toBe(true);
+ expect(meta.data.length).toBe(4); // 4 bars created
+ expect(meta.data[0] instanceof Chart.elements.BarElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.BarElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.BarElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.BarElement).toBe(true);
});
it('should update elements when modifying data', function() {
legend: false,
title: false,
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'red',
borderSkipped: 'top',
borderColor: 'green',
expect(meta.data[3].draw.calls.count()).toBe(1);
});
- it('should set hover styles on rectangles', function() {
+ it('should set hover styles on bars', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
},
options: {
elements: {
- rectangle: {
+ bar: {
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 0, 255)',
borderWidth: 2,
},
options: {
elements: {
- rectangle: {
+ bars: {
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 0, 255)',
borderWidth: 2,
var helpers = window.Chart.helpers;
// Change default
- chart.options.elements.rectangle.backgroundColor = 'rgb(128, 128, 128)';
- chart.options.elements.rectangle.borderColor = 'rgb(15, 15, 15)';
- chart.options.elements.rectangle.borderWidth = 3.14;
+ chart.options.elements.bar.backgroundColor = 'rgb(128, 128, 128)';
+ chart.options.elements.bar.borderColor = 'rgb(15, 15, 15)';
+ chart.options.elements.bar.borderWidth = 3.14;
chart.update();
expect(bar.options.backgroundColor).toBe('rgb(128, 128, 128)');
var meta = chart.getDatasetMeta(0);
expect(meta.data.length).toBe(4); // 4 points created
- expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true);
});
it('should draw all elements', function() {
chart.update();
expect(meta.data.length).toBe(2);
- expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
chart.data.datasets[0].data = [{
x: 10,
chart.update();
expect(meta.data.length).toBe(5);
- expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[4] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[4] instanceof Chart.elements.PointElement).toBe(true);
});
describe('Interactions', function() {
});
var meta = chart.getDatasetMeta(0);
- expect(meta.data.length).toBe(4); // 4 rectangles created
- expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data.length).toBe(4); // 4 arcs created
+ expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true);
});
it ('should reset and update elements', function() {
chart.update();
expect(meta.data.length).toBe(2);
- expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true);
// Add data
chart.data.datasets[1].data = [1, 2, 3, 4];
chart.update();
expect(meta.data.length).toBe(4);
- expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true);
});
it ('should rotate and limit circumference', function() {
var meta = chart.getDatasetMeta(0);
expect(meta.data.length).toBe(4); // 4 points created
- expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
- expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // 1 line element
+ expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.dataset instanceof Chart.elements.LineElement).toBe(true); // 1 line element
});
it('should draw all elements', function() {
chart.data.datasets[0].data = [1, 2]; // remove 2 items
chart.update();
expect(meta.data.length).toBe(2);
- expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items
chart.update();
expect(meta.data.length).toBe(5);
- expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[4] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[4] instanceof Chart.elements.PointElement).toBe(true);
});
describe('Interactions', function() {
var meta = chart.getDatasetMeta(1);
expect(meta.data.length).toBe(4); // 4 arcs created
- expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true);
});
it('should draw all elements', function() {
chart.update();
expect(meta.data.length).toBe(2);
- expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true);
// add 3 items
chart.data.labels = ['label1', 'label2', 'label3', 'label4', 'label5'];
chart.update();
expect(meta.data.length).toBe(5);
- expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
- expect(meta.data[4] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true);
+ expect(meta.data[4] instanceof Chart.elements.ArcElement).toBe(true);
});
describe('Interactions', function() {
});
var meta = chart.getDatasetMeta(0);
- expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // line element
+ expect(meta.dataset instanceof Chart.elements.LineElement).toBe(true); // line element
expect(meta.data.length).toBe(4); // 4 points created
- expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
- expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true);
});
it('should draw all elements', function() {
describe('Arc element tests', function() {
it ('should determine if in range', function() {
// Mock out the arc as if the controller put it there
- var arc = new Chart.elements.Arc({
+ var arc = new Chart.elements.ArcElement({
startAngle: 0,
endAngle: Math.PI / 2,
x: 0,
it ('should determine if in range, when full circle', function() {
// Mock out the arc as if the controller put it there
- var arc = new Chart.elements.Arc({
+ var arc = new Chart.elements.ArcElement({
startAngle: -Math.PI,
endAngle: Math.PI * 1.5,
x: 0,
it ('should get the tooltip position', function() {
// Mock out the arc as if the controller put it there
- var arc = new Chart.elements.Arc({
+ var arc = new Chart.elements.ArcElement({
startAngle: 0,
endAngle: Math.PI / 2,
x: 0,
it ('should get the center', function() {
// Mock out the arc as if the controller put it there
- var arc = new Chart.elements.Arc({
+ var arc = new Chart.elements.ArcElement({
startAngle: 0,
endAngle: Math.PI / 2,
x: 0,
--- /dev/null
+// Test the bar element
+
+describe('Bar element tests', function() {
+ it('Should correctly identify as in range', function() {
+ var bar = new Chart.elements.BarElement({
+ base: 0,
+ width: 4,
+ x: 10,
+ y: 15
+ });
+
+ expect(bar.inRange(10, 15)).toBe(true);
+ expect(bar.inRange(10, 10)).toBe(true);
+ expect(bar.inRange(10, 16)).toBe(false);
+ expect(bar.inRange(5, 5)).toBe(false);
+
+ // Test when the y is below the base (negative bar)
+ var negativeBar = new Chart.elements.BarElement({
+ base: 0,
+ width: 4,
+ x: 10,
+ y: -15
+ });
+
+ expect(negativeBar.inRange(10, -16)).toBe(false);
+ expect(negativeBar.inRange(10, 1)).toBe(false);
+ expect(negativeBar.inRange(10, -5)).toBe(true);
+ });
+
+ it('should get the correct tooltip position', function() {
+ var bar = new Chart.elements.BarElement({
+ base: 0,
+ width: 4,
+ x: 10,
+ y: 15
+ });
+
+ expect(bar.tooltipPosition()).toEqual({
+ x: 10,
+ y: 15,
+ });
+
+ // Test when the y is below the base (negative bar)
+ var negativeBar = new Chart.elements.BarElement({
+ base: -10,
+ width: 4,
+ x: 10,
+ y: -15
+ });
+
+ expect(negativeBar.tooltipPosition()).toEqual({
+ x: 10,
+ y: -15,
+ });
+ });
+
+ it('should get the center', function() {
+ var bar = new Chart.elements.BarElement({
+ base: 0,
+ width: 4,
+ x: 10,
+ y: 15
+ });
+
+ expect(bar.getCenterPoint()).toEqual({x: 10, y: 7.5});
+ });
+});
// Tests for the line element
-describe('Chart.elements.Line', function() {
+describe('Chart.elements.LineElement', function() {
describe('auto', jasmine.fixture.specs('element.line'));
it('should be constructed', function() {
- var line = new Chart.elements.Line({
+ var line = new Chart.elements.LineElement({
points: [1, 2, 3, 4]
});
-describe('Chart.elements.Point', function() {
+describe('Chart.elements.PointElement', function() {
describe('auto', jasmine.fixture.specs('element.point'));
it ('Should correctly identify as in range', function() {
// Mock out the point as if we were made by the controller
- var point = new Chart.elements.Point({
+ var point = new Chart.elements.PointElement({
options: {
radius: 2,
hitRadius: 3,
it ('should get the correct tooltip position', function() {
// Mock out the point as if we were made by the controller
- var point = new Chart.elements.Point({
+ var point = new Chart.elements.PointElement({
options: {
radius: 2,
borderWidth: 6,
it('should get the correct center point', function() {
// Mock out the point as if we were made by the controller
- var point = new Chart.elements.Point({
+ var point = new Chart.elements.PointElement({
options: {
radius: 2,
},
var mockContext = window.createMockContext();
// Mock out the point as if we were made by the controller
- var point = new Chart.elements.Point({
+ var point = new Chart.elements.PointElement({
options: {
radius: 2,
hitRadius: 3,
+++ /dev/null
-// Test the rectangle element
-
-describe('Rectangle element tests', function() {
- it('Should correctly identify as in range', function() {
- var rectangle = new Chart.elements.Rectangle({
- base: 0,
- width: 4,
- x: 10,
- y: 15
- });
-
- expect(rectangle.inRange(10, 15)).toBe(true);
- expect(rectangle.inRange(10, 10)).toBe(true);
- expect(rectangle.inRange(10, 16)).toBe(false);
- expect(rectangle.inRange(5, 5)).toBe(false);
-
- // Test when the y is below the base (negative bar)
- var negativeRectangle = new Chart.elements.Rectangle({
- base: 0,
- width: 4,
- x: 10,
- y: -15
- });
-
- expect(negativeRectangle.inRange(10, -16)).toBe(false);
- expect(negativeRectangle.inRange(10, 1)).toBe(false);
- expect(negativeRectangle.inRange(10, -5)).toBe(true);
- });
-
- it('should get the correct tooltip position', function() {
- var rectangle = new Chart.elements.Rectangle({
- base: 0,
- width: 4,
- x: 10,
- y: 15
- });
-
- expect(rectangle.tooltipPosition()).toEqual({
- x: 10,
- y: 15,
- });
-
- // Test when the y is below the base (negative bar)
- var negativeRectangle = new Chart.elements.Rectangle({
- base: -10,
- width: 4,
- x: 10,
- y: -15
- });
-
- expect(negativeRectangle.tooltipPosition()).toEqual({
- x: 10,
- y: -15,
- });
- });
-
- it('should get the center', function() {
- var rectangle = new Chart.elements.Rectangle({
- base: 0,
- width: 4,
- x: 10,
- y: 15
- });
-
- expect(rectangle.getCenterPoint()).toEqual({x: 10, y: 7.5});
- });
-});
describe('Chart.elements', function() {
it('should contains "elements" classes', function() {
- expect(Chart.elements.Arc instanceof Function).toBeTruthy();
- expect(Chart.elements.Line instanceof Function).toBeTruthy();
- expect(Chart.elements.Point instanceof Function).toBeTruthy();
- expect(Chart.elements.Rectangle instanceof Function).toBeTruthy();
+ expect(Chart.elements.ArcElement instanceof Function).toBeTruthy();
+ expect(Chart.elements.BarElement instanceof Function).toBeTruthy();
+ expect(Chart.elements.LineElement instanceof Function).toBeTruthy();
+ expect(Chart.elements.PointElement instanceof Function).toBeTruthy();
});
});
IPointOptions,
IPointPrefixedHoverOptions,
IPointPrefixedOptions,
- IRectangleOptions,
+ IBarOptions,
} from '../elements';
export interface IControllerDatasetOptions {
export interface IBarControllerDatasetOptions
extends IControllerDatasetOptions,
- ScriptableAndArrayOptions<IRectangleOptions>,
+ ScriptableAndArrayOptions<IBarOptions>,
ScriptableAndArrayOptions<ICommonHoverOptions> {
/**
* The base axis of the dataset. 'x' for vertical bars and 'y' for horizontal bars.
hoverOffset: number;
}
-export interface Arc<T extends IArcProps = IArcProps, O extends IArcOptions = IArcOptions>
+export interface ArcElement<T extends IArcProps = IArcProps, O extends IArcOptions = IArcOptions>
extends Element<T, O>,
IVisualElement {}
-export const Arc: IChartComponent & {
- prototype: Arc;
- new (cfg: any): Arc;
+export const ArcElement: IChartComponent & {
+ prototype: ArcElement;
+ new (cfg: any): ArcElement;
};
export interface ILineProps {}
hoverBorderJoinStyle: CanvasLineJoin;
}
-export interface Line<T extends ILineProps = ILineProps, O extends ILineOptions = ILineOptions>
+export interface LineElement<T extends ILineProps = ILineProps, O extends ILineOptions = ILineOptions>
extends Element<T, O>,
IVisualElement {
updateControlPoints(chartArea: IChartArea): void;
path(ctx: CanvasRenderingContext2D): boolean;
}
-export const Line: IChartComponent & {
- prototype: Line;
- new (cfg: any): Line;
+export const LineElement: IChartComponent & {
+ prototype: LineElement;
+ new (cfg: any): LineElement;
};
export interface IPointProps {
pointHoverRadius: number;
}
-export interface Point<T extends IPointProps = IPointProps, O extends IPointOptions = IPointOptions>
+export interface PointElement<T extends IPointProps = IPointProps, O extends IPointOptions = IPointOptions>
extends Element<T, O>,
IVisualElement {
readonly skip: boolean;
}
-export const Point: IChartComponent & {
- prototype: Point;
- new (cfg: any): Point;
+export const PointElement: IChartComponent & {
+ prototype: PointElement;
+ new (cfg: any): PointElement;
};
-export interface IRectangleProps {
+export interface IBarProps {
x: number;
y: number;
base: number;
height: number;
}
-export interface IRectangleOptions extends ICommonOptions {
+export interface IBarOptions extends ICommonOptions {
/**
* The base value for the bar in data units along the value axis.
*/
borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top';
}
-export interface IRectangleHoverOptions extends ICommonHoverOptions {}
+export interface IBarHoverOptions extends ICommonHoverOptions {}
-export interface Rectangle<
- T extends IRectangleProps = IRectangleProps,
- O extends IRectangleOptions = IRectangleOptions
+export interface BarElement<
+ T extends IBarProps = IBarProps,
+ O extends IBarOptions = IBarOptions
> extends Element<T, O>, IVisualElement {}
-export const Rectangle: IChartComponent & {
- prototype: Rectangle;
- new (cfg: any): Rectangle;
+export const BarElement: IChartComponent & {
+ prototype: BarElement;
+ new (cfg: any): BarElement;
};
export interface IElementChartOptions {
elements: {
arc: IArcOptions & IArcHoverOptions;
- rectangle: IRectangleOptions & IRectangleHoverOptions;
+ bar: IBarOptions & IBarHoverOptions;
line: ILineOptions & ILineHoverOptions;
point: IPointOptions & IPointHoverOptions;
};
projects / thirdparty / Chart.js.git / commitdiff
