To create a chart with configuration options, simply pass an object containing your configuration to the constructor. In the example below, a line chart is created and configured to not be responsive.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Chart.defaults.global.hover.mode = 'nearest';
// Hover mode is set to nearest because it was not overridden here
-var chartInstanceHoverModeNearest = new Chart(ctx, {
+var chartHoverModeNearest = new Chart(ctx, {
type: 'line',
data: data,
});
// This chart would have the hover mode that was passed in
-var chartInstanceDifferentHoverMode = new Chart(ctx, {
+var chartDifferentHoverMode = new Chart(ctx, {
type: 'line',
data: data,
options: {
The example below would enable a title of 'Custom Chart Title' on the chart that is created.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
The following example will create a chart with the legend enabled and turn all of the text red in color.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
beforeBody | `Array[tooltipItem], data` | Text to render before the body section
beforeLabel | `tooltipItem, data` | Text to render before an individual label
label | `tooltipItem, data` | Text to render for an individual item in the tooltip
-labelColor | `tooltipItem, chartInstance` | Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`.
+labelColor | `tooltipItem, chart` | Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`.
afterLabel | `tooltipItem, data` | Text to render after an individual label
afterBody | `Array[tooltipItem], data` | Text to render after the body section
beforeFooter | `Array[tooltipItem], data` | Text to render before the footer section
The following table details the modes and how they behave in conjunction with the `intersect` setting
-Mode | Behaviour
---- | ---
+Mode | Behaviour
+--- | ---
point | Finds all of the items that intersect the point
nearest | Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
single (deprecated) | Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.
label (deprecated) | See `'index'` mode
-index | Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
+index | Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
x-axis (deprecated) | Behaves like `'index'` mode with `intersect = false`
dataset | Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
x | Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts
```javascript
{
- // Chart object
- chartInstance,
+ // Chart instance
+ chart,
// Contains details of the on-going animation
animationObject,
If the callback returns `null` or `undefined` the associated grid line will be hidden.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
The following example creates a line chart with a vertical axis that goes from 0 to 5 in 0.5 sized steps.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
The following example creates a chart with a logarithmic X axis that ranges from 1 to 1000.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
For example, to set the display format for the 'quarter' unit to show the month and year, the following config would be passed to the chart constructor.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
Plugins should implement the `IPlugin` interface:
```javascript
{
- beforeInit: function(chartInstance) { },
- afterInit: function(chartInstance) { },
+ beforeInit: function(chart) { },
+ afterInit: function(chart) { },
- resize: function(chartInstance, newChartSize) { },
+ resize: function(chart, newChartSize) { },
- beforeUpdate: function(chartInstance) { },
- afterScaleUpdate: function(chartInstance) { }
- beforeDatasetsUpdate: function(chartInstance) { }
- afterDatasetsUpdate: function(chartInstance) { }
- afterUpdate: function(chartInstance) { },
+ beforeUpdate: function(chart) { },
+ afterScaleUpdate: function(chart) { }
+ beforeDatasetsUpdate: function(chart) { }
+ afterDatasetsUpdate: function(chart) { }
+ afterUpdate: function(chart) { },
// This is called at the start of a render. It is only called once, even if the animation will run for a number of frames. Use beforeDraw or afterDraw
// to do something on each animation frame
- beforeRender: function(chartInstance) { },
+ beforeRender: function(chart) { },
// Easing is for animation
- beforeDraw: function(chartInstance, easing) { },
- afterDraw: function(chartInstance, easing) { },
+ beforeDraw: function(chart, easing) { },
+ afterDraw: function(chart, easing) { },
// Before the datasets are drawn but after scales are drawn
- beforeDatasetsDraw: function(chartInstance, easing) { },
- afterDatasetsDraw: function(chartInstance, easing) { },
+ beforeDatasetsDraw: function(chart, easing) { },
+ afterDatasetsDraw: function(chart, easing) { },
- destroy: function(chartInstance) { }
+ destroy: function(chart) { }
// Called when an event occurs on the chart
- beforeEvent: function(chartInstance, event) {}
- afterEvent: function(chartInstance, event) {}
+ beforeEvent: function(chart, event) {}
+ afterEvent: function(chart, event) {}
}
```
// Define a plugin to provide data labels
Chart.plugins.register({
- afterDatasetsDraw: function(chartInstance, easing) {
+ afterDatasetsDraw: function(chart, easing) {
// To only draw at the end of animation, check for easing === 1
- var ctx = chartInstance.ctx;
+ var ctx = chart.ctx;
- chartInstance.data.datasets.forEach(function (dataset, i) {
- var meta = chartInstance.getDatasetMeta(i);
+ chart.data.datasets.forEach(function (dataset, i) {
+ var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
/**
* @function Chart.animationService.addAnimation
- * @param chartInstance {ChartController} the chart to animate
+ * @param chart {ChartController} the chart to animate
* @param animationObject {IAnimation} the animation that we will animate
* @param duration {Number} length of animation in ms
* @param lazy {Boolean} if true, the chart is not marked as animating to enable more responsive interactions
*/
- addAnimation: function(chartInstance, animationObject, duration, lazy) {
+ addAnimation: function(chart, animationObject, duration, lazy) {
var me = this;
if (!lazy) {
- chartInstance.animating = true;
+ chart.animating = true;
}
for (var index = 0; index < me.animations.length; ++index) {
- if (me.animations[index].chartInstance === chartInstance) {
+ if (me.animations[index].chart === chart) {
// replacing an in progress animation
me.animations[index].animationObject = animationObject;
return;
}
me.animations.push({
- chartInstance: chartInstance,
+ chart: chart,
+ chartInstance: chart, // deprecated, backward compatibility
animationObject: animationObject
});
}
},
// Cancel the animation for a given chart instance
- cancelAnimation: function(chartInstance) {
+ cancelAnimation: function(chart) {
var index = helpers.findIndex(this.animations, function(animationWrapper) {
- return animationWrapper.chartInstance === chartInstance;
+ return animationWrapper.chart === chart;
});
if (index !== -1) {
this.animations.splice(index, 1);
- chartInstance.animating = false;
+ chart.animating = false;
}
},
requestAnimationFrame: function() {
me.animations[i].animationObject.currentStep = me.animations[i].animationObject.numSteps;
}
- me.animations[i].animationObject.render(me.animations[i].chartInstance, me.animations[i].animationObject);
+ me.animations[i].animationObject.render(me.animations[i].chart, me.animations[i].animationObject);
if (me.animations[i].animationObject.onAnimationProgress && me.animations[i].animationObject.onAnimationProgress.call) {
- me.animations[i].animationObject.onAnimationProgress.call(me.animations[i].chartInstance, me.animations[i]);
+ me.animations[i].animationObject.onAnimationProgress.call(me.animations[i].chart, me.animations[i]);
}
if (me.animations[i].animationObject.currentStep === me.animations[i].animationObject.numSteps) {
if (me.animations[i].animationObject.onAnimationComplete && me.animations[i].animationObject.onAnimationComplete.call) {
- me.animations[i].animationObject.onAnimationComplete.call(me.animations[i].chartInstance, me.animations[i]);
+ me.animations[i].animationObject.onAnimationComplete.call(me.animations[i].chart, me.animations[i]);
}
// executed the last frame. Remove the animation.
- me.animations[i].chartInstance.animating = false;
+ me.animations[i].chart.animating = false;
me.animations.splice(i, 1);
} else {
animation.easing = animationOptions.easing;
// render function
- animation.render = function(chartInstance, animationObject) {
+ animation.render = function(chart, animationObject) {
var easingFunction = helpers.easingEffects[animationObject.easing];
var stepDecimal = animationObject.currentStep / animationObject.numSteps;
var easeDecimal = easingFunction(stepDecimal);
- chartInstance.draw(easeDecimal, stepDecimal, animationObject.currentStep);
+ chart.draw(easeDecimal, stepDecimal, animationObject.currentStep);
};
// user events
var me = this;
me.tooltip = new Chart.Tooltip({
_chart: me,
- _chartInstance: me,
+ _chartInstance: me, // deprecated, backward compatibility
_data: me.data,
_options: me.options.tooltips
}, me);
Chart.layoutService = {
defaults: {},
- // Register a box to a chartInstance. A box is simply a reference to an object that requires layout. eg. Scales, Legend, Plugins.
- addBox: function(chartInstance, box) {
- if (!chartInstance.boxes) {
- chartInstance.boxes = [];
+ // Register a box to a chart. A box is simply a reference to an object that requires layout. eg. Scales, Legend, Plugins.
+ addBox: function(chart, box) {
+ if (!chart.boxes) {
+ chart.boxes = [];
}
- chartInstance.boxes.push(box);
+ chart.boxes.push(box);
},
- removeBox: function(chartInstance, box) {
- if (!chartInstance.boxes) {
+ removeBox: function(chart, box) {
+ if (!chart.boxes) {
return;
}
- chartInstance.boxes.splice(chartInstance.boxes.indexOf(box), 1);
+ chart.boxes.splice(chart.boxes.indexOf(box), 1);
},
// The most important function
- update: function(chartInstance, width, height) {
+ update: function(chart, width, height) {
- if (!chartInstance) {
+ if (!chart) {
return;
}
- var layoutOptions = chartInstance.options.layout;
+ var layoutOptions = chart.options.layout;
var padding = layoutOptions ? layoutOptions.padding : null;
var leftPadding = 0;
bottomPadding = padding.bottom || 0;
}
- var leftBoxes = helpers.where(chartInstance.boxes, function(box) {
+ var leftBoxes = helpers.where(chart.boxes, function(box) {
return box.options.position === 'left';
});
- var rightBoxes = helpers.where(chartInstance.boxes, function(box) {
+ var rightBoxes = helpers.where(chart.boxes, function(box) {
return box.options.position === 'right';
});
- var topBoxes = helpers.where(chartInstance.boxes, function(box) {
+ var topBoxes = helpers.where(chart.boxes, function(box) {
return box.options.position === 'top';
});
- var bottomBoxes = helpers.where(chartInstance.boxes, function(box) {
+ var bottomBoxes = helpers.where(chart.boxes, function(box) {
return box.options.position === 'bottom';
});
// Boxes that overlay the chartarea such as the radialLinear scale
- var chartAreaBoxes = helpers.where(chartInstance.boxes, function(box) {
+ var chartAreaBoxes = helpers.where(chart.boxes, function(box) {
return box.options.position === 'chartArea';
});
helpers.each(bottomBoxes, placeBox);
// Step 8
- chartInstance.chartArea = {
+ chart.chartArea = {
left: totalLeftBoxesWidth,
top: totalTopBoxesHeight,
right: totalLeftBoxesWidth + maxChartAreaWidth,
// Step 9
helpers.each(chartAreaBoxes, function(box) {
- box.left = chartInstance.chartArea.left;
- box.top = chartInstance.chartArea.top;
- box.right = chartInstance.chartArea.right;
- box.bottom = chartInstance.chartArea.bottom;
+ box.left = chart.chartArea.left;
+ box.top = chart.chartArea.top;
+ box.right = chart.chartArea.right;
+ box.bottom = chart.chartArea.bottom;
box.update(maxChartAreaWidth, maxChartAreaHeight);
});
}
});
- function createNewLegendAndAttach(chartInstance, legendOpts) {
+ function createNewLegendAndAttach(chart, legendOpts) {
var legend = new Chart.Legend({
- ctx: chartInstance.ctx,
+ ctx: chart.ctx,
options: legendOpts,
- chart: chartInstance
+ chart: chart
});
- chartInstance.legend = legend;
- Chart.layoutService.addBox(chartInstance, legend);
+ chart.legend = legend;
+ Chart.layoutService.addBox(chart, legend);
}
// Register the legend plugin
Chart.plugins.register({
- beforeInit: function(chartInstance) {
- var legendOpts = chartInstance.options.legend;
+ beforeInit: function(chart) {
+ var legendOpts = chart.options.legend;
if (legendOpts) {
- createNewLegendAndAttach(chartInstance, legendOpts);
+ createNewLegendAndAttach(chart, legendOpts);
}
},
- beforeUpdate: function(chartInstance) {
- var legendOpts = chartInstance.options.legend;
+ beforeUpdate: function(chart) {
+ var legendOpts = chart.options.legend;
if (legendOpts) {
legendOpts = helpers.configMerge(Chart.defaults.global.legend, legendOpts);
- if (chartInstance.legend) {
- chartInstance.legend.options = legendOpts;
+ if (chart.legend) {
+ chart.legend.options = legendOpts;
} else {
- createNewLegendAndAttach(chartInstance, legendOpts);
+ createNewLegendAndAttach(chart, legendOpts);
}
} else {
- Chart.layoutService.removeBox(chartInstance, chartInstance.legend);
- delete chartInstance.legend;
+ Chart.layoutService.removeBox(chart, chart.legend);
+ delete chart.legend;
}
},
- afterEvent: function(chartInstance, e) {
- var legend = chartInstance.legend;
+ afterEvent: function(chart, e) {
+ var legend = chart.legend;
if (legend) {
legend.handleEvent(e);
}
defaults[type] = helpers.extend(defaults[type], additions);
}
},
- addScalesToLayout: function(chartInstance) {
+ addScalesToLayout: function(chart) {
// Adds each scale to the chart.boxes array to be sized accordingly
- helpers.each(chartInstance.scales, function(scale) {
- Chart.layoutService.addBox(chartInstance, scale);
+ helpers.each(chart.scales, function(scale) {
+ Chart.layoutService.addBox(chart, scale);
});
}
};
}
});
- function createNewTitleBlockAndAttach(chartInstance, titleOpts) {
+ function createNewTitleBlockAndAttach(chart, titleOpts) {
var title = new Chart.Title({
- ctx: chartInstance.ctx,
+ ctx: chart.ctx,
options: titleOpts,
- chart: chartInstance
+ chart: chart
});
- chartInstance.titleBlock = title;
- Chart.layoutService.addBox(chartInstance, title);
+ chart.titleBlock = title;
+ Chart.layoutService.addBox(chart, title);
}
// Register the title plugin
Chart.plugins.register({
- beforeInit: function(chartInstance) {
- var titleOpts = chartInstance.options.title;
+ beforeInit: function(chart) {
+ var titleOpts = chart.options.title;
if (titleOpts) {
- createNewTitleBlockAndAttach(chartInstance, titleOpts);
+ createNewTitleBlockAndAttach(chart, titleOpts);
}
},
- beforeUpdate: function(chartInstance) {
- var titleOpts = chartInstance.options.title;
+ beforeUpdate: function(chart) {
+ var titleOpts = chart.options.title;
if (titleOpts) {
titleOpts = helpers.configMerge(Chart.defaults.global.title, titleOpts);
- if (chartInstance.titleBlock) {
- chartInstance.titleBlock.options = titleOpts;
+ if (chart.titleBlock) {
+ chart.titleBlock.options = titleOpts;
} else {
- createNewTitleBlockAndAttach(chartInstance, titleOpts);
+ createNewTitleBlockAndAttach(chart, titleOpts);
}
} else {
- Chart.layoutService.removeBox(chartInstance, chartInstance.titleBlock);
- delete chartInstance.titleBlock;
+ Chart.layoutService.removeBox(chart, chart.titleBlock);
+ delete chart.titleBlock;
}
}
});
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + tooltipItem.yLabel;
},
- labelColor: function(tooltipItem, chartInstance) {
- var meta = chartInstance.getDatasetMeta(tooltipItem.datasetIndex);
+ labelColor: function(tooltipItem, chart) {
+ var meta = chart.getDatasetMeta(tooltipItem.datasetIndex);
var activeElement = meta.data[tooltipItem.index];
var view = activeElement._view;
return {
function determineAlignment(tooltip, size) {
var model = tooltip._model;
var chart = tooltip._chart;
- var chartArea = tooltip._chartInstance.chartArea;
+ var chartArea = tooltip._chart.chartArea;
var xAlign = 'center';
var yAlign = 'center';
var active = me._active;
var data = me._data;
- var chartInstance = me._chartInstance;
// In the case where active.length === 0 we need to keep these at existing values for good animations
var alignment = {
// Determine colors for boxes
helpers.each(tooltipItems, function(tooltipItem) {
- labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, chartInstance));
+ labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart));
});
// Build the Text Lines
if (e.type === 'mouseout') {
me._active = [];
} else {
- me._active = me._chartInstance.getElementsAtEventForMode(e, options.mode, options);
+ me._active = me._chart.getElementsAtEventForMode(e, options.mode, options);
}
// Remember Last Actives
describe('Core.Interaction', function() {
describe('point mode', function() {
it ('should return all items under the point', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
var point = meta0.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
currentTarget: node
};
- var elements = Chart.Interaction.modes.point(chartInstance, evt);
+ var elements = Chart.Interaction.modes.point(chart, evt);
expect(elements).toEqual([point, meta1.data[1]]);
});
it ('should return an empty array when no items are found', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event at (0, 0)
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var evt = {
view: window,
bubbles: true,
currentTarget: node
};
- var elements = Chart.Interaction.modes.point(chartInstance, evt);
+ var elements = Chart.Interaction.modes.point(chart, evt);
expect(elements).toEqual([]);
});
});
describe('index mode', function() {
it ('should return all items at the same index', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
var point = meta0.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
currentTarget: node
};
- var elements = Chart.Interaction.modes.index(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.index(chart, evt, {intersect: true});
expect(elements).toEqual([point, meta1.data[1]]);
});
it ('should return all items at the same index when intersect is false', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
currentTarget: node
};
- var elements = Chart.Interaction.modes.index(chartInstance, evt, {intersect: false});
+ var elements = Chart.Interaction.modes.index(chart, evt, {intersect: false});
expect(elements).toEqual([meta0.data[0], meta1.data[0]]);
});
});
describe('dataset mode', function() {
it ('should return all items in the dataset of the first item found', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta = chartInstance.getDatasetMeta(0);
+ var meta = chart.getDatasetMeta(0);
var point = meta.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
currentTarget: node
};
- var elements = Chart.Interaction.modes.dataset(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.dataset(chart, evt, {intersect: true});
expect(elements).toEqual(meta.data);
});
it ('should return all items in the dataset of the first item found when intersect is false', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
}
});
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
currentTarget: node
};
- var elements = Chart.Interaction.modes.dataset(chartInstance, evt, {intersect: false});
+ var elements = Chart.Interaction.modes.dataset(chart, evt, {intersect: false});
- var meta = chartInstance.getDatasetMeta(1);
+ var meta = chart.getDatasetMeta(1);
expect(elements).toEqual(meta.data);
});
});
describe('nearest mode', function() {
it ('should return the nearest item', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta = chartInstance.getDatasetMeta(1);
- var node = chartInstance.canvas;
+ var meta = chart.getDatasetMeta(1);
+ var node = chart.canvas;
var evt = {
view: window,
bubbles: true,
};
// Nearest to 0,0 (top left) will be first point of dataset 2
- var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: false});
+ var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false});
expect(elements).toEqual([meta.data[0]]);
});
it ('should return the smallest item if more than 1 are at the same distance', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
// Halfway between 2 mid points
var pt = {
y: (meta0.data[1]._view.y + meta1.data[1]._view.y) / 2
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
};
// Nearest to 0,0 (top left) will be first point of dataset 2
- var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: false});
+ var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false});
expect(elements).toEqual([meta0.data[1]]);
});
it ('should return the lowest dataset index if size and area are the same', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
// Halfway between 2 mid points
var pt = {
y: (meta0.data[1]._view.y + meta1.data[1]._view.y) / 2
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
};
// Nearest to 0,0 (top left) will be first point of dataset 2
- var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: false});
+ var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false});
expect(elements).toEqual([meta0.data[1]]);
});
});
describe('nearest intersect mode', function() {
it ('should return the nearest item', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta = chartInstance.getDatasetMeta(1);
+ var meta = chart.getDatasetMeta(1);
var point = meta.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
};
// Nothing intersects so find nothing
- var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true});
expect(elements).toEqual([]);
evt = {
clientY: rect.top + point._view.y,
currentTarget: node
};
- elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true});
+ elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true});
expect(elements).toEqual([point]);
});
it ('should return the nearest item even if 2 intersect', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
+ var meta0 = chart.getDatasetMeta(0);
// Halfway between 2 mid points
var pt = {
y: meta0.data[1]._view.y
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
};
// Nearest to 0,0 (top left) will be first point of dataset 2
- var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true});
expect(elements).toEqual([meta0.data[1]]);
});
it ('should return the smallest item if more than 1 are at the same distance', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
+ var meta0 = chart.getDatasetMeta(0);
// Halfway between 2 mid points
var pt = {
y: meta0.data[1]._view.y
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
};
// Nearest to 0,0 (top left) will be first point of dataset 2
- var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true});
expect(elements).toEqual([meta0.data[1]]);
});
it ('should return the item at the lowest dataset index if distance and area are the same', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
+ var meta0 = chart.getDatasetMeta(0);
// Halfway between 2 mid points
var pt = {
y: meta0.data[1]._view.y
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
};
// Nearest to 0,0 (top left) will be first point of dataset 2
- var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true});
expect(elements).toEqual([meta0.data[1]]);
});
});
describe('x mode', function() {
it('should return items at the same x value when intersect is false', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
// Halfway between 2 mid points
var pt = {
y: meta0.data[1]._view.y
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
currentTarget: node
};
- var elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: false});
+ var elements = Chart.Interaction.modes.x(chart, evt, {intersect: false});
expect(elements).toEqual([meta0.data[1], meta1.data[1]]);
evt = {
currentTarget: node
};
- elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: false});
+ elements = Chart.Interaction.modes.x(chart, evt, {intersect: false});
expect(elements).toEqual([]);
});
it('should return items at the same x value when intersect is true', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
// Halfway between 2 mid points
var pt = {
y: meta0.data[1]._view.y
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
currentTarget: node
};
- var elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.x(chart, evt, {intersect: true});
expect(elements).toEqual([]); // we don't intersect anything
evt = {
currentTarget: node
};
- elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: true});
+ elements = Chart.Interaction.modes.x(chart, evt, {intersect: true});
expect(elements).toEqual([meta0.data[1], meta1.data[1]]);
});
});
describe('y mode', function() {
it('should return items at the same y value when intersect is false', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
// Halfway between 2 mid points
var pt = {
y: meta0.data[1]._view.y
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
currentTarget: node
};
- var elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: false});
+ var elements = Chart.Interaction.modes.y(chart, evt, {intersect: false});
expect(elements).toEqual([meta0.data[1], meta1.data[0], meta1.data[1], meta1.data[2]]);
evt = {
currentTarget: node
};
- elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: false});
+ elements = Chart.Interaction.modes.y(chart, evt, {intersect: false});
expect(elements).toEqual([]);
});
it('should return items at the same y value when intersect is true', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
- var meta1 = chartInstance.getDatasetMeta(1);
+ var meta0 = chart.getDatasetMeta(0);
+ var meta1 = chart.getDatasetMeta(1);
// Halfway between 2 mid points
var pt = {
y: meta0.data[1]._view.y
};
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = {
view: window,
currentTarget: node
};
- var elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: true});
+ var elements = Chart.Interaction.modes.y(chart, evt, {intersect: true});
expect(elements).toEqual([]); // we don't intersect anything
evt = {
currentTarget: node
};
- elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: true});
+ elements = Chart.Interaction.modes.y(chart, evt, {intersect: true});
expect(elements).toEqual([meta0.data[1], meta1.data[0], meta1.data[1], meta1.data[2]]);
});
});
describe('Core.Tooltip', function() {
describe('index mode', function() {
it('Should only use x distance when intersect is false', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta = chartInstance.getDatasetMeta(0);
+ var meta = chart.getDatasetMeta(0);
var point = meta.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
- var tooltip = chartInstance.tooltip;
+ var tooltip = chart.tooltip;
var globalDefaults = Chart.defaults.global;
expect(tooltip._view).toEqual(jasmine.objectContaining({
});
it('Should only display if intersecting if intersect is set', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta = chartInstance.getDatasetMeta(0);
+ var meta = chart.getDatasetMeta(0);
var point = meta.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
- var tooltip = chartInstance.tooltip;
+ var tooltip = chart.tooltip;
var globalDefaults = Chart.defaults.global;
expect(tooltip._view).toEqual(jasmine.objectContaining({
});
it('Should display in single mode', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta = chartInstance.getDatasetMeta(0);
+ var meta = chart.getDatasetMeta(0);
var point = meta.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
- var tooltip = chartInstance.tooltip;
+ var tooltip = chart.tooltip;
var globalDefaults = Chart.defaults.global;
expect(tooltip._view).toEqual(jasmine.objectContaining({
});
it('Should display information from user callbacks', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta = chartInstance.getDatasetMeta(0);
+ var meta = chart.getDatasetMeta(0);
var point = meta.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
- var tooltip = chartInstance.tooltip;
+ var tooltip = chart.tooltip;
var globalDefaults = Chart.defaults.global;
expect(tooltip._view).toEqual(jasmine.objectContaining({
});
it('Should display information from user callbacks', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
+ var meta0 = chart.getDatasetMeta(0);
var point0 = meta0.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
- var tooltip = chartInstance.tooltip;
+ var tooltip = chart.tooltip;
expect(tooltip._view).toEqual(jasmine.objectContaining({
// Positioning
});
it('should filter items from the tooltip using the callback', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
});
// Trigger an event over top of the
- var meta0 = chartInstance.getDatasetMeta(0);
+ var meta0 = chart.getDatasetMeta(0);
var point0 = meta0.data[1];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
- var tooltip = chartInstance.tooltip;
+ var tooltip = chart.tooltip;
expect(tooltip._view).toEqual(jasmine.objectContaining({
// Positioning
});
it('Should have dataPoints', function() {
- var chartInstance = window.acquireChart({
+ var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
// Trigger an event over top of the
var pointIndex = 1;
var datasetIndex = 0;
- var meta = chartInstance.getDatasetMeta(datasetIndex);
+ var meta = chart.getDatasetMeta(datasetIndex);
var point = meta.data[pointIndex];
- var node = chartInstance.canvas;
+ var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
view: window,
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
- var tooltip = chartInstance.tooltip;
+ var tooltip = chart.tooltip;
expect(tooltip._view instanceof Object).toBe(true);
expect(tooltip._view.dataPoints instanceof Array).toBe(true);
expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex);
expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex);
expect(tooltip._view.dataPoints[0].xLabel).toEqual(
- chartInstance.config.data.labels[pointIndex]
+ chart.config.data.labels[pointIndex]
);
expect(tooltip._view.dataPoints[0].yLabel).toEqual(
- chartInstance.config.data.datasets[datasetIndex].data[pointIndex]
+ chart.config.data.datasets[datasetIndex].data[pointIndex]
);
expect(tooltip._view.dataPoints[0].x).toBeCloseToPixel(point._model.x);
expect(tooltip._view.dataPoints[0].y).toBeCloseToPixel(point._model.y);
projects / thirdparty / Chart.js.git / commitdiff
