diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md index 5fe292784..cd0970bd4 100644 --- a/docs/00-Getting-Started.md +++ b/docs/00-Getting-Started.md @@ -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: