```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
-var ctx = document.getElementById("myChart").getContext('2d');
+var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
- labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+ labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
- 'rgba(255,99,132,1)',
+ 'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
scales: {
yAxes: [{
ticks: {
- beginAtZero:true
+ beginAtZero: true
}
}]
}
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `display` | `Boolean`/`String` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
-| `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks)
-| `weight` | `Number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
+| `display` | <code>boolean|string</code> | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
+| `callbacks` | `object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks)
+| `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
## Callbacks
There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process.
All of the included cartesian axes support a number of common options.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `type` | `String` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
-| `position` | `String` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'`
-| `offset` | `Boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` for a category scale in a bar chart by default.
-| `id` | `String` | | The ID is used to link datasets and scale axes together. [more...](#axis-id)
-| `gridLines` | `Object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration)
-| `scaleLabel` | `Object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration)
-| `ticks` | `Object` | | Tick configuration. [more...](#tick-configuration)
+| ---- | ---- | ------- | -----------
+| `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
+| `position` | `string` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'`
+| `offset` | `boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` for a category scale in a bar chart by default.
+| `id` | `string` | | The ID is used to link datasets and scale axes together. [more...](#axis-id)
+| `gridLines` | `object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration)
+| `scaleLabel` | `object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration)
+| `ticks` | `object` | | Tick configuration. [more...](#tick-configuration)
## Tick Configuration
The following options are common to all cartesian axes but do not apply to other axes.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `autoSkip` | `Boolean` | `true` | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what.
-| `autoSkipPadding` | `Number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled. *Note: Only applicable to horizontal scales.*
-| `labelOffset` | `Number` | `0` | Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas*
-| `maxRotation` | `Number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
-| `minRotation` | `Number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.*
-| `mirror` | `Boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
-| `padding` | `Number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
+| ---- | ---- | ------- | -----------
+| `autoSkip` | `boolean` | `true` | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what.
+| `autoSkipPadding` | `number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled. *Note: Only applicable to horizontal scales.*
+| `labelOffset` | `number` | `0` | Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas*
+| `maxRotation` | `number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
+| `minRotation` | `number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.*
+| `mirror` | `boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
+| `padding` | `number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
## Axis ID
The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used.
label: 'Right dataset',
// This binds the dataset to the right y axis
- yAxisID: 'right-y-axis',
+ yAxisID: 'right-y-axis'
}],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes.
-Specifying any of the settings above defines the x axis as `type: category` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.
+Specifying any of the settings above defines the x axis as `type: 'category'` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.
## Category Axis Definition
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: ...
- },
+ }
});
```
As part of axis definition:
scales: {
xAxes: [{
type: 'category',
- labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June']
}]
}
}
The category scale provides the following options for configuring tick marks. They are nested in the `ticks` sub object. These options extend the [common tick configuration](README.md#tick-configuration).
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `labels` | `Array[String]` | - | An array of labels to display.
-| `min` | `String` | | The minimum item to display. [more...](#min-max-configuration)
-| `max` | `String` | | The maximum item to display. [more...](#min-max-configuration)
+| ---- | ---- | ------- | -----------
+| `labels` | `string[]` | - | An array of labels to display.
+| `min` | `string` | | The minimum item to display. [more...](#min-max-configuration)
+| `max` | `string` | | The maximum item to display. [more...](#min-max-configuration)
## Min Max Configuration
For both the `min` and `max` properties, the value must be in the `labels` array. In the example below, the x axis would only display "March" through "June".
datasets: [{
data: [10, 20, 30, 40, 50, 60]
}],
- labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June']
},
options: {
scales: {
The following options are provided by the linear scale. They are all located in the `ticks` sub options. These options extend the [common tick configuration](README.md#tick-configuration).
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `beginAtZero` | `Boolean` | | if true, scale will include 0 if it is not already included.
-| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
-| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
-| `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show.
-| `precision` | `Number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
-| `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size)
-| `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
-| `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
+| ---- | ---- | ------- | -----------
+| `beginAtZero` | `boolean` | | if true, scale will include 0 if it is not already included.
+| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
+| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
+| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
+| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
+| `stepSize` | `number` | | User defined fixed step size for the scale. [more...](#step-size)
+| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
+| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
## Axis Range Settings
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
## Step Size
- If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
+If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
}]
}
};
-```
\ No newline at end of file
+```
The following options are provided by the logarithmic scale. They are all located in the `ticks` sub options. These options extend the [common tick configuration](README.md#tick-configuration).
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data.
-| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data.
\ No newline at end of file
+| ---- | ---- | ------- | -----------
+| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data.
+| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data.
The x-axis data points may additionally be specified via the `t` or `x` attribute when using the time scale.
- data: [{
- x: new Date(),
- y: 1
- }, {
- t: new Date(),
- y: 10
- }]
-
+```javascript
+data: [{
+ x: new Date(),
+ y: 1
+}, {
+ t: new Date(),
+ y: 10
+}]
+```
### Date Formats
The following options are provided by the time scale. You may also set options provided by the [common tick configuration](README.md#tick-configuration).
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `distribution` | `String` | `linear` | How data is plotted. [more...](#scale-distribution)
-| `bounds` | `String` | `data` | Determines the scale bounds. [more...](#scale-bounds)
-| `ticks.source` | `String` | `auto` | How ticks are generated. [more...](#ticks-source)
-| `time.displayFormats` | `Object` | | Sets how different time units are displayed. [more...](#display-formats)
-| `time.isoWeekday` | `Boolean` | `false` | If true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday.
+| ---- | ---- | ------- | -----------
+| `distribution` | `string` | `'linear'` | How data is plotted. [more...](#scale-distribution)
+| `bounds` | `string` | `'data'` | Determines the scale bounds. [more...](#scale-bounds)
+| `ticks.source` | `string` | `'auto'` | How ticks are generated. [more...](#ticks-source)
+| `time.displayFormats` | `object` | | Sets how different time units are displayed. [more...](#display-formats)
+| `time.isoWeekday` | `boolean` | `false` | If true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday.
| `time.max` | [Time](#date-formats) | | If defined, this will override the data maximum.
| `time.min` | [Time](#date-formats) | | If defined, this will override the data minimum.
-| `time.parser` | `String/Function` | | Custom parser for dates. [more...](#parser)
-| `time.round` | `String` | `false` | If defined, dates will be rounded to the start of this unit. See [Time Units](#time-units) below for the allowed units.
-| `time.tooltipFormat` | `String` | | The moment js format string to use for the tooltip.
-| `time.unit` | `String` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details.
-| `time.stepSize` | `Number` | `1` | The number of units between grid lines.
-| `time.minUnit` | `String` | `'millisecond'` | The minimum display format to be used for a time unit.
+| `time.parser` | <code>string|function</code> | | Custom parser for dates. [more...](#parser)
+| `time.round` | `string` | `false` | If defined, dates will be rounded to the start of this unit. See [Time Units](#time-units) below for the allowed units.
+| `time.tooltipFormat` | `string` | | The Moment.js format string to use for the tooltip.
+| `time.unit` | `string` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details.
+| `time.stepSize` | `number` | `1` | The number of units between grid lines.
+| `time.minUnit` | `string` | `'millisecond'` | The minimum display format to be used for a time unit.
### Time Units
The following time measurements are supported. The names can be passed as strings to the `time.unit` config option to force a certain unit.
-* millisecond
-* second
-* minute
-* hour
-* day
-* week
-* month
-* quarter
-* year
+* `'millisecond'`
+* `'second'`
+* `'minute'`
+* `'hour'`
+* `'day'`
+* `'week'`
+* `'month'`
+* `'quarter'`
+* `'year'`
For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
}]
}
}
-})
+});
```
### Display Formats
-The following display formats are used to configure how different time units are formed into strings for the axis tick marks. See [moment.js](https://momentjs.com/docs/#/displaying/format/) for the allowable format strings.
+The following display formats are used to configure how different time units are formed into strings for the axis tick marks. See [Moment.js](https://momentjs.com/docs/#/displaying/format/) for the allowable format strings.
Name | Default | Example
--- | --- | ---
-millisecond | 'h:mm:ss.SSS a' | 11:20:01.123 AM
-second | 'h:mm:ss a' | 11:20:01 AM
-minute | 'h:mm a' | 11:20 AM
-hour | 'hA' | 11AM
-day | 'MMM D' | Sep 4
-week | 'll' | Sep 4 2015
-month | 'MMM YYYY' | Sep 2015
-quarter | '[Q]Q - YYYY' | Q3 - 2015
-year | 'YYYY' | 2015
-
-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.
+`millisecond` | `'h:mm:ss.SSS a'` | `'11:20:01.123 AM'`
+`second` | `'h:mm:ss a'` | `'11:20:01 AM'`
+`minute` | `'h:mm a'` | `'11:20 AM'`
+`hour` | `'hA'` | `'11AM'`
+`day` | `'MMM D'` | `'Sep 4'`
+`week` | `'ll'` | `'Sep 4 2015'`
+`month` | `'MMM YYYY'` | `'Sep 2015'`
+`quarter` | `'[Q]Q - YYYY'` | `'Q3 - 2015'`
+`year` | `'YYYY'` | `'2015'`
+
+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 chart = new Chart(ctx, {
}]
}
}
-})
+});
```
### Scale Distribution
The `distribution` property controls the data distribution along the scale:
- * `'linear'`: data are spread according to their time (distances can vary)
- * `'series'`: data are spread at the same distance from each other
+* `'linear'`: data are spread according to their time (distances can vary)
+* `'series'`: data are spread at the same distance from each other
```javascript
var chart = new Chart(ctx, {
}]
}
}
-})
+});
```
### Scale Bounds
-The `bounds` property controls the scale boundary strategy (bypassed by min/max time options).
+The `bounds` property controls the scale boundary strategy (bypassed by `min`/`max` time options).
-* `'data'`: make sure data are fully visible, labels outside are removed
-* `'ticks'`: make sure ticks are fully visible, data outside are truncated
+* `'data'`: makes sure data are fully visible, labels outside are removed
+* `'ticks'`: makes sure ticks are fully visible, data outside are truncated
### Ticks Source
* `'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.js to parse the date.
-If this is a function, it must return a moment.js object given the appropriate data value.
+If this is a function, it must return a Moment.js object given the appropriate data value.
The scale label configuration is nested under the scale configuration in the `scaleLabel` key. It defines options for the scale title. Note that this only applies to cartesian axes.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `display` | `Boolean` | `false` | If true, display the axis title.
-| `labelString` | `String` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
-| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
+| ---- | ---- | ------- | -----------
+| `display` | `boolean` | `false` | If true, display the axis title.
+| `labelString` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
+| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| `fontColor` | `Color` | `'#666'` | Font color for scale title.
-| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the scale title, follows CSS font-family options.
-| `fontSize` | `Number` | `12` | Font size for scale title.
-| `fontStyle` | `String` | `'normal'` | Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
-| `padding` | `Number/Object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the scale title, follows CSS font-family options.
+| `fontSize` | `number` | `12` | Font size for scale title.
+| `fontStyle` | `string` | `'normal'` | Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
+| `padding` | <code>number|object</code> | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
## Creating Custom Tick Formats
Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
-* [linear](./linear.md#linear-radial-axis)
\ No newline at end of file
+* [linear](./linear.md#linear-radial-axis)
| Name | Type | Description
| ---- | ---- | -----------
-| `angleLines` | `Object` | Angle line configuration. [more...](#angle-line-options)
-| `gridLines` | `Object` | Grid line configuration. [more...](../styling.md#grid-line-configuration)
-| `pointLabels` | `Object` | Point label configuration. [more...](#point-label-options)
-| `ticks` | `Object` | Tick configuration. [more...](#tick-options)
+| `angleLines` | `object` | Angle line configuration. [more...](#angle-line-options)
+| `gridLines` | `object` | Grid line configuration. [more...](../styling.md#grid-line-configuration)
+| `pointLabels` | `object` | Point label configuration. [more...](#point-label-options)
+| `ticks` | `object` | Tick configuration. [more...](#tick-options)
## Tick Options
The following options are provided by the linear scale. They are all located in the `ticks` sub options. The [common tick configuration](../styling.md#tick-configuration) options are supported by this axis.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
+| ---- | ---- | ------- | -----------
| `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
-| `backdropPaddingX` | `Number` | `2` | Horizontal padding of label backdrop.
-| `backdropPaddingY` | `Number` | `2` | Vertical padding of label backdrop.
-| `beginAtZero` | `Boolean` | `false` | if true, scale will include 0 if it is not already included.
-| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
-| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
-| `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show.
-| `precision` | `Number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
-| `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size)
-| `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
-| `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
-| `showLabelBackdrop` | `Boolean` | `true` | If true, draw a background behind the tick labels.
+| `backdropPaddingX` | `number` | `2` | Horizontal padding of label backdrop.
+| `backdropPaddingY` | `number` | `2` | Vertical padding of label backdrop.
+| `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
+| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
+| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
+| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
+| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
+| `stepSize` | `number` | | User defined fixed step size for the scale. [more...](#step-size)
+| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
+| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
+| `showLabelBackdrop` | `boolean` | `true` | If true, draw a background behind the tick labels.
## Axis Range Settings
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
## Step Size
- If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
+If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `angleLines.display` is true.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `display` | `Boolean` | `true` | if true, angle lines are shown.
-| `color` | `Color` | `rgba(0, 0, 0, 0.1)` | Color of angled lines.
-| `lineWidth` | `Number` | `1` | Width of angled lines.
-| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| ---- | ---- | ------- | -----------
+| `display` | `boolean` | `true` | if true, angle lines are shown.
+| `color` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Color of angled lines.
+| `lineWidth` | `number` | `1` | Width of angled lines.
+| `borderDash` | `number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
## Point Label Options
The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `pointLabels.display` is true.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
-| `fontColor` | `Color/Color[]` | `'#666'` | Font color for point labels.
-| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
-| `fontSize` | `Number` | 10 | font size in pixels.
-| `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.
-| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
+| ---- | ---- | ------- | -----------
+| `callback` | `function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
+| `fontColor` | <code>Color|Color[]</code> | `'#666'` | Font color for point labels.
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
+| `fontSize` | `number` | `10` | font size in pixels.
+| `fontStyle` | `string` | `'normal'` | Font style to use when rendering point labels.
+| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
The grid line configuration is nested under the scale configuration in the `gridLines` key. It defines options for the grid lines that run perpendicular to the axis.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `display` | `Boolean` | `true` | If false, do not display grid lines for this axis.
-| `circular` | `Boolean` | `false` | If true, gridlines are circular (on radar chart only).
-| `color` | `Color/Color[]` | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
-| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `lineWidth` | `Number/Number[]` | `1` | Stroke width of grid lines.
-| `drawBorder` | `Boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
-| `drawOnChartArea` | `Boolean` | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
-| `drawTicks` | `Boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
-| `tickMarkLength` | `Number` | `10` | Length in pixels that the grid lines will draw into the axis area.
-| `zeroLineWidth` | `Number` | `1` | Stroke width of the grid line for the first index (index 0).
-| `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
-| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `zeroLineBorderDashOffset` | `Number` | `0.0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `offsetGridLines` | `Boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.
+| ---- | ---- | ------- | -----------
+| `display` | `boolean` | `true` | If false, do not display grid lines for this axis.
+| `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
+| `color` | <code>Color|Color[]</code> | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
+| `borderDash` | `number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `lineWidth` | <code>number|number[]</code> | `1` | Stroke width of grid lines.
+| `drawBorder` | `boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
+| `drawOnChartArea` | `boolean` | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
+| `drawTicks` | `boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
+| `tickMarkLength` | `number` | `10` | Length in pixels that the grid lines will draw into the axis area.
+| `zeroLineWidth` | `number` | `1` | Stroke width of the grid line for the first index (index 0).
+| `zeroLineColor` | `Color` | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
+| `zeroLineBorderDash` | `number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `zeroLineBorderDashOffset` | `number` | `0.0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `offsetGridLines` | `boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.
## Tick Configuration
The tick configuration is nested under the scale configuration in the `ticks` key. It defines options for the tick marks that are generated by the axis.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
-| `display` | `Boolean` | `true` | If true, show tick marks.
+| ---- | ---- | ------- | -----------
+| `callback` | `function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
+| `display` | `boolean` | `true` | If true, show tick marks.
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
-| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
-| `fontSize` | `Number` | `12` | Font size for the tick labels.
-| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
-| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
-| `reverse` | `Boolean` | `false` | Reverses order of tick labels.
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
+| `fontSize` | `number` | `12` | Font size for the tick labels.
+| `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
+| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
+| `reverse` | `boolean` | `false` | Reverses order of tick labels.
| `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above.
| `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above.
-| `padding` | `Number` | `0` | Sets the offset of the tick labels from the axis
+| `padding` | `number` | `0` | Sets the offset of the tick labels from the axis
## Minor Tick Configuration
The minorTick configuration is nested under the ticks configuration in the `minor` key. It defines options for the minor tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
+| ---- | ---- | ------- | -----------
+| `callback` | `function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
-| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
-| `fontSize` | `Number` | `12` | Font size for the tick labels.
-| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
-| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
+| `fontSize` | `number` | `12` | Font size for the tick labels.
+| `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
+| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
## Major Tick Configuration
The majorTick configuration is nested under the ticks configuration in the `major` key. It defines options for the major tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
+| ---- | ---- | ------- | -----------
+| `callback` | `function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
-| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
-| `fontSize` | `Number` | `12` | Font size for the tick labels.
-| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
-| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
+| `fontSize` | `number` | `12` | Font size for the tick labels.
+| `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
+| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| Mode | Type | Values |
| :--- | :--- | :--- |
-| Absolute dataset index <sup>1</sup> | `Number` | `1`, `2`, `3`, ... |
-| Relative dataset index <sup>1</sup> | `String` | `'-1'`, `'-2'`, `'+1'`, ... |
-| Boundary <sup>2</sup> | `String` | `'start'`, `'end'`, `'origin'` |
-| Disabled <sup>3</sup> | `Boolean` | `false` |
+| Absolute dataset index <sup>1</sup> | `number` | `1`, `2`, `3`, ... |
+| Relative dataset index <sup>1</sup> | `string` | `'-1'`, `'-2'`, `'+1'`, ... |
+| Boundary <sup>2</sup> | `string` | `'start'`, `'end'`, `'origin'` |
+| Disabled <sup>3</sup> | `boolean` | `false` |
> <sup>1</sup> dataset filling modes have been introduced in version 2.6.0<br>
> <sup>2</sup> prior version 2.6.0, boundary values was `'zero'`, `'top'`, `'bottom'` (deprecated)<br>
{fill: '-2'} // 4: fill to dataset 2
]
}
-})
+});
```
## Configuration
| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
-| [`plugins.filler.propagate`](#propagate) | `Boolean` | `true` | Fill propagation when target is hidden.
+| [`plugins.filler.propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
### propagate
-Boolean (default: `true`)
+`propagate` takes a `boolean` value (default: `true`).
If `true`, the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets:
}
}
}
-})
+});
```
`propagate: true`:
These are used to set display properties for a specific dataset. For example,
the color of the bars is generally set this way.
-| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderSkipped`](#borderskipped) | `String` | Yes | Yes | `'bottom'`
-| [`borderWidth`](#styling) | `Number` | Yes | Yes | `0`
-| [`data`](#data-structure) | `Object[]` | - | - | **required**
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'`
+| [`borderWidth`](#styling) | `number` | Yes | Yes | `0`
+| [`data`](#data-structure) | `object[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
-| [`hoverBorderWidth`](#interactions) | `Number` | - | Yes | `1`
-| [`label`](#general) | `String` | - | - | `''`
-| [`xAxisID`](#general) | `String` | - | - | first x axis
-| [`yAxisID`](#general) | `String` | - | - | first y axis
+| [`hoverBorderWidth`](#interactions) | `number` | - | Yes | `1`
+| [`label`](#general) | `string` | - | - | `''`
+| [`xAxisID`](#general) | `string` | - | - | first x axis
+| [`yAxisID`](#general) | `string` | - | - | first y axis
### General
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
-| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
-| `barThickness` | `Number/String` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
-| `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this.
-| `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels.
-| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
+| `barPercentage` | `number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
+| `categoryPercentage` | `number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
+| `barThickness` | <code>number|string</code> | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
+| `maxBarThickness` | `number` | | Set this to ensure that bars are not sized thicker than this.
+| `minBarLength` | `number` | | Set this to ensure that bars have a minimum length in pixels.
+| `gridLines.offsetGridLines` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
### Example Usage
}
}]
}
-}
+};
```
### barThickness
If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
## Data Structure
-The `data` property of a dataset for a bar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
+The `data` property of a dataset for a bar chart is specified as 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]
| Name | Type | Description
| ---- | ---- | -----------
-| `stack` | `String` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack).
+| `stack` | `string` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack).
# Horizontal Bar Chart
A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
}],
"backgroundColor": "rgb(255, 99, 132)"
}]
- },
+ }
}
{% endchartjs %}
```javascript
// For a bubble chart
-var myBubbleChart = new Chart(ctx,{
+var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: data,
options: options
The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way.
-| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderWidth`](#styling) | `Number` | Yes | Yes | `3`
-| [`data`](#data-structure) | `Object[]` | - | - | **required**
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderWidth`](#styling) | `number` | Yes | Yes | `3`
+| [`data`](#data-structure) | `object[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
-| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `1`
-| [`hoverRadius`](#interactions) | `Number` | Yes | Yes | `4`
-| [`hitRadius`](#interactions) | `Number` | Yes | Yes | `1`
-| [`label`](#labeling) | `String` | - | - | `undefined`
-| [`pointStyle`](#styling) | `String` | Yes | Yes | `circle`
-| [`rotation`](#styling) | `Number` | Yes | Yes | `0`
-| [`radius`](#styling) | `Number` | Yes | Yes | `3`
+| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
+| [`hoverRadius`](#interactions) | `number` | Yes | Yes | `4`
+| [`hitRadius`](#interactions) | `number` | Yes | Yes | `1`
+| [`label`](#labeling) | `string` | - | - | `undefined`
+| [`pointStyle`](#styling) | `string` | Yes | Yes | `'circle'`
+| [`rotation`](#styling) | `number` | Yes | Yes | `0`
+| [`radius`](#styling) | `number` | Yes | Yes | `3`
### Labeling
```javascript
{
// X Value
- x: <Number>,
+ x: number,
// Y Value
- y: <Number>,
+ y: number,
// Bubble radius in pixels (not scaled).
- r: <Number>
+ r: number
}
```
"labels": [
"Red",
"Blue",
- "Yellow",
+ "Yellow"
],
"datasets": [{
"label": "My First Dataset",
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
- "rgb(255, 205, 86)",
+ "rgb(255, 205, 86)"
]
}]
- },
+ }
}
{% endchartjs %}
```javascript
// For a pie chart
-var myPieChart = new Chart(ctx,{
+var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: options
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderAlign`](#border-alignment) | `String` | Yes | Yes | `'center'`
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
-| [`borderWidth`](#styling) | `Number` | Yes | Yes | `2`
-| [`data`](#data-structure) | `Number[]` | - | - | **required**
+| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
+| [`data`](#data-structure) | `number[]` | - | - | **required**
| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
-| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined`
+| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
### Styling
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `cutoutPercentage` | `Number` | `50` - for doughnut, `0` - for pie | The percentage of the chart that is cut out of the middle.
-| `rotation` | `Number` | `-0.5 * Math.PI` | Starting angle to draw arcs from.
-| `circumference` | `Number` | `2 * Math.PI` | Sweep to allow arcs to cover.
-| `animation.animateRotate` | `Boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
-| `animation.animateScale` | `Boolean` | `false` | If true, will animate scaling the chart from the center outwards.
+| `cutoutPercentage` | `number` | `50` - for doughnut, `0` - for pie | The percentage of the chart that is cut out of the middle.
+| `rotation` | `number` | `-0.5 * Math.PI` | Starting angle to draw arcs from.
+| `circumference` | `number` | `2 * Math.PI` | Sweep to allow arcs to cover.
+| `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
+| `animation.animateScale` | `boolean` | `false` | If true, will animate scaling the chart from the center outwards.
## Default Options
'Blue'
]
};
-```
\ No newline at end of file
+```
The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
-| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'`
-| [`borderCapStyle`](#line-styling) | `String` | - | - | `'butt'`
-| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'`
-| [`borderDash`](#line-styling) | `Number[]` | - | - | `[]`
-| [`borderDashOffset`](#line-styling) | `Number` | - | - | `0`
-| [`borderJoinStyle`](#line-styling) | `String` | - | - | `'miter'`
-| [`borderWidth`](#line-styling) | `Number` | - | - | `0`
-| [`cubicInterpolationMode`](#cubicInterpolationMode) | `String` | - | - | `''`
-| [`fill`](#line-styling) | `Boolean/String` | - | - | `true`
-| [`label`](#general) | `String` | - | - | `''`
-| [`lineTension`](#line-styling) | `Number` | - | - | `0.4`
-| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`pointBorderWidth`](#point-styling) | `Number` | Yes | Yes | `1`
-| [`pointHitRadius`](#point-styling) | `Number` | Yes | Yes | `1`
+| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'`
+| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderDash`](#line-styling) | `number[]` | - | - | `[]`
+| [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0`
+| [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'`
+| [`borderWidth`](#line-styling) | `number` | - | - | `3`
+| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | - | - | `''`
+| [`fill`](#line-styling) | <code>boolean|string</code> | - | - | `true`
+| [`label`](#general) | `string` | - | - | `''`
+| [`lineTension`](#line-styling) | `number` | - | - | `0.4`
+| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1`
+| [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1`
| [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderColor`](#interactions) | `Color` | Yes | Yes | `undefined`
-| [`pointHoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined`
-| [`pointHoverRadius`](#interactions) | `Number` | Yes | Yes | `undefined`
-| [`pointRadius`](#point-styling) | `Number` | Yes | Yes | `3`
-| [`pointRotation`](#point-styling) | `Number` | Yes | Yes | `1`
-| [`pointStyle`](#point-styling) | `String/Image` | Yes | Yes | `'circle'`
-| [`showLine`](#general) | `Boolean` | - | - | `undefined`
-| [`spanGaps`](#general) | `Boolean` | - | - | `false`
-| [`steppedLine`](#stepped-line) | `Boolean/String` | - | - | `false`
-| [`xAxisID`](#general) | `String` | - | - | first x axis
-| [`yAxisID`](#general) | `String` | - | - | first y axis
+| [`pointHoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
+| [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4`
+| [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3`
+| [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0`
+| [`pointStyle`](#point-styling) | <code>string|Image</code> | Yes | Yes | `'circle'`
+| [`showLine`](#line-styling) | `boolean` | - | - | `undefined`
+| [`spanGaps`](#line-styling) | `boolean` | - | - | `undefined`
+| [`steppedLine`](#stepped-line) | <code>boolean|string</code> | - | - | `false`
+| [`xAxisID`](#general) | `string` | - | - | first x axis
+| [`yAxisID`](#general) | `string` | - | - | first y axis
### General
| `pointRotation` | The rotation of the point in degrees.
| `pointStyle` | Style of the point. [more...](../configuration/elements#point-styles)
-All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
+All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
### Line Styling
| `showLine` | If false, the line is not drawn for this dataset.
| `spanGaps` | If true, lines will be drawn between points with no or null data. If false, points with `NaN` data will create a break in the line.
-All these values, if `undefined`, fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options.
+If the value is `undefined`, `showLine` and `spanGaps` fallback to the associated [chart configuration options](#configuration-options). The rest of the values fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options.
### Interactions
### cubicInterpolationMode
The following interpolation modes are supported.
-* 'default'
-* 'monotone'
+* `'default'`
+* `'monotone'`
-The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.
+The `'default'` algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.
-The 'monotone' algorithm is more suited to `y = f(x)` datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points.
+The `'monotone'` algorithm is more suited to `y = f(x)` datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points.
If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
### Stepped Line
The following values are supported for `steppedLine`.
-* `false`: No Step Interpolation (default)
-* `true`: Step-before Interpolation (eq. 'before')
+* `false`: No Step Interpolation (default)
+* `true`: Step-before Interpolation (eq. `'before'`)
* `'before'`: Step-before Interpolation
* `'after'`: Step-after Interpolation
* `'middle'`: Step-middle Interpolation
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `showLines` | `Boolean` | `true` | If false, the lines between points are not drawn.
-| `spanGaps` | `Boolean` | `false` | If false, NaN data causes a break in the line.
+| `showLines` | `boolean` | `true` | If false, the lines between points are not drawn.
+| `spanGaps` | `boolean` | `false` | If false, NaN data causes a break in the line.
## Default Options
The `data` property of a dataset for a line chart can be passed in two formats.
-### Number[]
+### number[]
```javascript
data: [20, 10]
```
```javascript
data: [{
- x: 10,
- y: 20
- }, {
- x: 15,
- y: 10
- }]
+ x: 10,
+ y: 20
+}, {
+ x: 15,
+ y: 10
+}]
```
This alternate is used for sparse datasets, such as those in [scatter charts](./scatter.md#scatter-chart). Each data point is specified using an object containing `x` and `y` properties.
options: {
elements: {
line: {
- tension: 0, // disables bezier curves
+ tension: 0 // disables bezier curves
}
}
}
type: 'line',
data: {
datasets: [{
- showLine: false, // disable for a single dataset
+ showLine: false // disable for a single dataset
}]
},
options: {
- showLines: false, // disable for all datasets
+ showLines: false // disable for all datasets
}
});
```
data: data,
options: {
animation: {
- duration: 0, // general animation time
+ duration: 0 // general animation time
},
hover: {
- animationDuration: 0, // duration of animations when hovering an item
+ animationDuration: 0 // duration of animations when hovering an item
},
- responsiveAnimationDuration: 0, // animation duration after a resize
+ responsiveAnimationDuration: 0 // animation duration after a resize
}
});
```
```javascript
var myChart = new Chart(ctx, {
- type: 'bar',
- data: data,
- options: options
+ type: 'bar',
+ data: data,
+ options: options
});
```
```javascript
var mixedChart = new Chart(ctx, {
- type: 'bar',
- data: {
- datasets: [{
- label: 'Bar Dataset',
- data: [10, 20, 30, 40]
+ type: 'bar',
+ data: {
+ datasets: [{
+ label: 'Bar Dataset',
+ data: [10, 20, 30, 40]
}, {
- label: 'Line Dataset',
- data: [50, 50, 50, 50],
+ label: 'Line Dataset',
+ data: [50, 50, 50, 50],
- // Changes this dataset to become a line
- type: 'line'
+ // Changes this dataset to become a line
+ type: 'line'
}],
- labels: ['January', 'February', 'March', 'April']
- },
- options: options
+ labels: ['January', 'February', 'March', 'April']
+ },
+ options: options
});
```
{% chartjs %}
{
- "type": "bar",
- "data": {
- "labels": [
- "January",
- "February",
- "March",
- "April"
- ],
- "datasets": [{
- "label": "Bar Dataset",
- "data": [10, 20, 30, 40],
- "borderColor": "rgb(255, 99, 132)",
- "backgroundColor": "rgba(255, 99, 132, 0.2)"
- }, {
- "label": "Line Dataset",
- "data": [50, 50, 50, 50],
- "type": "line",
- "fill": false,
- "borderColor": "rgb(54, 162, 235)"
- }]
- },
- "options": {
- "scales": {
- "yAxes": [{
- "ticks": {
- "beginAtZero": true
+ "type": "bar",
+ "data": {
+ "labels": [
+ "January",
+ "February",
+ "March",
+ "April"
+ ],
+ "datasets": [{
+ "label": "Bar Dataset",
+ "data": [10, 20, 30, 40],
+ "borderColor": "rgb(255, 99, 132)",
+ "backgroundColor": "rgba(255, 99, 132, 0.2)"
+ }, {
+ "label": "Line Dataset",
+ "data": [50, 50, 50, 50],
+ "type": "line",
+ "fill": false,
+ "borderColor": "rgb(54, 162, 235)"
+ }]
+ },
+ "options": {
+ "scales": {
+ "yAxes": [{
+ "ticks": {
+ "beginAtZero": true
+ }
+ }]
}
- }]
}
- }
}
{% endchartjs %}
"rgb(54, 162, 235)"
]
}]
- },
+ }
}
{% endchartjs %}
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderAlign`](#border-alignment) | `String` | Yes | Yes | `'center'`
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
-| [`borderWidth`](#styling) | `Number` | Yes | Yes | `2`
-| [`data`](#data-structure) | `Number[]` | - | - | **required**
+| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
+| [`data`](#data-structure) | `number[]` | - | - | **required**
| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
-| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined`
+| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
### Styling
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `startAngle` | `Number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset.
-| `animation.animateRotate` | `Boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
-| `animation.animateScale` | `Boolean` | `true` | If true, will animate scaling the chart from the center outwards.
+| `startAngle` | `number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset.
+| `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
+| `animation.animateScale` | `boolean` | `true` | If true, will animate scaling the chart from the center outwards.
## Default Options
The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
-All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
+All `point*` properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
| Name | Type | Description
| ---- | ---- | -----------
-| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
+| `label` | `string` | The label for the dataset which appears in the legend and tooltips.
| `backgroundColor` | `Color` | The fill color under the line. See [Colors](../general/colors.md#colors).
| `borderColor` | `Color` | The color of the line. See [Colors](../general/colors.md#colors).
-| `borderWidth` | `Number` | The width of the line in pixels.
-| `borderDash` | `Number[]` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `Number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `borderCapStyle` | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
-| `borderJoinStyle` | `String` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
-| `fill` | `Boolean/String` | How to fill the area under the line. See [area charts](area.md).
-| `lineTension` | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines.
-| `pointBackgroundColor` | `Color/Color[]` | The fill color for points.
-| `pointBorderColor` | `Color/Color[]` | The border color for points.
-| `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels.
-| `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered.
-| `pointRotation` | `Number/Number[]` | The rotation of the point in degrees.
-| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](#pointstyle)
-| `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events.
-| `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered.
-| `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered.
-| `pointHoverBorderWidth` | `Number/Number[]` | Border width of point when hovered.
-| `pointHoverRadius` | `Number/Number[]` | The radius of the point when hovered.
+| `borderWidth` | `number` | The width of the line in pixels.
+| `borderDash` | `number[]` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | `number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `borderCapStyle` | `string` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
+| `borderJoinStyle` | `string` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
+| `fill` | <code>boolean|string</code> | How to fill the area under the line. See [area charts](area.md).
+| `lineTension` | `number` | Bezier curve tension of the line. Set to 0 to draw straightlines.
+| `pointBackgroundColor` | <code>Color|Color[]</code> | The fill color for points.
+| `pointBorderColor` | <code>Color|Color[]</code> | The border color for points.
+| `pointBorderWidth` | <code>number|number[]</code> | The width of the point border in pixels.
+| `pointRadius` | <code>number|number[]</code> | The radius of the point shape. If set to 0, the point is not rendered.
+| `pointRotation` | <code>number|number[]</code> | The rotation of the point in degrees.
+| `pointStyle` | <code>string|string[]|Image|Image[]</code> | Style of the point. [more...](#pointstyle)
+| `pointHitRadius` | <code>number|number[]</code> | The pixel size of the non-displayed point that reacts to mouse events.
+| `pointHoverBackgroundColor` | <code>Color|Color[]</code> | Point background color when hovered.
+| `pointHoverBorderColor` | <code>Color|Color[]</code> | Point border color when hovered.
+| `pointHoverBorderWidth` | <code>number|number[]</code> | Border width of point when hovered.
+| `pointHoverRadius` | <code>number|number[]</code> | The radius of the point when hovered.
### pointStyle
The style of point. Options are:
-* 'circle'
-* 'cross'
-* 'crossRot'
-* 'dash'.
-* 'line'
-* 'rect'
-* 'rectRounded'
-* 'rectRot'
-* 'star'
-* 'triangle'
+* `'circle'`
+* `'cross'`
+* `'crossRot'`
+* `'dash'.`
+* `'line'`
+* `'rect'`
+* `'rectRounded'`
+* `'rectRot'`
+* `'star'`
+* `'triangle'`
If the option is an image, that image is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage).
## 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 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]
x: 15,
y: 10
}]
-```
\ No newline at end of file
+```
Chart.defaults.global.hover.mode = 'nearest';
// Hover mode is set to nearest because it was not overridden here
-var chartHoverModeNearest = new Chart(ctx, {
+var chartHoverModeNearest = new Chart(ctx, {
type: 'line',
- data: data,
+ data: data
});
// This chart would have the hover mode that was passed in
mode: 'index'
}
}
-})
+});
```
The following animation options are available. The global options for are defined in `Chart.defaults.global.animation`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `duration` | `Number` | `1000` | The number of milliseconds an animation takes.
-| `easing` | `String` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
-| `onProgress` | `Function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks)
-| `onComplete` | `Function` | `null` | Callback called at the end of an animation. [more...](#animation-callbacks)
+| ---- | ---- | ------- | -----------
+| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
+| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
+| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks)
+| `onComplete` | `function` | `null` | Callback called at the end of an animation. [more...](#animation-callbacks)
## Easing
- Available options are:
+
+Available options are:
* `'linear'`
* `'easeInQuad'`
* `'easeOutQuad'`
chart: Chart,
// Current Animation frame number
- currentStep: Number,
+ currentStep: number,
// Number of animation frames
- numSteps: Number,
+ numSteps: number,
// Animation easing to use
- easing: String,
+ easing: string,
// Function that renders the chart
- render: Function,
+ render: function,
// User callback
- onAnimationProgress: Function,
+ onAnimationProgress: function,
// User callback
- onAnimationComplete: Function
+ onAnimationComplete: function
}
```
```
## Point Configuration
-Point elements are used to represent the points in a line chart or a bubble chart.
+Point elements are used to represent the points in a line, radar or bubble chart.
Global point options: `Chart.defaults.global.elements.point`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `radius` | `Number` | `3` | Point radius.
-| [`pointStyle`](#point-styles) | `String` | `circle` | Point style.
-| `rotation` | `Number` | `0` | Point rotation (in degrees).
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point fill color.
-| `borderWidth` | `Number` | `1` | Point stroke width.
-| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point stroke color.
-| `hitRadius` | `Number` | `1` | Extra radius added to point radius for hit detection.
-| `hoverRadius` | `Number` | `4` | Point radius when hovered.
-| `hoverBorderWidth` | `Number` | `1` | Stroke width when hovered.
+| ---- | ---- | ------- | -----------
+| `radius` | `number` | `3` | Point radius.
+| [`pointStyle`](#point-styles) | <code>string|Image</code> | `'circle'` | Point style.
+| `rotation` | `number` | `0` | Point rotation (in degrees).
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Point fill color.
+| `borderWidth` | `number` | `1` | Point stroke width.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Point stroke color.
+| `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection.
+| `hoverRadius` | `number` | `4` | Point radius when hovered.
+| `hoverBorderWidth` | `number` | `1` | Stroke width when hovered.
### Point Styles
Global line options: `Chart.defaults.global.elements.line`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `tension` | `Number` | `0.4` | Bézier curve tension (`0` for no Bézier curves).
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line fill color.
-| `borderWidth` | `Number` | `3` | Line stroke width.
-| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line stroke color.
-| `borderCapStyle` | `String` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
-| `borderDash` | `Array` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `Number` | `0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `borderJoinStyle` | `String` | `'miter` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
-| `capBezierPoints` | `Boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
-| `fill` | `Boolean/String` | `true` | Fill location: `'zero'`, `'top'`, `'bottom'`, `true` (eq. `'zero'`) or `false` (no fill).
-| `stepped` | `Boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
+| ---- | ---- | ------- | -----------
+| `tension` | `number` | `0.4` | Bézier curve tension (`0` for no Bézier curves).
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Line fill color.
+| `borderWidth` | `number` | `3` | Line stroke width.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Line stroke color.
+| `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
+| `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `borderJoinStyle` | `string` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
+| `capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
+| `fill` | <code>boolean|string</code> | `true` | Fill location: `'zero'`, `'top'`, `'bottom'`, `true` (eq. `'zero'`) or `false` (no fill).
+| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
## Rectangle Configuration
Rectangle elements are used to represent the bars in a bar chart.
Global rectangle options: `Chart.defaults.global.elements.rectangle`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar fill color.
-| `borderWidth` | `Number` | `0` | Bar stroke width.
-| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar stroke color.
-| `borderSkipped` | `String` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`.
+| ---- | ---- | ------- | -----------
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar fill color.
+| `borderWidth` | `number` | `0` | Bar stroke width.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar stroke color.
+| `borderSkipped` | `string` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`.
## Arc Configuration
Arcs are used in the polar area, doughnut and pie charts.
Global arc options: `Chart.defaults.global.elements.arc`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Arc fill color.
+| ---- | ---- | ------- | -----------
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Arc fill color.
+| `borderAlign` | `string` | `'center'` | Arc stroke alignment.
| `borderColor` | `Color` | `'#fff'` | Arc stroke color.
-| `borderWidth`| `Number` | `2` | Arc stroke width.
+| `borderWidth`| `number` | `2` | Arc stroke width.
The layout configuration is passed into the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.global.layout`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `padding` | `Number` or `Object` | `0` | The padding to add inside the chart. [more...](#padding)
+| ---- | ---- | ------- | -----------
+| `padding` | <code>number|object</code> | `0` | The padding to add inside the chart. [more...](#padding)
## Padding
-If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top`, and `bottom` properties can also be specified.
+If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified.
Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do:
}
}
});
-```
\ No newline at end of file
+```
The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.global.legend`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `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.
-| `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.
+| ---- | ---- | ------- | -----------
+| `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.
+| `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.
## Position
Position of the legend. Options are:
The legend label configuration is nested below the legend configuration using the `labels` key.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `boxWidth` | `Number` | `40` | Width of coloured box.
-| `fontSize` | `Number` | `12` | Font size of text.
-| `fontStyle` | `String` | `'normal'` | Font style of text.
+| ---- | ---- | ------- | -----------
+| `boxWidth` | `number` | `40` | Width of coloured box.
+| `fontSize` | `number` | `12` | Font size of text.
+| `fontStyle` | `string` | `'normal'` | Font style of text.
| `fontColor` | `Color` | `'#666'` | Color of text.
-| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family of legend text.
-| `padding` | `Number` | `10` | Padding between rows of colored boxes.
-| `generateLabels` | `Function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
-| `filter` | `Function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
-| `usePointStyle` | `Boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family of legend text.
+| `padding` | `number` | `10` | Padding between rows of colored boxes.
+| `generateLabels` | `function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
+| `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
+| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
## Legend Item Interface
```javascript
{
// Label that will be displayed
- text: String,
+ text: string,
// Fill style of the legend box
fillStyle: Color,
// If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
- hidden: Boolean,
+ hidden: boolean,
// For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
- lineCap: String,
+ lineCap: string,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
- lineDash: Array[Number],
+ lineDash: number[],
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
- lineDashOffset: Number,
+ lineDashOffset: number,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
- lineJoin: String,
+ lineJoin: string,
// Width of box border
- lineWidth: Number,
+ lineWidth: number,
// Stroke style of the legend box
- strokeStyle: Color
+ strokeStyle: Color,
// Point style of the legend box (only used if usePointStyle is true)
- pointStyle: String
+ pointStyle: string
}
```
fontColor: 'rgb(255, 99, 132)'
}
}
-}
+ }
});
```
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
- meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
+ meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
defaultLegendClickHandler(e, legendItem);
} else {
let ci = this.chart;
- [ci.getDatasetMeta(0),
- ci.getDatasetMeta(1)].forEach(function(meta) {
- meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
+ [
+ ci.getDatasetMeta(0),
+ ci.getDatasetMeta(1)
+ ].forEach(function(meta) {
+ meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
});
ci.update();
}
data: data,
options: {
legend: {
-
+ onClick: newLegendClickHandler
}
}
});
The title configuration is passed into the `options.title` namespace. The global options for the chart title is defined in `Chart.defaults.global.title`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `display` | `Boolean` | `false` | Is the title shown?
-| `position` | `String` | `'top'` | Position of title. [more...](#position)
-| `fontSize` | `Number` | `12` | Font size.
-| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text.
+| ---- | ---- | ------- | -----------
+| `display` | `boolean` | `false` | Is the title shown?
+| `position` | `string` | `'top'` | Position of title. [more...](#position)
+| `fontSize` | `number` | `12` | Font size.
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text.
| `fontColor` | `Color` | `'#666'` | Font color.
-| `fontStyle` | `String` | `'bold'` | Font style.
-| `padding` | `Number` | `10` | Number of pixels to add above and below the title text.
-| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
-| `text` | `String/String[]` | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
+| `fontStyle` | `string` | `'bold'` | Font style.
+| `padding` | `number` | `10` | Number of pixels to add above and below the title text.
+| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
+| `text` | <code>string|string[]</code> | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
### Position
Possible title position values are:
text: 'Custom Chart Title'
}
}
-})
+});
```
The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.global.tooltips`.
| Name | Type | Default | Description
-| -----| ---- | --------| -----------
-| `enabled` | `Boolean` | `true` | Are on-canvas tooltips enabled?
-| `custom` | `Function` | `null` | See [custom tooltip](#external-custom-tooltips) section.
-| `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes).
-| `intersect` | `Boolean` | `true` | If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
-| `position` | `String` | `'average'` | The mode for positioning the tooltip. [more...](#position-modes)
-| `callbacks` | `Object` | | See the [callbacks section](#tooltip-callbacks).
-| `itemSort` | `Function` | | Sort tooltip items. [more...](#sort-callback)
-| `filter` | `Function` | | Filter tooltip items. [more...](#filter-callback)
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.8)'` | Background color of the tooltip.
-| `titleFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Title font.
-| `titleFontSize` | `Number` | `12` | Title font size.
-| `titleFontStyle` | `String` | `'bold'` | Title font style.
+| ---- | ---- | ------- | -----------
+| `enabled` | `boolean` | `true` | Are on-canvas tooltips enabled?
+| `custom` | `function` | `null` | See [custom tooltip](#external-custom-tooltips) section.
+| `mode` | `string` | `'nearest'` | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes).
+| `intersect` | `boolean` | `true` | If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
+| `position` | `string` | `'average'` | The mode for positioning the tooltip. [more...](#position-modes)
+| `callbacks` | `object` | | See the [callbacks section](#tooltip-callbacks).
+| `itemSort` | `function` | | Sort tooltip items. [more...](#sort-callback)
+| `filter` | `function` | | Filter tooltip items. [more...](#filter-callback)
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.8)'` | Background color of the tooltip.
+| `titleFontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Title font.
+| `titleFontSize` | `number` | `12` | Title font size.
+| `titleFontStyle` | `string` | `'bold'` | Title font style.
| `titleFontColor` | `Color` | `'#fff'` | Title font color.
-| `titleSpacing` | `Number` | `2` | Spacing to add to top and bottom of each title line.
-| `titleMarginBottom` | `Number` | `6` | Margin to add on bottom of title section.
-| `bodyFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Body line font.
-| `bodyFontSize` | `Number` | `12` | Body font size.
-| `bodyFontStyle` | `String` | `'normal'` | Body font style.
+| `titleSpacing` | `number` | `2` | Spacing to add to top and bottom of each title line.
+| `titleMarginBottom` | `number` | `6` | Margin to add on bottom of title section.
+| `bodyFontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Body line font.
+| `bodyFontSize` | `number` | `12` | Body font size.
+| `bodyFontStyle` | `string` | `'normal'` | Body font style.
| `bodyFontColor` | `Color` | `'#fff'` | Body font color.
-| `bodySpacing` | `Number` | `2` | Spacing to add to top and bottom of each tooltip item.
-| `footerFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Footer font.
-| `footerFontSize` | `Number` | `12` | Footer font size.
-| `footerFontStyle` | `String` | `'bold'` | Footer font style.
+| `bodySpacing` | `number` | `2` | Spacing to add to top and bottom of each tooltip item.
+| `footerFontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Footer font.
+| `footerFontSize` | `number` | `12` | Footer font size.
+| `footerFontStyle` | `string` | `'bold'` | Footer font style.
| `footerFontColor` | `Color` | `'#fff'` | Footer font color.
-| `footerSpacing` | `Number` | `2` | Spacing to add to top and bottom of each footer line.
-| `footerMarginTop` | `Number` | `6` | Margin to add before drawing the footer.
-| `xPadding` | `Number` | `6` | Padding to add on left and right of tooltip.
-| `yPadding` | `Number` | `6` | Padding to add on top and bottom of tooltip.
-| `caretPadding` | `Number` | `2` | Extra distance to move the end of the tooltip arrow away from the tooltip point.
-| `caretSize` | `Number` | `5` | Size, in px, of the tooltip arrow.
-| `cornerRadius` | `Number` | `6` | Radius of tooltip corner curves.
+| `footerSpacing` | `number` | `2` | Spacing to add to top and bottom of each footer line.
+| `footerMarginTop` | `number` | `6` | Margin to add before drawing the footer.
+| `xPadding` | `number` | `6` | Padding to add on left and right of tooltip.
+| `yPadding` | `number` | `6` | Padding to add on top and bottom of tooltip.
+| `caretPadding` | `number` | `2` | Extra distance to move the end of the tooltip arrow away from the tooltip point.
+| `caretSize` | `number` | `5` | Size, in px, of the tooltip arrow.
+| `cornerRadius` | `number` | `6` | Radius of tooltip corner curves.
| `multiKeyBackground` | `Color` | `'#fff'` | Color to draw behind the colored boxes when multiple items are in the tooltip.
-| `displayColors` | `Boolean` | `true` | If true, color boxes are shown in the tooltip.
-| `borderColor` | `Color` | `'rgba(0,0,0,0)'` | Color of the border.
-| `borderWidth` | `Number` | `0` | Size of the border.
+| `displayColors` | `boolean` | `true` | If true, color boxes are shown in the tooltip.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0)'` | Color of the border.
+| `borderWidth` | `number` | `0` | Size of the border.
### Position Modes
- Possible modes are:
-* 'average'
-* 'nearest'
-'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position.
+Possible modes are:
+* `'average'`
+* `'nearest'`
-New modes can be defined by adding functions to the Chart.Tooltip.positioners map.
+`'average'` mode will place the tooltip at the average position of the items displayed in the tooltip. `'nearest'` will place the tooltip at the position of the element closest to the event position.
+
+New modes can be defined by adding functions to the `Chart.Tooltip.positioners` map.
Example:
```javascript
x: 0,
y: 0
};
-}
+};
```
### Sort Callback
## Tooltip Callbacks
-The tooltip label configuration is nested below the tooltip configuration using the `callbacks` key. The tooltip has the following callbacks for providing text. For all functions, 'this' will be the tooltip object created from the Chart.Tooltip constructor.
+The tooltip label configuration is nested below the tooltip configuration using the `callbacks` key. The tooltip has the following callbacks for providing text. For all functions, `this` will be the tooltip object created from the `Chart.Tooltip` constructor.
-All functions are called with the same arguments: a [tooltip item](#tooltip-item-interface) and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
+All functions are called with the same arguments: a [tooltip item](#tooltip-item-interface) and the `data` object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
| Name | Arguments | Description
| ---- | --------- | -----------
-| `beforeTitle` | `Array[tooltipItem], data` | Returns the text to render before the title.
-| `title` | `Array[tooltipItem], data` | Returns text to render as the title of the tooltip.
-| `afterTitle` | `Array[tooltipItem], data` | Returns text to render after the title.
-| `beforeBody` | `Array[tooltipItem], data` | Returns text to render before the body section.
-| `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip.
-| `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip.
-| `labelColor` | `tooltipItem, chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
-| `labelTextColor` | `tooltipItem, chart` | Returns the colors for the text of the label for the tooltip item.
-| `afterLabel` | `tooltipItem, data` | Returns text to render after an individual label.
-| `afterBody` | `Array[tooltipItem], data` | Returns text to render after the body section.
-| `beforeFooter` | `Array[tooltipItem], data` | Returns text to render before the footer section.
-| `footer` | `Array[tooltipItem], data` | Returns text to render as the footer of the tooltip.
-| `afterFooter` | `Array[tooltipItem], data` | Text to render after the footer section.
+| `beforeTitle` | `TooltipItem[], object` | Returns the text to render before the title.
+| `title` | `TooltipItem[], object` | Returns text to render as the title of the tooltip.
+| `afterTitle` | `TooltipItem[], object` | Returns text to render after the title.
+| `beforeBody` | `TooltipItem[], object` | Returns text to render before the body section.
+| `beforeLabel` | `TooltipItem, object` | Returns text to render before an individual label. This will be called for each item in the tooltip.
+| `label` | `TooltipItem, object` | Returns text to render for an individual item in the tooltip. [more...](#label-callback)
+| `labelColor` | `TooltipItem, Chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
+| `labelTextColor` | `TooltipItem, Chart` | Returns the colors for the text of the label for the tooltip item.
+| `afterLabel` | `TooltipItem, object` | Returns text to render after an individual label.
+| `afterBody` | `TooltipItem[], object` | Returns text to render after the body section.
+| `beforeFooter` | `TooltipItem[], object` | Returns text to render before the footer section.
+| `footer` | `TooltipItem[], object` | Returns text to render as the footer of the tooltip.
+| `afterFooter` | `TooltipItem[], object` | Text to render after the footer section.
### Label Callback
-The label callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.
+The `label` callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.
```javascript
var chart = new Chart(ctx, {
return {
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(255, 0, 0)'
- }
+ };
},
- labelTextColor:function(tooltipItem, chart){
+ labelTextColor: function(tooltipItem, chart) {
return '#543453';
}
}
```javascript
{
// X Value of the tooltip as a string
- xLabel: String,
+ xLabel: string,
// Y value of the tooltip as a string
- yLabel: String,
+ yLabel: string,
// Index of the dataset the item comes from
- datasetIndex: Number,
+ datasetIndex: number,
// Index of this data item in the dataset
- index: Number,
+ index: number,
// X position of matching point
- x: Number,
+ x: number,
// Y position of matching point
- y: Number,
+ y: number
}
```
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
- tooltipEl.innerHTML = "<table></table>";
+ tooltipEl.innerHTML = '<table></table>';
document.body.appendChild(tooltipEl);
}
dataPoints: TooltipItem[],
// Positioning
- xPadding: Number,
- yPadding: Number,
- xAlign: String,
- yAlign: String,
+ xPadding: number,
+ yPadding: number,
+ xAlign: string,
+ yAlign: string,
// X and Y properties are the top left of the tooltip
- x: Number,
- y: Number,
- width: Number,
- height: Number,
+ x: number,
+ y: number,
+ width: number,
+ height: number,
// Where the tooltip points to
- caretX: Number,
- caretY: Number,
+ caretX: number,
+ caretY: number,
// Body
// The body lines that need to be rendered
// Each object contains 3 parameters
- // before: String[] // lines of text before the line with the color square
- // lines: String[], // lines of text to render as the main item with color square
- // after: String[], // lines of text to render after the main lines
- body: Object[],
+ // before: string[] // lines of text before the line with the color square
+ // lines: string[], // lines of text to render as the main item with color square
+ // after: string[], // lines of text to render after the main lines
+ body: object[],
// lines of text that appear after the title but before the body
- beforeBody: String[],
+ beforeBody: string[],
// line of text that appear after the body and before the footer
- afterBody: String[],
+ afterBody: string[],
bodyFontColor: Color,
- _bodyFontFamily: String,
- _bodyFontStyle: String,
- _bodyAlign: String,
- bodyFontSize: Number,
- bodySpacing: Number,
+ _bodyFontFamily: string,
+ _bodyFontStyle: string,
+ _bodyAlign: string,
+ bodyFontSize: number,
+ bodySpacing: number,
// Title
// lines of text that form the title
- title: String[],
+ title: string[],
titleFontColor: Color,
- _titleFontFamily: String,
- _titleFontStyle: String,
- titleFontSize: Number,
- _titleAlign: String,
- titleSpacing: Number,
- titleMarginBottom: Number,
+ _titleFontFamily: string,
+ _titleFontStyle: string,
+ titleFontSize: number,
+ _titleAlign: string,
+ titleSpacing: number,
+ titleMarginBottom: number,
// Footer
// lines of text that form the footer
- footer: String[],
+ footer: string[],
footerFontColor: Color,
- _footerFontFamily: String,
- _footerFontStyle: String,
- footerFontSize: Number,
- _footerAlign: String,
- footerSpacing: Number,
- footerMarginTop: Number,
+ _footerFontFamily: string,
+ _footerFontStyle: string,
+ footerFontSize: number,
+ _footerAlign: string,
+ footerSpacing: number,
+ footerMarginTop: number,
// Appearance
- caretSize: Number,
- cornerRadius: Number,
+ caretSize: number,
+ caretPadding: number,
+ cornerRadius: number,
backgroundColor: Color,
// colors to render for each item in body[]. This is the color of the squares in the tooltip
labelColors: Color[],
+ labelTextColors: Color[],
// 0 opacity is a hidden tooltip
- opacity: Number,
+ opacity: number,
legendColorBackground: Color,
- displayColors: Boolean,
+ displayColors: boolean,
+ borderColor: Color,
+ borderWidth: number
}
```
# Chart Prototype Methods
-For each chart, there are a set of global prototype methods on the shared `ChartType` which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made.
+For each chart, there are a set of global prototype methods on the shared chart type which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made.
```javascript
// For example:
myChart.update({
duration: 800,
easing: 'easeOutBounce'
-})
+});
```
See [Updating Charts](updates.md) for more details.
// 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: 800,
- lazy: false,
- easing: 'easeOutBounce'
+ duration: 800,
+ lazy: false,
+ easing: 'easeOutBounce'
});
```
Calling `getElementsAtEvent(event)` on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.
```javascript
-canvas.onclick = function(evt){
+canvas.onclick = function(evt) {
var activePoints = myLineChart.getElementsAtEvent(evt);
// => activePoints is an array of points on the canvas that are at the same position as the click event.
};
```javascript
var meta = myChart.getDatasetMeta(0);
-var x = meta.data[0]._model.x
+var x = meta.data[0]._model.x;
```
# New Axes
-Axes in Chart.js can be individually extended. Axes should always derive from Chart.Scale but this is not a mandatory requirement.
+Axes in Chart.js can be individually extended. Axes should always derive from `Chart.Scale` but this is not a mandatory requirement.
```javascript
let MyScale = Chart.Scale.extend({
}]
}
}
-})
+});
```
## Scale Properties
```javascript
{
- left: Number, // left edge of the scale bounding box
- right: Number, // right edge of the bounding box'
- top: Number,
- bottom: Number,
- width: Number, // the same as right - left
- height: Number, // the same as bottom - top
+ left: number, // left edge of the scale bounding box
+ right: number, // right edge of the bounding box
+ top: number,
+ bottom: number,
+ width: number, // the same as right - left
+ height: number, // the same as bottom - top
// Margin on each side. Like css, this is outside the bounding box.
margins: {
- left: Number,
- right: Number,
- top: Number,
- bottom: Number,
+ left: number,
+ right: number,
+ top: number,
+ bottom: number
},
// Amount of padding on the inside of the bounding box (like CSS)
- paddingLeft: Number,
- paddingRight: Number,
- paddingTop: Number,
- paddingBottom: Number,
+ paddingLeft: number,
+ paddingRight: number,
+ paddingTop: number,
+ paddingBottom: number
}
```
// Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value
// @param index: index into the ticks array
- // @param includeOffset: if true, get the pixel halfway between the given tick and the next
- getPixelForTick: function(index, includeOffset) {},
+ getPixelForTick: function(index) {},
// Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value
// @param value : the value to get the pixel for
// @param index : index into the data array of the value
// @param datasetIndex : index of the dataset the value comes from
- // @param includeOffset : if true, get the pixel halfway between the given tick and the next
- getPixelForValue: function(value, index, datasetIndex, includeOffset) {}
+ getPixelForValue: function(value, index, datasetIndex) {},
// Get the value for a given pixel (x coordinate for horizontal axis, y coordinate for vertical axis)
// @param pixel : pixel value
Optionally, the following methods may also be overwritten, but an implementation is already provided by the `Chart.Scale` base class.
```javascript
+{
// Transform the ticks array of the scale instance into strings. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks);
convertTicksToLabels: function() {},
// Draws the scale onto the canvas. this.(left|right|top|bottom) will have been populated to tell you the area on the canvas to draw in
// @param chartArea : an object containing four properties: left, right, top, bottom. This is the rectangle that lines, bars, etc will be drawn in. It may be used, for example, to draw grid lines.
- draw: function(chartArea) {},
+ draw: function(chartArea) {}
+}
```
The Core.Scale base class also has some utility functions that you may find useful.
// If dataValue is an object, returns .x or .y depending on the return of isHorizontal()
// If the value is undefined, returns NaN
// Otherwise returns the value.
- // Note that in all cases, the returned value is not guaranteed to be a Number
+ // Note that in all cases, the returned value is not guaranteed to be a number
getRightValue: function(dataValue) {},
+
+ // Returns the scale tick objects ({label, major})
+ getTicks: function() {}
}
-```
\ No newline at end of file
+```
// Update the elements in response to new data
// @param reset : if true, put the elements into a reset state so they can animate to their final values
- update: function(reset) {},
+ update: function(reset) {}
}
```
new Chart(ctx, {
type: 'derivedBubble',
data: data,
- options: options,
+ options: options
});
```
### Bar Controller
-The bar controller has a special property that you should be aware of. To correctly calculate the width of a bar, the controller must determine the number of datasets that map to bars. To do this, the bar controller attaches a property `bar` to the dataset during initialization. If you are creating a replacement or updated bar controller, you should do the same. This will ensure that charts with regular bars and your new derived bars will work seamlessly.
\ No newline at end of file
+The bar controller has a special property that you should be aware of. To correctly calculate the width of a bar, the controller must determine the number of datasets that map to bars. To do this, the bar controller attaches a property `bar` to the dataset during initialization. If you are creating a replacement or updated bar controller, you should do the same. This will ensure that charts with regular bars and your new derived bars will work seamlessly.
# Joining the project
- Active committers and contributors are invited to introduce yourself and request commit access to this project. We have a very active Slack community that you can join [here](https://chartjs-slack.herokuapp.com/). If you think you can help, we'd love to have you!
+Active committers and contributors are invited to introduce yourself and request commit access to this project. We have a very active Slack community that you can join [here](https://chartjs-slack.herokuapp.com/). If you think you can help, we'd love to have you!
# Building and Testing
```javascript
var chart = new Chart(ctx, {
- config: {
+ options: {
foo: { ... }, // chart 'foo' option
plugins: {
p1: {
});
var chart = new Chart(ctx, {
- config: {
+ options: {
plugins: {
p1: false // disable plugin 'p1' for this instance
}
## Plugin Core API
-Available hooks (as of version 2.6):
-
-* beforeInit
-* afterInit
-* beforeUpdate *(cancellable)*
-* afterUpdate
-* beforeLayout *(cancellable)*
-* afterLayout
-* beforeDatasetsUpdate *(cancellable)*
-* afterDatasetsUpdate
-* beforeDatasetUpdate *(cancellable)*
-* afterDatasetUpdate
-* beforeRender *(cancellable)*
-* afterRender
-* beforeDraw *(cancellable)*
-* afterDraw
-* beforeDatasetsDraw *(cancellable)*
-* afterDatasetsDraw
-* beforeDatasetDraw *(cancellable)*
-* afterDatasetDraw
-* beforeEvent *(cancellable)*
-* afterEvent
-* resize
-* destroy
+Available hooks (as of version 2.7):
+
+* `beforeInit`
+* `afterInit`
+* `beforeUpdate` *(cancellable)*
+* `afterUpdate`
+* `beforeLayout` *(cancellable)*
+* `afterLayout`
+* `beforeDatasetsUpdate` *(cancellable)*
+* `afterDatasetsUpdate`
+* `beforeDatasetUpdate` *(cancellable)*
+* `afterDatasetUpdate`
+* `beforeRender` *(cancellable)*
+* `afterRender`
+* `beforeDraw` *(cancellable)*
+* `afterDraw`
+* `beforeDatasetsDraw` *(cancellable)*
+* `afterDatasetsDraw`
+* `beforeDatasetDraw` *(cancellable)*
+* `afterDatasetDraw`
+* `beforeEvent` *(cancellable)*
+* `afterEvent`
+* `resize`
+* `destroy`
function updateConfigAsNewObject(chart) {
chart.options = {
responsive: true,
- title:{
- display:true,
+ title: {
+ display: true,
text: 'Chart.js'
},
scales: {
display: true
}]
}
- }
+ };
chart.update();
}
```
display: true,
type: 'logarithmic'
}]
- }
+ };
chart.update();
// need to update the reference
xScale = chart.scales['newId'];
function updateScale(chart) {
chart.options.scales.yAxes[0] = {
type: 'logarithmic'
- }
+ };
chart.update();
}
```
## Preventing Animations
-Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with a duration of `0`. This will render the chart synchronously and without an animation.
\ No newline at end of file
+Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with a duration of `0`. This will render the chart synchronously and without an animation.
Chart.js charts are rendered on user provided `canvas` elements. Thus, it is up to the user to create the `canvas` element in a way that is accessible. The `canvas` element has support in all browsers and will render on screen but the `canvas` content will not be accessible to screen readers.
-With `canvas`, the accessibility has to be added with `ARIA` attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tags.
+With `canvas`, the accessibility has to be added with ARIA attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tags.
This [website](http://pauljadam.com/demos/canvas.html) has a more detailed explanation of `canvas` accessibility as well as in depth examples.
```html
<canvas id="okCanvas2" width="400" height="100">
- <p>Hello Fallback World</p>
+
<p>Hello Fallback World</p>
</canvas>
```
backgroundColor: fillPattern
}]
}
- })
-}
+ });
+};
```
Using pattern fills for data graphics can help viewers with vision deficiencies (e.g. color-blindness or partial sight) to [more easily understand your data](http://betweentwobrackets.com/data-graphics-and-colour-vision/).
pattern.draw('square', '#ff6384'),
pattern.draw('circle', '#36a2eb'),
pattern.draw('diamond', '#cc65fe'),
- pattern.draw('triangle', '#ffce56'),
+ pattern.draw('triangle', '#ffce56')
]
}],
labels: ['Red', 'Blue', 'Purple', 'Yellow']
};
-```
\ No newline at end of file
+```
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `devicePixelRatio` | `Number` | window.devicePixelRatio | Override the window's default devicePixelRatio.
+| `devicePixelRatio` | `number` | `window.devicePixelRatio` | Override the window's default devicePixelRatio.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `defaultFontColor` | `Color` | `'#666'` | Default font color for all text.
-| `defaultFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text.
-| `defaultFontSize` | `Number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
-| `defaultFontStyle` | `String` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
+| `defaultFontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text.
+| `defaultFontSize` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
+| `defaultFontStyle` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
## Missing Fonts
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. See [Interaction Modes](./modes.md#interaction-modes) for details.
-| `intersect` | `Boolean` | `true` | if true, the hover mode only applies when the mouse position intersects an item on the chart.
-| `axis` | `String` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `index` mode and `'xy'` in `dataset` and `nearest` modes.
-| `animationDuration` | `Number` | `400` | Duration in milliseconds it takes to animate hover style changes.
+| `mode` | `string` | `'nearest'` | Sets which elements appear in the tooltip. See [Interaction Modes](./modes.md#interaction-modes) for details.
+| `intersect` | `boolean` | `true` | if true, the hover mode only applies when the mouse position intersects an item on the chart.
+| `axis` | `string` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `'index'` mode and `'xy'` in `dataset` and `'nearest'` modes.
+| `animationDuration` | `number` | `400` | Duration in milliseconds it takes to animate hover style changes.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `events` | `String[]` | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` | The `events` option defines the browser events that the chart should listen to for tooltips and hovering. [more...](#event-option)
-| `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.
+| `events` | `string[]` | `['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']` | The `events` option defines the browser events that the chart should listen to for tooltips and hovering. [more...](#event-option)
+| `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
For example, to have the chart only respond to click events, you could do:
mode: 'point'
}
}
-})
+});
```
## nearest
mode: 'nearest'
}
}
-})
+});
```
## single (deprecated)
-Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.
+Finds the first item that intersects the point and returns it. Behaves like `'nearest'` mode with `intersect = true`.
## label (deprecated)
See `'index'` mode.
mode: 'index'
}
}
-})
+});
```
To use index mode in a chart like the horizontal bar chart, where we search along the y direction, you can use the `axis` setting introduced in v2.7.0. By setting this value to `'y'` on the y direction is used.
axis: 'y'
}
}
-})
+});
```
## x-axis (deprecated)
mode: 'dataset'
}
}
-})
+});
```
## x
mode: 'x'
}
}
-})
+});
```
## y
mode: 'y'
}
}
-})
-```
\ No newline at end of file
+});
+```
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
-| `responsive` | `Boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)).
-| `responsiveAnimationDuration` | `Number` | `0` | Duration in milliseconds it takes to animate to new size after a resize event.
-| `maintainAspectRatio` | `Boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing.
-| `aspectRatio` | `Number` | `2` | Canvas aspect ratio (i.e. `width / height`, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
-| `onResize` | `Function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.
+| `responsive` | `boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)).
+| `responsiveAnimationDuration` | `number` | `0` | Duration in milliseconds it takes to animate to new size after a resize event.
+| `maintainAspectRatio` | `boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing.
+| `aspectRatio` | `number` | `2` | Canvas aspect ratio (i.e. `width / height`, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
+| `onResize` | `function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.
## Important Note
-Detecting when the canvas size changes can not be done directly from the `CANVAS` element. Chart.js uses its parent container to update the canvas *render* and *display* sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only**. Responsiveness can then be achieved by setting relative values for the container size ([example](https://codepen.io/chartjs/pen/YVWZbz)):
+Detecting when the canvas size changes can not be done directly from the `canvas` element. Chart.js uses its parent container to update the canvas *render* and *display* sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only**. Responsiveness can then be achieved by setting relative values for the container size ([example](https://codepen.io/chartjs/pen/YVWZbz)):
```html
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
```javascript
function beforePrintHandler () {
- for (var id in Chart.instances) {
- Chart.instances[id].resize()
- }
+ for (var id in Chart.instances) {
+ Chart.instances[id].resize();
+ }
}
```
Now that we have a canvas we can use, we need to include Chart.js in our page.
```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
```
Now, we can create a chart. We add a script to our page:
// The data for our dataset
data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
- data: [0, 10, 5, 2, 20, 30, 45],
+ data: [0, 10, 5, 2, 20, 30, 45]
}]
},
It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
-There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases).
\ No newline at end of file
+All our examples are [available online](https://www.chartjs.org/samples/latest/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder.
# Selecting the Correct Build
-Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
+Chart.js provides two different builds for you to choose: **Stand-Alone Build**, **Bundled Build**.
## Stand-Alone Build
Files:
* `dist/Chart.bundle.js`
* `dist/Chart.bundle.min.js`
-The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.
+The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.
## Require JS
```javascript
-require(['path/to/chartjs/dist/Chart.js'], function(Chart){
+require(['path/to/chartjs/dist/Chart.js'], function(Chart) {
var myChart = new Chart(ctx, {...});
});
```
-> **Important:** RequireJS [can **not** load CommonJS module as is](http://www.requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
+> **Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
```javascript
// Any of the following formats may be used
-var ctx = document.getElementById("myChart");
-var ctx = document.getElementById("myChart").getContext("2d");
-var ctx = $("#myChart");
-var ctx = "myChart";
+var ctx = document.getElementById('myChart');
+var ctx = document.getElementById('myChart').getContext('2d');
+var ctx = $('#myChart');
+var ctx = 'myChart';
```
Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!
```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
-var ctx = document.getElementById("myChart");
+var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
- labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+ labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
- 'rgba(255,99,132,1)',
+ 'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
scales: {
yAxes: [{
ticks: {
- beginAtZero:true
+ beginAtZero: true
}
}]
}
}
});
</script>
-```
\ No newline at end of file
+```
-# Additional Notes
\ No newline at end of file
+# Additional Notes
| SVG | | ✓ | ✓ | ✓ |
| Built-in Charts | ✓ | | ✓ | ✓ |
| 8+ Chart Types | ✓ | ✓ | ✓ | |
-| Extendable to Custom Charts | ✓ | ✓ | | |
+| Extendable to Custom Charts | ✓ | ✓ | | |
| Supports Modern Browsers | ✓ | ✓ | ✓ | ✓ |
| Extensive Documentation | ✓ | ✓ | ✓ | ✓ |
| Open Source | ✓ | ✓ | | ✓ |
| Horizontal Bar | ✓ | ✓ | ✓ |
| Pie/Doughnut | ✓ | ✓ | ✓ |
| Polar Area | ✓ | ✓ | |
-| Radar | ✓ | | |
+| Radar | ✓ | | |
| Scatter | ✓ | ✓ | ✓ |
| Bubble | ✓ | | |
| Gauges | | ✓ | |
| Maps (Heat/Tree/etc.) | | ✓ | |
-
### Ember.js
- <a href="https://github.com/aomran/ember-cli-chart" target="_blank">ember-cli-chart</a>
-
+
### Omi (v5+)
- <a href="https://github.com/Tencent/omi/tree/master/packages/omi-chart" target="_blank">omi-chart</a>
# License
-Chart.js is <a href="https://github.com/chartjs/Chart.js" target="_blank">open source</a> and available under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>.
\ No newline at end of file
+Chart.js is <a href="https://github.com/chartjs/Chart.js" target="_blank">open source</a> and available under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>.
projects / thirdparty / Chart.js.git / commitdiff
