| commit | author | age | ||
| 83c3f6 | 1 | # Elements |
| SP | 2 | |
| 3 | While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[rectangles](#rectangle-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset. | |
| 4 | ||
| 5 | ## Global Configuration | |
| 6 | ||
| 7 | The element options can be specified per chart or globally. The global options for elements are defined in `Chart.defaults.global.elements`. For example, to set the border width of all bar charts globally you would do: | |
| 8 | ||
| 9 | ```javascript | |
| 10 | Chart.defaults.global.elements.rectangle.borderWidth = 2; | |
| 11 | ``` | |
| 12 | ||
| 13 | ## Point Configuration | |
| 14 | Point elements are used to represent the points in a line chart or a bubble chart. | |
| 15 | ||
| 16 | Global point options: `Chart.defaults.global.elements.point` | |
| 17 | ||
| 18 | | Name | Type | Default | Description | |
| 19 | | -----| ---- | --------| ----------- | |
| 20 | | `radius` | `Number` | `3` | Point radius. | |
| 21 | | [`pointStyle`](#point-styles) | `String` | `circle` | Point style. | |
| 22 | | `rotation` | `Number` | `0` | Point rotation (in degrees). | |
| 23 | | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point fill color. | |
| 24 | | `borderWidth` | `Number` | `1` | Point stroke width. | |
| 25 | | `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point stroke color. | |
| 26 | | `hitRadius` | `Number` | `1` | Extra radius added to point radius for hit detection. | |
| 27 | | `hoverRadius` | `Number` | `4` | Point radius when hovered. | |
| 28 | | `hoverBorderWidth` | `Number` | `1` | Stroke width when hovered. | |
| 29 | ||
| 30 | ### Point Styles | |
| 31 | ||
| 32 | The following values are supported: | |
| 33 | - `'circle'` | |
| 34 | - `'cross'` | |
| 35 | - `'crossRot'` | |
| 36 | - `'dash'` | |
| 37 | - `'line'` | |
| 38 | - `'rect'` | |
| 39 | - `'rectRounded'` | |
| 40 | - `'rectRot'` | |
| 41 | - `'star'` | |
| 42 | - `'triangle'` | |
| 43 | ||
| 44 | If the value is an image, that image is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage). | |
| 45 | ||
| 46 | ## Line Configuration | |
| 47 | Line elements are used to represent the line in a line chart. | |
| 48 | ||
| 49 | Global line options: `Chart.defaults.global.elements.line` | |
| 50 | ||
| 51 | | Name | Type | Default | Description | |
| 52 | | -----| ---- | --------| ----------- | |
| 53 | | `tension` | `Number` | `0.4` | Bézier curve tension (`0` for no Bézier curves). | |
| 54 | | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line fill color. | |
| 55 | | `borderWidth` | `Number` | `3` | Line stroke width. | |
| 56 | | `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line stroke color. | |
| 57 | | `borderCapStyle` | `String` | `'butt'` | Line cap style (see [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap)). | |
| 58 | | `borderDash` | `Array` | `[]` | Line dash (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)). | |
| 59 | | `borderDashOffset` | `Number` | `0` | Line dash offset (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)). | |
| 60 | | `borderJoinStyle` | `String` | `'miter` | Line join style (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)). | |
| 61 | | `capBezierPoints` | `Boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction. | |
| 62 | | `fill` | `Boolean/String` | `true` | Fill location: `'zero'`, `'top'`, `'bottom'`, `true` (eq. `'zero'`) or `false` (no fill). | |
| 63 | | `stepped` | `Boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored). | |
| 64 | ||
| 65 | ## Rectangle Configuration | |
| 66 | Rectangle elements are used to represent the bars in a bar chart. | |
| 67 | ||
| 68 | Global rectangle options: `Chart.defaults.global.elements.rectangle` | |
| 69 | ||
| 70 | | Name | Type | Default | Description | |
| 71 | | -----| ---- | --------| ----------- | |
| 72 | | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar fill color. | |
| 73 | | `borderWidth` | `Number` | `0` | Bar stroke width. | |
| 74 | | `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar stroke color. | |
| 75 | | `borderSkipped` | `String` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`. | |
| 76 | ||
| 77 | ## Arc Configuration | |
| 78 | Arcs are used in the polar area, doughnut and pie charts. | |
| 79 | ||
| 80 | Global arc options: `Chart.defaults.global.elements.arc`. | |
| 81 | ||
| 82 | | Name | Type | Default | Description | |
| 83 | | -----| ---- | --------| ----------- | |
| 84 | | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Arc fill color. | |
| 85 | | `borderColor` | `Color` | `'#fff'` | Arc stroke color. | |
| 86 | | `borderWidth`| `Number` | `2` | Arc stroke width. | |
