archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Update getting started docs

Browse Source
This commit is contained in:
Evert Timberg 2015-11-29 10:04:46 -05:00
parent f0555af8cc
commit c4b30a7b0e
1 changed files with 53 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
docs/00-Getting-Started.md
View File

@ -34,7 +34,7 @@ bower install Chart.js --save
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
@ -93,17 +93,17 @@ The global options are defined in `Chart.defaults.global`.
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`.
@ -111,8 +111,8 @@ Name | Type | Default | Description
--- |:---:| --- | ---
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" |
@ -120,13 +120,13 @@ Label | | | There are three labels you can control. `title`, `body`, `footer` th
\*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" |
| | |
@ -136,25 +136,26 @@ xLabel | String or Array[Strings] | | This is the xDataValue for each item to be
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 |
@ -163,31 +164,31 @@ The global options for elements are defined in `Chart.defaults.global.elements`.
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: