It's easy to get started with Chart.js. All that's required is the script included in your page along with a single `<canvas>` node to render the chart.
-In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md)
+In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md).
```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/README.md#radial-axes).
-Scales in Chart.js >V2.0 are significantly more powerful, but also different than those of v1.0.
+Scales in Chart.js >v2.0 are significantly more powerful, but also different than those of v1.0.
* Multiple X & Y axes are supported.
* A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
-* Scale titles are supported
-* New scale types can be extended without writing an entirely new chart type
+* Scale titles are supported.
+* New scale types can be extended without writing an entirely new chart type.
# Common Configuration
-The following properties are common to all axes provided by Chart.js
+The following properties are common to all axes provided by Chart.js.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| 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
+| `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 y direction for the x axis, and the x 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.*
| `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.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.
### 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
### Ticks Source
-The `ticks.source` property controls the ticks generation
+The `ticks.source` property controls the ticks generation.
-* `'auto'`: generates "optimal" ticks based on scale size and time options.
+* `'auto'`: generates "optimal" ticks based on scale size and time options
* `'data'`: generates ticks from data (including labels from data `{t|x|y}` objects)
* `'labels'`: generates ticks from user given `data.labels` values ONLY
| -----| ---- | --------| -----------
| `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))
+| `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)).
| `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.
## Creating Custom Tick Formats
It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to override the `ticks.callback` method in the axis configuration.
-In the following example, every label of the Y axis would be displayed with a dollar sign at the front..
+In the following example, every label of the Y axis would be displayed with a dollar sign at the front.
If the callback returns `null` or `undefined` the associated grid line will be hidden.
| Name | Type | Default | Description
| -----| ---- | --------| -----------
-| `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops
+| `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.
| `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
+| `showLabelBackdrop` | `Boolean` | `true` | If true, draw a background behind the tick labels.
## Axis Range Settings
| 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
+| `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.
## Point Label Options
| `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
+| `fontSize` | `Number` | 10 | font size in pixels.
| `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.
| 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)
+| `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` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
+| `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` | 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.
| `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` | 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)
+| `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` | 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
| 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
+| `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.
[Area charts](area.md) can be built from a line or radar chart using the dataset `fill` option.
-To create a new chart type, see the [developer notes](../developers/charts.md#new-charts)
+To create a new chart type, see the [developer notes](../developers/charts.md#new-charts).
## 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`)
| Name | Type | Description
| ---- | ---- | -----------
| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
-| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
+| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis.
| `yAxisID` | `String` | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
-| `backgroundColor` | `Color/Color[]` | The fill color of the bar. See [Colors](../general/colors.md#colors)
-| `borderColor` | `Color/Color[]` | The color of the bar border. See [Colors](../general/colors.md#colors)
+| `backgroundColor` | `Color/Color[]` | The fill color of the bar. See [Colors](../general/colors.md#colors).
+| `borderColor` | `Color/Color[]` | The color of the bar border. See [Colors](../general/colors.md#colors).
| `borderWidth` | `Number/Number[]` | The stroke width of the bar in pixels.
| `borderSkipped` | `String` | Which edge to skip drawing the border for. [more...](#borderskipped)
| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the bars when hovered.
| 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.
| Name | Description
| ---- | ----
-| `backgroundColor` | bubble background color
-| `borderColor` | bubble border color
-| `borderWidth` | bubble border width (in pixels)
-| `pointStyle` | bubble [shape style](../configuration/elements#point-styles)
-| `rotation` | bubble rotation (in degrees)
-| `radius` | bubble radius (in pixels)
+| `backgroundColor` | bubble background color.
+| `borderColor` | bubble border color.
+| `borderWidth` | bubble border width (in pixels).
+| `pointStyle` | bubble [shape style](../configuration/elements#point-styles).
+| `rotation` | bubble rotation (in degrees).
+| `radius` | bubble radius (in pixels).
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
| Name | Description
| ---- | -----------
-| `hoverBackgroundColor` | bubble background color when hovered
-| `hoverBorderColor` | bubble border color hovered
-| `hoverBorderWidth` | bubble border width when hovered (in pixels)
-| `hoverRadius` | bubble **additional** radius when hovered (in pixels)
-| `hitRadius` | bubble **additional** radius for hit detection (in pixels)
+| `hoverBackgroundColor` | bubble background color when hovered.
+| `hoverBorderColor` | bubble border color hovered.
+| `hoverBorderWidth` | bubble border width when hovered (in pixels).
+| `hoverRadius` | bubble **additional** radius when hovered (in pixels).
+| `hitRadius` | bubble **additional** radius for hit detection (in pixels).
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
| Name | Type | Description
| ---- | ---- | -----------
-| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
-| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
+| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
+| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
| `borderWidth` | `Number[]` | The border width of the arcs in the dataset.
| `hoverBackgroundColor` | `Color[]` | The fill colour of the arcs when hovered.
| `hoverBorderColor` | `Color[]` | The stroke colour of the arcs when hovered.
| ---- | ---- | ------- | -----------
| `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
+| `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.
For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
-You also need to specify an array of labels so that tooltips appear correctly
+You also need to specify an array of labels so that tooltips appear correctly.
```javascript
data = {
| Name | Type | Description
| ---- | ---- | -----------
| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
-| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
+| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis.
| `yAxisID` | `String` | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
-| `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)
+| `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)
+| `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).
| `cubicInterpolationMode` | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. [more...](#cubicinterpolationmode)
-| `fill` | `Boolean/String` | How to fill the area under the line. See [area charts](area.md)
+| `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. This option is ignored if monotone cubic interpolation is used.
| `pointBackgroundColor` | `Color/Color[]` | The fill color for points.
| `pointBorderColor` | `Color/Color[]` | The border color for points.
| `pointHoverBorderWidth` | `Number/Number[]` | Border width of point when hovered.
| `pointHoverRadius` | `Number/Number[]` | The radius of the point when hovered.
| `showLine` | `Boolean` | If false, the line is not drawn for this dataset.
-| `spanGaps` | `Boolean` | 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
+| `spanGaps` | `Boolean` | 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.
| `steppedLine` | `Boolean/String` | If the line is shown as a stepped line. [more...](#stepped-line)
### cubicInterpolationMode
-The following interpolation modes are supported:
+The following interpolation modes are supported.
* 'default'
-* 'monotone'.
+* 'monotone'
The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.
If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
### Stepped Line
-The following values are supported for `steppedLine`:
+The following values are supported for `steppedLine`.
* `false`: No Step Interpolation (default)
* `true`: Step-before Interpolation (eq. 'before')
* `'before'`: Step-before Interpolation
| Name | Type | Description
| ---- | ---- | -----------
-| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
-| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
+| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
+| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
| `borderWidth` | `Number[]` | The border width of the arcs in the dataset.
| `hoverBackgroundColor` | `Color[]` | The fill colour of the arcs when hovered.
| `hoverBorderColor` | `Color[]` | The stroke colour of the arcs when hovered.
| Name | Type | Description
| ---- | ---- | -----------
| `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)
+| `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)
+| `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.
# Animations
-Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes
+Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
## Animation Configuration
## Point Configuration
Point elements are used to represent the points in a line chart or a bubble chart.
-Global point options: `Chart.defaults.global.elements.point`
+Global point options: `Chart.defaults.global.elements.point`.
| Name | Type | Default | Description
| -----| ---- | --------| -----------
## Line Configuration
Line elements are used to represent the line in a line chart.
-Global line options: `Chart.defaults.global.elements.line`
+Global line options: `Chart.defaults.global.elements.line`.
| Name | Type | Default | Description
| -----| ---- | --------| -----------
| `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)).
+| `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).
## Rectangle Configuration
Rectangle elements are used to represent the bars in a bar chart.
-Global rectangle options: `Chart.defaults.global.elements.rectangle`
+Global rectangle options: `Chart.defaults.global.elements.rectangle`.
| Name | Type | Default | Description
| -----| ---- | --------| -----------
| Name | Type | Default | Description
| -----| ---- | --------| -----------
-| `display` | `Boolean` | `true` | is the legend shown
+| `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
+| `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.
| 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
-| `fontColor` | `Color` | `'#666'` | Color 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.
```
Note that legendCallback is not called automatically and you must call `generateLegend()` yourself in code when creating a legend using this method.
-
-
| Name | Type | Default | Description
| -----| ---- | --------| -----------
-| `display` | `Boolean` | `false` | is the title shown
+| `display` | `Boolean` | `false` | Is the title shown?
| `position` | `String` | `'top'` | Position of title. [more...](#position)
-| `fontSize` | `Number` | `12` | Font size
+| `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
+| `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))
+| `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.
### Position
| Name | Type | Default | Description
| -----| ---- | --------| -----------
-| `enabled` | `Boolean` | `true` | Are on-canvas tooltips enabled
+| `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.
+| `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)
+| `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
+| `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
-| `bodyFontColor` | `Color` | `'#fff'` | Body font color
+| `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
-| `footerFontColor` | `Color` | `'#fff'` | Footer font color
+| `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.
| `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
+| `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.
### Position Modes
Possible modes are:
### Sort Callback
-Allows sorting of [tooltip items](#tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). This function can also accept a third parameter that is the data object passed to the chart.
+Allows sorting of [tooltip items](#tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). This function can also accept a third parameter that is the data object passed to the chart.
### Filter 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, data` | Returns text to render after an individual label.
-| `afterBody` | `Array[tooltipItem], data` | Returns text to render after the body section
+| `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
+| `afterFooter` | `Array[tooltipItem], data` | Text to render after the footer section.
### Label Callback
## .getDatasetAtEvent(e)
-Looks for the element under the event point, then returns all elements from that dataset. This is used internally for 'dataset' mode highlighting
+Looks for the element under the event point, then returns all elements from that dataset. This is used internally for 'dataset' mode highlighting.
```javascript
myLineChart.getDatasetAtEvent(e);
}
```
-The following methods may optionally be overridden by derived dataset controllers
+The following methods may optionally be overridden by derived dataset controllers.
```javascript
{
// Initializes the controller
# Colors
-When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0, 0, 0, 0.1)'`
+When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0, 0, 0, 0.1)'`.
You can also pass a [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.
| `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.
\ No newline at end of file
+| `animationDuration` | `Number` | `400` | Duration in milliseconds it takes to animate hover style changes.
| ---- | ---- | ------- | -----------
| `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
+| `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
+For example, to have the chart only respond to click events, you could do:
```javascript
var chart = new Chart(ctx, {
type: 'line',
Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.
## label (deprecated)
-See `'index'` mode
+See `'index'` mode.
## index
Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
```
## x
-Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts
+Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
```javascript
var chart = new Chart(ctx, {
projects / thirdparty / Chart.js.git / commitdiff
