npm install Chart.js --save
```
-https://cdnjs.com/libraries/chart.js
+https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js
###Creating a Chart
Name | Type | Default | Description
--- | --- | --- | ---
-responsive | Boolean | true | Resizes when the browser window does.
+responsive | Boolean | true | Resizes when the canvas container does.
responsiveAnimationDuration | Number | 0 | Duration in milliseconds it takes to animate to new size after a resize event.
-maintainAspectRatio | Boolean | true |
-events | Array[String] | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` |
+maintainAspectRatio | Boolean | true | Maintain the original canvas aspect ratio `(width / height)` when resizing
+events | Array[String] | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` | Events that the chart should listen to for tooltips and hovering
hover |-|-|-
-*hover*.onHover | Function | null |
-*hover*.mode | String | 'single' |
-*hover*.animationDuration | Number | 400 |
-onClick | Function | null |
+*hover*.onHover | Function | null | Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars, points, etc)
+*hover*.mode | String | 'single' | Sets which elements hover. Acceptable options are `'single'`, `'label'`, or `'dataset'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value. `dataset` highlights the closest dataset.
+*hover*.animationDuration | Number | 400 | Duration in milliseconds it takes to animate hover style changes
+onClick | Function | null | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed an array of active elements
defaultColor | Color | 'rgba(0,0,0,0.1)' |
-legendCallback | Function | ` function (chart) { // the chart object to generate a legend from. }` |
+legendCallback | Function | ` function (chart) { // the chart object to generate a legend from. }` | Function to generate a legend. Default implementation returns an HTML string.
The global options for tooltips are defined in `Chart.defaults.global.tooltips`.
--- |:---:| --- | ---
enabled | Boolean | true |
custom | | null |
-mode | String | 'single' |
-backgroundColor | Color | 'rgba(0,0,0,0.8)' |
+mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'` or `'label'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value.
+backgroundColor | Color | 'rgba(0,0,0,0.8)' | Background color of the tooltip
| | |
Label | | | There are three labels you can control. `title`, `body`, `footer` the star (\*) represents one of these three. *(i.e. titleFontFamily, footerSpacing)*
\*FontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
\*FontStyle | String | title - "bold", body - "normal", footer - "bold" |
\*Spacing | Number | 2 |
\*Color | Color | "#fff" |
-\*Align | String | "left" |
-titleMarginBottom | Number | 6 |
-footerMarginTop | Number | 6 |
-xPadding | Number | 6 |
-yPadding | Number | 6 |
-caretSize | Number | 5 |
-cornerRadius | Number | 6 |
+\*Align | String | "left" | text alignment. See [MDN Canvas Documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign)
+titleMarginBottom | Number | 6 | Margin to add on bottom of title section
+footerMarginTop | Number | 6 | Margin to add before drawing the footer
+xPadding | Number | 6 | Padding to add on top and bottom of tooltip
+yPadding | Number | 6 | Padding to add on left and right of tooltip
+caretSize | Number | 5 | Size, in px, of the tooltip arrow
+cornerRadius | Number | 6 | Radius of tooltip corner curves
xOffset | Number | 10 |
multiKeyBackground | Color | "#fff" |
| | |
yLabel | String or Array[Strings] | | This is the yDataValue for each item to be displayed in the tooltip
index | Number | | Data index.
data | Object | | Data object passed to chart.
+`return`| String or Array[Strings] | | All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
| | |
-*callbacks*.beforeTitle | Function | none |
-*callbacks*.title | Function | `function(tooltipItems, data) { //Pick first xLabel }` |
-*callbacks*.afterTitle | Function | none |
-*callbacks*.beforeBody | Function | none |
-*callbacks*.beforeLabel | Function | none |
-*callbacks*.label | Function | `function(tooltipItem, data) { // Returns "datasetLabel: tooltipItem.yLabel" }` |
-*callbacks*.afterLabel | Function | none |
-*callbacks*.afterBody | Function | none |
-*callbacks*.beforeFooter | Function | none |
-*callbacks*.footer | Function | none |
-*callbacks*.afterFooter | Function | none |
+*callbacks*.beforeTitle | Function | none | Text to render before the title
+*callbacks*.title | Function | `function(tooltipItems, data) { //Pick first xLabel }` | Text to render as the title
+*callbacks*.afterTitle | Function | none | Text to render after the ttiel
+*callbacks*.beforeBody | Function | none | Text to render before the body section
+*callbacks*.beforeLabel | Function | none | Text to render before an individual label
+*callbacks*.label | Function | `function(tooltipItem, data) { // Returns "datasetLabel: tooltipItem.yLabel" }` | Text to render as label
+*callbacks*.afterLabel | Function | none | Text to render after an individual label
+*callbacks*.afterBody | Function | none | Text to render after the body section
+*callbacks*.beforeFooter | Function | none | Text to render before the footer section
+*callbacks*.footer | Function | none | Text to render as the footer
+*callbacks*.afterFooter | Function | none | Text to render after the footer section
The global options for animations are defined in `Chart.defaults.global.animation`.
Name | Type | Default | Description
--- |:---:| --- | ---
duration | Number | 1000 | The number of milliseconds an animation takes.
-easing | String | "easyOutQuart" |
+easing | String | "easeOutQuart" | Easing function to use.
onProgress | Function | none |
onComplete | Function |none |
Name | Type | Default | Description
--- |:---:| --- | ---
arc | - | - | -
-*arc*.backgroundColor | Color | `Chart.defaults.global.defaultColor` |
-*arc*.borderColor | Color | "#fff" |
-*arc*.borderWidth | Number | 2 |
+*arc*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default fill color for arcs
+*arc*.borderColor | Color | "#fff" | Default stroke color for arcs
+*arc*.borderWidth | Number | 2 | Default stroke width for arcs
line | - | - | -
-*line*.tension | Number | 0.4 |
-*line*.backgroundColor | Color | `Chart.defaults.global.defaultColor` |
-*line*.borderWidth | Number | 3 |
-*line*.borderColor | Color | `Chart.defaults.global.defaultColor` |
-*line*.borderCapStyle | String | 'butt' |
-*line*.borderDash | Array | [] |
-*line*.borderDashOffset | Number | 0.0 |
-*line*.borderJoinStyle | String | 'miter' |
-*line*.fill | Boolean | true |
+*line*.tension | Number | 0.4 | Default bezier curve tension. Set to `0` for no bezier curves.
+*line*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default line fill color
+*line*.borderWidth | Number | 3 | Default line stroke width
+*line*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default line stroke color
+*line*.borderCapStyle | String | 'butt' | Default line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap)
+*line*.borderDash | Array | `[]` | Default line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
+*line*.borderDashOffset | Number | 0.0 | Default line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
+*line*.borderJoinStyle | String | 'miter' | Default line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
+*line*.fill | Boolean | true |
point | - | - | -
-*point*.radius | Number | 3 |
-*point*.backgroundColor | Color | `Chart.defaults.global.defaultColor` |
-*point*.borderWidth | Number | 1 |
-*point*.borderColor | Color | `Chart.defaults.global.defaultColor` |
-*point*.hitRadius | Number | 1 |
-*point*.hoverRadius | Number | 4 |
-*point*.hoverBorderWidth | Number | 1 |
+*point*.radius | Number | 3 | Default point radius
+*point*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default point fill color
+*point*.borderWidth | Number | 1 | Default point stroke width
+*point*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default point stroke color
+*point*.hitRadius | Number | 1 | Extra radius added to point radius for hit detection
+*point*.hoverRadius | Number | 4 | Default point radius when hovered
+*point*.hoverBorderWidth | Number | 1 | Default stroke width when hovered
rectangle | - | - | -
-*rectangle*.backgroundColor | Color | `Chart.defaults.global.defaultColor` |
-*rectangle*.borderWidth | Number | 0 |
-*rectangle*.borderColor | Color | `Chart.defaults.global.defaultColor` |
+*rectangle*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default bar fill color
+*rectangle*.borderWidth | Number | 0 | Default bar stroke width
+*rectangle*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default bar stroke color
If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:
projects / thirdparty / Chart.js.git / commitdiff
