| Name | Arguments | Description
| ---- | --------- | -----------
| `beforeUpdate` | `axis` | Callback called before the update process starts.
-| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set.
+| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set.
| `afterSetDimensions` | `axis` | Callback that runs after dimensions are set.
| `beforeDataLimits` | `axis` | Callback that runs before data limits are determined.
| `afterDataLimits` | `axis` | Callback that runs after data limits are determined.
| `beforeBuildTicks` | `axis` | Callback that runs before ticks are created.
| `afterBuildTicks` | `axis` | Callback that runs after ticks are created. Useful for filtering ticks.
| `beforeTickToLabelConversion` | `axis` | Callback that runs before ticks are converted into strings.
-| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
+| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
| `beforeCalculateTickRotation` | `axis` | Callback that runs before tick rotation is determined.
| `afterCalculateTickRotation` | `axis` | Callback that runs after tick rotation is determined.
-| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
-| `afterFit` | `axis` | Callback that runs after the scale fits to the canvas.
+| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
+| `afterFit` | `axis` | Callback that runs after the scale fits to the canvas.
| `afterUpdate` | `axis` | Callback that runs at the end of the update process.
## Updating Axis Defaults
* `'labels'`: generates ticks from user given `data.labels` values ONLY
### Parser
-If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date.
+If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date.
If this is a function, it must return a moment.js object given the appropriate data value.
"type": "bar",
"data": {
"labels": [
- "January",
- "February",
- "March",
- "April",
- "May",
- "June",
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
"July"
],
"datasets": [{
"type": "bar",
"data": {
"labels": [
- "January",
- "February",
- "March",
+ "January",
+ "February",
+ "March",
"April"
],
"datasets": [{
"type": "radar",
"data": {
"labels": [
- "Eating",
- "Drinking",
- "Sleeping",
+ "Eating",
+ "Drinking",
+ "Sleeping",
"Designing",
"Coding",
"Cycling",
* 'circle'
* 'cross'
* 'crossRot'
-* 'dash'.
+* 'dash'.
* 'line'
* 'rect'
* 'rectRounded'
## Data Structure
-The `data` 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.
+The `data` 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.
```javascript
data: [20, 10]
| `display` | `Boolean` | `true` | is the legend shown
| `position` | `String` | `'top'` | Position of the legend. [more...](#position)
| `fullWidth` | `Boolean` | `true` | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
-| `onClick` | `Function` | | A callback that is called when a click event is registered on a label item
+| `onClick` | `Function` | | A callback that is called when a click event is registered on a label item
| `onHover` | `Function` | | A callback that is called when a 'mousemove' event is registered on top of a label item
| `reverse` | `Boolean` | `false` | Legend will show datasets in reverse order.
| `labels` | `Object` | | See the [Legend Label Configuration](#legend-label-configuration) section below.
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
/** @type {Chart.Tooltip} */
var tooltip = this;
-
+
/* ... */
-
+
return {
x: 0,
y: 0
For example, to derive a new chart type that extends from a bubble chart, you would do the following.
```javascript
-// Sets the default config for 'derivedBubble' to be the same as the bubble defaults.
+// Sets the default config for 'derivedBubble' to be the same as the bubble defaults.
// We look for the defaults by doing Chart.defaults[chartType]
// It looks like a bug exists when the defaults don't exist
Chart.defaults.derivedBubble = Chart.defaults.bubble;
// Stores the controller so that the chart initialization routine can look it up with
// Chart.controllers[type]
-Chart.controllers.derivedBubble = custom;
+Chart.controllers.derivedBubble = custom;
// Now we can create and use our new chart type
new Chart(ctx, {
## Patterns and Gradients
-An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour.
+An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour.
For example, if you wanted to fill a dataset with a pattern from an image you could do the following.
# Interactions
-The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.global.hover`. To configure which events trigger chart interactions, see [events](./events.md#events).
+The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.global.hover`. To configure which events trigger chart interactions, see [events](./events.md#events).
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `onHover` | `Function` | `null` | Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).
| `onClick` | `Function` | `null` | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements
-## Event Option
+## Event Option
For example, to have the chart only respond to click events, you could do
```javascript
var chart = new Chart(ctx, {
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, in the x direction, is used to determine the 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, in the x direction, is used to determine the index.
```javascript
var chart = new Chart(ctx, {
projects / thirdparty / Chart.js.git / commitdiff
