Including: actually, aspect, bottom, changes, characters, datasets, divisible, downward, guidelines, instance, instances, interrupted, item, javascript, label, lifecycle, lines, plugins, manually, milliseconds, nearest, occurring, position, predefined, recalculate, tooltip, those
Well structured, detailed bug reports are hugely valuable for the project.
-Guidlines for reporting bugs:
+Guidelines for reporting bugs:
- Check the issue search to see if it has already been reported
- Isolate the problem to a simple test case
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, chartInstace` | Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`.
+labelColor | `tooltipItem, chartInstance` | 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
Name | Type | Default | Description
--- | --- | --- | ---
-mode | String | 'naerest' | Sets which elements appear in the tooltip. See [Interaction Modes](#interaction-modes) for details
+mode | String | 'nearest' | Sets which elements appear in the tooltip. See [Interaction Modes](#interaction-modes) for details
intersect | Boolean | true | if true, the hover mode only applies when the mouse position intersects an item on the chart
animationDuration | Number | 400 | Duration in milliseconds it takes to animate hover style changes
onHover | Function | null | Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars, points, etc)
The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed an object that implements the following interface. An example usage of these callbacks can be found on [Github](https://github.com/chartjs/Chart.js/blob/master/samples/AnimationCallbacks/progress-bar.html). This sample displays a progress bar showing how far along the animation is.
-```javscript
+```javascript
{
// Chart object
chartInstance,
Triggers an update of the chart. This can be safely called after replacing the entire data object. This will update all scales, legends, and then re-render the chart.
```javascript
-// duration is the time for the animation of the redraw in miliseconds
-// lazy is a boolean. if true, the animation can be interupted by other animations
+// duration is the time for the animation of the redraw in milliseconds
+// lazy is a boolean. if true, the animation can be interrupted by other animations
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
```
Triggers a redraw of all chart elements. Note, this does not update elements for new data. Use `.update()` in that case.
```javascript
-// duration is the time for the animation of the redraw in miliseconds
-// lazy is a boolean. if true, the animation can be interupted by other animations
+// duration is the time for the animation of the redraw in milliseconds
+// lazy is a boolean. if true, the animation can be interrupted by other animations
myLineChart.render(duration, lazy);
```
responsive: true,
title:{
display: true,
- text: 'Tooltip Positio: ' + position
+ text: 'Tooltip Position: ' + position
},
tooltips: {
position: position,
// Appearance
// The default behavior of lines is to break at null values, according
// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
- // This option gives linse the ability to span gaps
+ // This option gives lines the ability to span gaps
spanGaps: dataset.spanGaps ? dataset.spanGaps : options.spanGaps,
tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension),
backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
},
stop: function() {
- // Stops any current animation loop occuring
+ // Stops any current animation loop occurring
Chart.animationService.cancelAnimation(this);
return this;
},
Chart.layoutService.update(me, me.chart.width, me.chart.height);
- // Apply changes to the dataets that require the scales to have been calculated i.e BorderColor chages
+ // Apply changes to the datasets that require the scales to have been calculated i.e BorderColor changes
Chart.plugins.notify('afterScaleUpdate', [me]);
// Can only reset the new controllers after the scales have been updated
this.doughnutMode = false;
},
- // These methods are ordered by lifecyle. Utilities then follow.
+ // These methods are ordered by lifecycle. Utilities then follow.
// Any function defined here is inherited by all legend types.
// Any function can be extended by the legend type
return this.options.position === 'top' || this.options.position === 'bottom';
},
- // Actualy draw the legend on the canvas
+ // Actually draw the legend on the canvas
draw: function() {
var me = this;
var opts = me.options;
}
if (opts.labels && opts.labels.usePointStyle) {
- // Recalulate x and y for drawPoint() because its expecting
+ // Recalculate x and y for drawPoint() because its expecting
// x and y to be center of figure (instead of top left)
var radius = fontSize * Math.SQRT2 / 2;
var offSet = radius / Math.SQRT2;
},
/**
- * Remove all registered p^lugins.
+ * Remove all registered plugins.
* @since 2.1.5
*/
clear: function() {
},
/**
- * Returns all registered plugin intances.
+ * Returns all registered plugin instances.
* @returns {Array} array of plugin objects.
* @since 2.1.5
*/
Chart.Scale = Chart.Element.extend({
- // These methods are ordered by lifecyle. Utilities then follow.
+ // These methods are ordered by lifecycle. Utilities then follow.
// Any function defined here is inherited by all scale types.
// Any function can be extended by the scale type
0);
},
- // Actualy draw the scale on the canvas
+ // Actually draw the scale on the canvas
// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
draw: function(chartArea) {
var me = this;
// If min, max and stepSize is set and they make an evenly spaced scale use it.
if (generationOptions.min && generationOptions.max && generationOptions.stepSize) {
- var minMaxDeltaDivisableByStepSize = ((generationOptions.max - generationOptions.min) % generationOptions.stepSize) === 0;
- if (minMaxDeltaDivisableByStepSize) {
+ var minMaxDeltaDivisibleByStepSize = ((generationOptions.max - generationOptions.min) % generationOptions.stepSize) === 0;
+ if (minMaxDeltaDivisibleByStepSize) {
niceMin = generationOptions.min;
niceMax = generationOptions.max;
}
me.legendHitBoxes = [];
},
- // These methods are ordered by lifecyle. Utilities then follow.
+ // These methods are ordered by lifecycle. Utilities then follow.
beforeUpdate: function() {
var chartOpts = this.chart.options;
return pos === 'top' || pos === 'bottom';
},
- // Actualy draw the title block on the canvas
+ // Actually draw the title block on the canvas
draw: function() {
var me = this,
ctx = me.ctx,
return base;
}
- // Private helper to create a tooltip iteam model
+ // Private helper to create a tooltip item model
// @param element : the chart element (point, arc, bar) to create the tooltip item for
// @return : new tooltip item
function createTooltipItem(element) {
}
/**
- * @Helper to get the location a tooltiop needs to be placed at given the initial position (via the vm) and the size and alignment
+ * @Helper to get the location a tooltip needs to be placed at given the initial position (via the vm) and the size and alignment
*/
function getBackgroundPoint(vm, size, alignment) {
// Background Position
var DatasetScale = Chart.Scale.extend({
/**
- * Internal function to get the correct labels. If data.xLabels or data.yLabels are defined, use tose
+ * Internal function to get the correct labels. If data.xLabels or data.yLabels are defined, use those
* else fall back to data.labels
* @private
*/
// move the top up to 0
me.max = 0;
} else if (minSign > 0 && maxSign > 0) {
- // move the botttom down to 0
+ // move the bottom down to 0
me.min = 0;
}
}
pixel += paddingLeft;
}
} else {
- // Bottom - top since pixels increase downard on a screen
+ // Bottom - top since pixels increase downward on a screen
innerDimension = me.height - (paddingTop + paddingBottom);
if (start === 0 && !tickOpts.reverse) {
range = helpers.log10(me.end) - helpers.log10(me.minNotZero);
me.unitScale = 1;
if (helpers.isArray(unitDefinition.steps) && Math.ceil(me.scaleSizeInUnits / labelCapacity) < helpers.max(unitDefinition.steps)) {
- // Use one of the prefedined steps
+ // Use one of the predefined steps
for (var idx = 0; idx < unitDefinition.steps.length; ++idx) {
if (unitDefinition.steps[idx] >= Math.ceil(me.scaleSizeInUnits / labelCapacity)) {
me.unitScale = helpers.getValueOrDefault(me.options.time.unitStepSize, unitDefinition.steps[idx]);
});
});
- it('should resize the canvas with correct apect ratio when parent width changes', function(done) {
+ it('should resize the canvas with correct aspect ratio when parent width changes', function(done) {
var chart = acquireChart({
type: 'line', // AR == 2
options: {
var arrayOfThings2D = [['FooBar_1', 'Bar_2'], 'Foo_1'];
- // Regardless 'FooBar' is the longest label it should return (charcters * 10)
+ // Regardless 'FooBar' is the longest label it should return (characters * 10)
expect(helpers.longestText(context, font, arrayOfThings1D, {})).toEqual(60);
expect(helpers.longestText(context, font, arrayOfThings2D, {})).toEqual(80);
// We check to make sure we made the right calls to the canvas.
clientY: 0
});
- // Manully trigger rather than having an async test
+ // Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
clientY: 0
});
- // Manully trigger rather than having an async test
+ // Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
clientY: rect.top + point._model.y
});
- // Manully trigger rather than having an async test
+ // Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
clientY: rect.top + point._model.y
});
- // Manully trigger rather than having an async test
+ // Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
clientY: rect.top + point0._model.y
});
- // Manully trigger rather than having an async test
+ // Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
clientY: rect.top + point0._model.y
});
- // Manully trigger rather than having an async test
+ // Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
clientY: rect.top + point._model.y
});
- // Manully trigger rather than having an async test
+ // Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
}, {
data: [150]
}],
- labels: ['lablel1', 'label2', 'label3', 'label4', 'label5', 'label6']
+ labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scales: {}
}, {
data: ['150']
}],
- labels: ['lablel1', 'label2', 'label3', 'label4', 'label5', 'label6']
+ labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scales: {}
data: [1000],
hidden: true
}],
- labels: ['lablel1', 'label2', 'label3', 'label4', 'label5', 'label6']
+ labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scales: {}
datasets: [{
data: [50, 60, NaN, 70, null, undefined, Infinity, -Infinity]
}],
- labels: ['lablel1', 'label2', 'label3', 'label4', 'label5', 'label6', 'label7', 'label8']
+ labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6', 'label7', 'label8']
},
options: {
scales: {}
datasets: [{
data: [1, 1, 1, 2, 1, 0]
}],
- labels: ['lablel1', 'label2', 'label3', 'label4', 'label5', 'label6']
+ labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scale: {
datasets: [{
data: [1, 1, 1, 2, 1, 0]
}],
- labels: ['lablel1', 'label2', 'label3', 'label4', 'label5', 'label6']
+ labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scale: {
datasets: [{
data: [20, 30, 40, 50]
}],
- labels: ['lablel1', 'label2', 'label3', 'label4']
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
scale: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
- labels: ['lablel1', 'label2', 'label3', 'label4', 'label5']
+ labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {