From 1902d880c3534329ce786bcc0b1b9060c3f78ad0 Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Mon, 28 Jan 2019 17:38:54 +0800 Subject: [PATCH 1/6] Fix typos and minor doc issues --- docs/README.md | 6 +-- docs/axes/README.md | 2 +- docs/axes/cartesian/README.md | 4 +- docs/axes/cartesian/category.md | 10 ++-- docs/axes/cartesian/linear.md | 6 +-- docs/axes/cartesian/logarithmic.md | 4 +- docs/axes/cartesian/time.md | 68 ++++++++++++++-------------- docs/axes/labelling.md | 2 +- docs/axes/radial/README.md | 2 +- docs/axes/radial/linear.md | 8 ++-- docs/axes/styling.md | 14 +++--- docs/charts/area.md | 4 +- docs/charts/bar.md | 4 +- docs/charts/bubble.md | 4 +- docs/charts/doughnut.md | 4 +- docs/charts/line.md | 54 +++++++++++----------- docs/charts/mixed.md | 30 ++++++------ docs/charts/polar.md | 2 +- docs/charts/radar.md | 24 +++++----- docs/charts/scatter.md | 2 +- docs/configuration/README.md | 4 +- docs/configuration/animations.md | 5 +- docs/configuration/elements.md | 19 ++++---- docs/configuration/layout.md | 4 +- docs/configuration/legend.md | 16 +++---- docs/configuration/title.md | 4 +- docs/configuration/tooltip.md | 47 ++++++++++--------- docs/developers/api.md | 12 ++--- docs/developers/axes.md | 23 ++++++---- docs/developers/charts.md | 6 +-- docs/developers/contributing.md | 2 +- docs/developers/plugins.md | 54 +++++++++++----------- docs/developers/updates.md | 6 +-- docs/general/accessibility.md | 2 +- docs/general/colors.md | 8 ++-- docs/general/interactions/events.md | 4 +- docs/general/interactions/modes.md | 18 ++++---- docs/general/responsive.md | 6 +-- docs/getting-started/README.md | 10 ++-- docs/getting-started/installation.md | 2 +- docs/getting-started/integration.md | 2 +- docs/getting-started/usage.md | 16 +++---- docs/notes/README.md | 2 +- docs/notes/comparison.md | 1 - docs/notes/extensions.md | 2 +- docs/notes/license.md | 2 +- 46 files changed, 270 insertions(+), 261 deletions(-) diff --git a/docs/README.md b/docs/README.md index fe0b60c5342..c035b1431ce 100644 --- a/docs/README.md +++ b/docs/README.md @@ -14,11 +14,11 @@ In this example, we create a bar chart for a single dataset and render that in o ```html + ``` Now, we can create a chart. We add a script to our page: @@ -24,12 +24,12 @@ var chart = new Chart(ctx, { // The data for our dataset data: { - labels: ["January", "February", "March", "April", "May", "June", "July"], + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ - label: "My First dataset", + label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', - data: [0, 10, 5, 2, 20, 30, 45], + data: [0, 10, 5, 2, 20, 30, 45] }] }, @@ -40,4 +40,4 @@ var chart = new Chart(ctx, { It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more. -There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases). \ No newline at end of file +There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases). diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index ea9daea2350..2f4f0518369 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -54,4 +54,4 @@ Files: * `dist/Chart.bundle.js` * `dist/Chart.bundle.min.js` -The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually. +The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually. diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md index 95ccbc46d0a..d8f59185f4c 100644 --- a/docs/getting-started/integration.md +++ b/docs/getting-started/integration.md @@ -28,7 +28,7 @@ var myChart = new Chart(ctx, {...}); ## Require JS ```javascript -require(['path/to/chartjs/dist/Chart.js'], function(Chart){ +require(['path/to/chartjs/dist/Chart.js'], function(Chart) { var myChart = new Chart(ctx, {...}); }); ``` diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index 739c838596c..fd88da5d2d8 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -11,10 +11,10 @@ To create a chart, we need to instantiate the `Chart` class. To do this, we need ```javascript // Any of the following formats may be used -var ctx = document.getElementById("myChart"); -var ctx = document.getElementById("myChart").getContext("2d"); -var ctx = $("#myChart"); -var ctx = "myChart"; +var ctx = document.getElementById('myChart'); +var ctx = document.getElementById('myChart').getContext('2d'); +var ctx = $('#myChart'); +var ctx = 'myChart'; ``` Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own! @@ -24,11 +24,11 @@ The following example instantiates a bar chart showing the number of votes for d ```html -``` \ No newline at end of file +``` diff --git a/docs/notes/README.md b/docs/notes/README.md index 2795faebc85..94d9a69f2b2 100644 --- a/docs/notes/README.md +++ b/docs/notes/README.md @@ -1 +1 @@ -# Additional Notes \ No newline at end of file +# Additional Notes diff --git a/docs/notes/comparison.md b/docs/notes/comparison.md index 3cb9c99af83..46f6cdd5018 100644 --- a/docs/notes/comparison.md +++ b/docs/notes/comparison.md @@ -29,4 +29,3 @@ Built in Chart Types | Bubble | ✓ | | | | Gauges | | ✓ | | | Maps (Heat/Tree/etc.) | | ✓ | | - diff --git a/docs/notes/extensions.md b/docs/notes/extensions.md index 91d520a8ef5..f8f53f3d564 100644 --- a/docs/notes/extensions.md +++ b/docs/notes/extensions.md @@ -65,6 +65,6 @@ In addition, many plugins can be found on the [npm registry](https://www.npmjs.c ### Ember.js - ember-cli-chart - + ### Omi (v5+) - omi-chart diff --git a/docs/notes/license.md b/docs/notes/license.md index 01a0a1da561..9bc3c679231 100644 --- a/docs/notes/license.md +++ b/docs/notes/license.md @@ -1,3 +1,3 @@ # License -Chart.js is open source and available under the MIT license. \ No newline at end of file +Chart.js is open source and available under the MIT license. From 4a609b490f5abfb66401254f07912d28eee504fc Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Mon, 28 Jan 2019 23:50:50 +0800 Subject: [PATCH 2/6] Add more fixes in docs --- docs/README.md | 2 +- docs/axes/cartesian/category.md | 2 +- docs/axes/cartesian/time.md | 17 +++++++++-------- docs/axes/radial/linear.md | 6 +++--- docs/axes/styling.md | 4 ++-- docs/charts/bubble.md | 2 +- docs/charts/doughnut.md | 6 +++--- docs/configuration/layout.md | 4 ++-- docs/configuration/legend.md | 6 ++++-- docs/configuration/tooltip.md | 2 +- docs/developers/api.md | 2 +- docs/developers/updates.md | 6 +++--- docs/general/accessibility.md | 2 +- docs/general/colors.md | 2 +- docs/general/device-pixel-ratio.md | 2 +- docs/general/interactions/README.md | 2 +- docs/general/responsive.md | 2 +- docs/getting-started/installation.md | 2 +- docs/getting-started/integration.md | 2 +- docs/getting-started/usage.md | 2 +- 20 files changed, 39 insertions(+), 36 deletions(-) diff --git a/docs/README.md b/docs/README.md index c035b1431ce..d0b0544ab0c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -31,7 +31,7 @@ var myChart = new Chart(ctx, { 'rgba(255, 159, 64, 0.2)' ], borderColor: [ - 'rgba(255,99,132,1)', + 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md index e47c34ed482..d4725578214 100644 --- a/docs/axes/cartesian/category.md +++ b/docs/axes/cartesian/category.md @@ -2,7 +2,7 @@ If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes. -Specifying any of the settings above defines the x axis as `type: category` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults. +Specifying any of the settings above defines the x axis as `type: 'category'` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults. ## Category Axis Definition diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md index 261a5534410..c159f72fc4c 100644 --- a/docs/axes/cartesian/time.md +++ b/docs/axes/cartesian/time.md @@ -8,14 +8,15 @@ The time scale is used to display times and dates. When building its ticks, it w The x-axis data points may additionally be specified via the `t` or `x` attribute when using the time scale. - data: [{ - x: new Date(), - y: 1 - }, { - t: new Date(), - y: 10 - }] - +```javascript +data: [{ + x: new Date(), + y: 1 +}, { + t: new Date(), + y: 10 +}] +``` ### Date Formats diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index 87d8bd7caaa..a8c8642d68d 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -20,7 +20,7 @@ The following options are provided by the linear scale. They are all located in | 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. @@ -93,7 +93,7 @@ The following options are used to configure angled lines that radiate from the c | 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. +| `color` | `Color` | `'rgba(0,0,0,0.1)'` | Color of angled lines. | `lineWidth` | `Number` | `1` | Width of angled lines. | `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). | `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). @@ -107,6 +107,6 @@ The following options are used to configure the point labels that are shown on t | `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. | `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)). diff --git a/docs/axes/styling.md b/docs/axes/styling.md index 981fa24afa0..6f4ed7855c8 100644 --- a/docs/axes/styling.md +++ b/docs/axes/styling.md @@ -10,7 +10,7 @@ The grid line configuration is nested under the scale configuration in the `grid | ---- | ---- | ------- | ----------- | `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). -| `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. +| `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.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. @@ -19,7 +19,7 @@ The grid line configuration is nested under the scale configuration in the `grid | `drawTicks` | `Boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart. | `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). +| `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.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. diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md index 87d59083ca0..7d89e094795 100644 --- a/docs/charts/bubble.md +++ b/docs/charts/bubble.md @@ -19,7 +19,7 @@ A bubble chart is used to display three dimensions of data at the same time. The }], "backgroundColor": "rgb(255, 99, 132)" }] - }, + } } {% endchartjs %} diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md index 0aa5daca8f0..ffdf068a60c 100644 --- a/docs/charts/doughnut.md +++ b/docs/charts/doughnut.md @@ -14,7 +14,7 @@ They are also registered under two aliases in the `Chart` core. Other than their "labels": [ "Red", "Blue", - "Yellow", + "Yellow" ], "datasets": [{ "label": "My First Dataset", @@ -22,10 +22,10 @@ They are also registered under two aliases in the `Chart` core. Other than their "backgroundColor": [ "rgb(255, 99, 132)", "rgb(54, 162, 235)", - "rgb(255, 205, 86)", + "rgb(255, 205, 86)" ] }] - }, + } } {% endchartjs %} diff --git a/docs/configuration/layout.md b/docs/configuration/layout.md index b6ce4aeaaaf..856985a3000 100644 --- a/docs/configuration/layout.md +++ b/docs/configuration/layout.md @@ -4,10 +4,10 @@ The layout configuration is passed into the `options.layout` namespace. The glob | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `padding` | `Number` or `Object` | `0` | The padding to add inside the chart. [more...](#padding) +| `padding` | `Number/Object` | `0` | The padding to add inside the chart. [more...](#padding) ## Padding -If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top`, and `bottom` properties can also be specified. +If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified. Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do: diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index 92c9be44d79..9e19d7f2044 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -126,8 +126,10 @@ var newLegendClickHandler = function (e, legendItem) { defaultLegendClickHandler(e, legendItem); } else { let ci = this.chart; - [ci.getDatasetMeta(0), - ci.getDatasetMeta(1)].forEach(function(meta) { + [ + ci.getDatasetMeta(0), + ci.getDatasetMeta(1) + ].forEach(function(meta) { meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; }); ci.update(); diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index a39a38983d1..0807fc8968c 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -5,7 +5,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.global.tooltips`. | Name | Type | Default | Description -| -----| ---- | --------| ----------- +| ---- | ---- | ------- | ----------- | `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). diff --git a/docs/developers/api.md b/docs/developers/api.md index 9611c70fa0e..e248db3a572 100644 --- a/docs/developers/api.md +++ b/docs/developers/api.md @@ -1,6 +1,6 @@ # Chart Prototype Methods -For each chart, there are a set of global prototype methods on the shared `ChartType` which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made. +For each chart, there are a set of global prototype methods on the shared chart type which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made. ```javascript // For example: diff --git a/docs/developers/updates.md b/docs/developers/updates.md index 4b166580709..f515a3a3f64 100644 --- a/docs/developers/updates.md +++ b/docs/developers/updates.md @@ -52,7 +52,7 @@ function updateConfigAsNewObject(chart) { display: true }] } - } + }; chart.update(); } ``` @@ -75,7 +75,7 @@ function updateScales(chart) { display: true, type: 'logarithmic' }] - } + }; chart.update(); // need to update the reference xScale = chart.scales['newId']; @@ -89,7 +89,7 @@ You can also update a specific scale either by specifying its index or id. function updateScale(chart) { chart.options.scales.yAxes[0] = { type: 'logarithmic' - } + }; chart.update(); } ``` diff --git a/docs/general/accessibility.md b/docs/general/accessibility.md index 052b4daed11..fddff7cbe3f 100644 --- a/docs/general/accessibility.md +++ b/docs/general/accessibility.md @@ -2,7 +2,7 @@ Chart.js charts are rendered on user provided `canvas` elements. Thus, it is up to the user to create the `canvas` element in a way that is accessible. The `canvas` element has support in all browsers and will render on screen but the `canvas` content will not be accessible to screen readers. -With `canvas`, the accessibility has to be added with `ARIA` attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tags. +With `canvas`, the accessibility has to be added with ARIA attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tags. This [website](http://pauljadam.com/demos/canvas.html) has a more detailed explanation of `canvas` accessibility as well as in depth examples. diff --git a/docs/general/colors.md b/docs/general/colors.md index 12d700d7d49..8521d01e6d1 100644 --- a/docs/general/colors.md +++ b/docs/general/colors.md @@ -1,6 +1,6 @@ # 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. diff --git a/docs/general/device-pixel-ratio.md b/docs/general/device-pixel-ratio.md index ae82e7a6ef9..1ad7d855309 100644 --- a/docs/general/device-pixel-ratio.md +++ b/docs/general/device-pixel-ratio.md @@ -10,4 +10,4 @@ Setting `devicePixelRatio` to a value other than 1 will force the canvas size to | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `devicePixelRatio` | `Number` | window.devicePixelRatio | Override the window's default devicePixelRatio. +| `devicePixelRatio` | `Number` | `window.devicePixelRatio` | Override the window's default devicePixelRatio. diff --git a/docs/general/interactions/README.md b/docs/general/interactions/README.md index f88c9e41087..09e9717015a 100644 --- a/docs/general/interactions/README.md +++ b/docs/general/interactions/README.md @@ -6,5 +6,5 @@ The hover configuration is passed into the `options.hover` namespace. The global | ---- | ---- | ------- | ----------- | `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. +| `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. diff --git a/docs/general/responsive.md b/docs/general/responsive.md index a732b8fc6c3..f1a3379096e 100644 --- a/docs/general/responsive.md +++ b/docs/general/responsive.md @@ -21,7 +21,7 @@ Chart.js provides a [few options](#configuration-options) to enable responsivene ## Important Note -Detecting when the canvas size changes can not be done directly from the `CANVAS` element. Chart.js uses its parent container to update the canvas *render* and *display* sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only**. Responsiveness can then be achieved by setting relative values for the container size ([example](https://codepen.io/chartjs/pen/YVWZbz)): +Detecting when the canvas size changes can not be done directly from the `canvas` element. Chart.js uses its parent container to update the canvas *render* and *display* sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only**. Responsiveness can then be achieved by setting relative values for the container size ([example](https://codepen.io/chartjs/pen/YVWZbz)): ```html
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 2f4f0518369..783bd13109c 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -40,7 +40,7 @@ If you download or clone the repository, you must [build](../developers/contribu # Selecting the Correct Build -Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`. +Chart.js provides two different builds for you to choose: **Stand-Alone Build**, **Bundled Build**. ## Stand-Alone Build Files: diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md index d8f59185f4c..285bf195b92 100644 --- a/docs/getting-started/integration.md +++ b/docs/getting-started/integration.md @@ -33,4 +33,4 @@ require(['path/to/chartjs/dist/Chart.js'], function(Chart) { }); ``` -> **Important:** RequireJS [can **not** load CommonJS module as is](http://www.requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.). +> **Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.). diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index fd88da5d2d8..0a0d48b9962 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -41,7 +41,7 @@ var myChart = new Chart(ctx, { 'rgba(255, 159, 64, 0.2)' ], borderColor: [ - 'rgba(255,99,132,1)', + 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', From 385f747e50b383525c449d057bc98608bb0d31c9 Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Tue, 29 Jan 2019 00:43:28 +0800 Subject: [PATCH 3/6] Covert primitive data types to lower case --- docs/axes/README.md | 6 +- docs/axes/cartesian/README.md | 28 ++--- docs/axes/cartesian/category.md | 6 +- docs/axes/cartesian/linear.md | 16 +-- docs/axes/cartesian/logarithmic.md | 4 +- docs/axes/cartesian/time.md | 22 ++-- docs/axes/labelling.md | 14 +-- docs/axes/radial/linear.md | 48 ++++---- docs/axes/styling.md | 66 +++++----- docs/charts/area.md | 12 +- docs/charts/bar.md | 28 ++--- docs/charts/bubble.md | 24 ++-- docs/charts/doughnut.md | 18 +-- docs/charts/line.md | 48 ++++---- docs/charts/polar.md | 14 +-- docs/charts/radar.md | 30 ++--- docs/configuration/animations.md | 20 ++-- docs/configuration/elements.md | 40 +++---- docs/configuration/layout.md | 2 +- docs/configuration/legend.md | 46 +++---- docs/configuration/title.md | 16 +-- docs/configuration/tooltip.md | 180 ++++++++++++++-------------- docs/developers/axes.md | 30 ++--- docs/general/device-pixel-ratio.md | 2 +- docs/general/fonts.md | 6 +- docs/general/interactions/README.md | 8 +- docs/general/interactions/events.md | 6 +- docs/general/responsive.md | 10 +- 28 files changed, 375 insertions(+), 375 deletions(-) diff --git a/docs/axes/README.md b/docs/axes/README.md index 41384b93d25..b2a8371c2c3 100644 --- a/docs/axes/README.md +++ b/docs/axes/README.md @@ -16,9 +16,9 @@ The following properties are common to all axes provided by Chart.js. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `display` | `Boolean/String` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible. -| `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks) -| `weight` | `Number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area. +| `display` | `boolean/string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible. +| `callbacks` | `object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks) +| `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area. ## Callbacks There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process. diff --git a/docs/axes/cartesian/README.md b/docs/axes/cartesian/README.md index 1858a0bb8f5..8caf0004302 100644 --- a/docs/axes/cartesian/README.md +++ b/docs/axes/cartesian/README.md @@ -13,26 +13,26 @@ All of the included cartesian axes support a number of common options. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `type` | `String` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart. -| `position` | `String` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'` -| `offset` | `Boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` for a category scale in a bar chart by default. -| `id` | `String` | | The ID is used to link datasets and scale axes together. [more...](#axis-id) -| `gridLines` | `Object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration) -| `scaleLabel` | `Object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration) -| `ticks` | `Object` | | Tick configuration. [more...](#tick-configuration) +| `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart. +| `position` | `string` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'` +| `offset` | `boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` for a category scale in a bar chart by default. +| `id` | `string` | | The ID is used to link datasets and scale axes together. [more...](#axis-id) +| `gridLines` | `object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration) +| `scaleLabel` | `object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration) +| `ticks` | `object` | | Tick configuration. [more...](#tick-configuration) ## Tick Configuration The following options are common to all cartesian axes but do not apply to other axes. | 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. -| `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 x direction for the x axis, and the y 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.* -| `minRotation` | `Number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.* -| `mirror` | `Boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.* -| `padding` | `Number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction. +| `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 x direction for the x axis, and the y 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.* +| `minRotation` | `number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.* +| `mirror` | `boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.* +| `padding` | `number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction. ## Axis ID The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used. diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md index d4725578214..690b712f5c3 100644 --- a/docs/axes/cartesian/category.md +++ b/docs/axes/cartesian/category.md @@ -40,9 +40,9 @@ The category scale provides the following options for configuring tick marks. Th | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `labels` | `String[]` | - | An array of labels to display. -| `min` | `String` | | The minimum item to display. [more...](#min-max-configuration) -| `max` | `String` | | The maximum item to display. [more...](#min-max-configuration) +| `labels` | `string[]` | - | An array of labels to display. +| `min` | `string` | | The minimum item to display. [more...](#min-max-configuration) +| `max` | `string` | | The maximum item to display. [more...](#min-max-configuration) ## Min Max Configuration For both the `min` and `max` properties, the value must be in the `labels` array. In the example below, the x axis would only display "March" through "June". diff --git a/docs/axes/cartesian/linear.md b/docs/axes/cartesian/linear.md index 314653cd697..ad82c552a95 100644 --- a/docs/axes/cartesian/linear.md +++ b/docs/axes/cartesian/linear.md @@ -8,14 +8,14 @@ The following options are provided by the linear scale. They are all located in | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `beginAtZero` | `Boolean` | | if true, scale will include 0 if it is not already included. -| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings) -| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings) -| `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show. -| `precision` | `Number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. -| `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) +| `beginAtZero` | `boolean` | | if true, scale will include 0 if it is not already included. +| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings) +| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings) +| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show. +| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. +| `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) ## Axis Range Settings diff --git a/docs/axes/cartesian/logarithmic.md b/docs/axes/cartesian/logarithmic.md index f17c6ab2dd7..4878f6bee7f 100644 --- a/docs/axes/cartesian/logarithmic.md +++ b/docs/axes/cartesian/logarithmic.md @@ -8,5 +8,5 @@ The following options are provided by the logarithmic scale. They are all locate | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. -| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. +| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. +| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md index c159f72fc4c..66f7e8be83e 100644 --- a/docs/axes/cartesian/time.md +++ b/docs/axes/cartesian/time.md @@ -28,19 +28,19 @@ The following options are provided by the time scale. You may also set options p | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `distribution` | `String` | `'linear'` | How data is plotted. [more...](#scale-distribution) -| `bounds` | `String` | `'data'` | Determines the scale bounds. [more...](#scale-bounds) -| `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. +| `distribution` | `string` | `'linear'` | How data is plotted. [more...](#scale-distribution) +| `bounds` | `string` | `'data'` | Determines the scale bounds. [more...](#scale-bounds) +| `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.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. -| `time.unit` | `String` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details. -| `time.stepSize` | `Number` | `1` | The number of units between grid lines. -| `time.minUnit` | `String` | `'millisecond'` | The minimum display format to be used for a time unit. +| `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. +| `time.unit` | `string` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details. +| `time.stepSize` | `number` | `1` | The number of units between grid lines. +| `time.minUnit` | `string` | `'millisecond'` | The minimum display format to be used for a time unit. ### Time Units diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md index e212affe1f9..54a2964c891 100644 --- a/docs/axes/labelling.md +++ b/docs/axes/labelling.md @@ -8,14 +8,14 @@ The scale label configuration is nested under the scale configuration in the `sc | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `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)). +| `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)). | `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. -| `fontStyle` | `String` | `'normal'` | Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `padding` | `Number/Object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented. +| `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. +| `fontStyle` | `string` | `'normal'` | Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). +| `padding` | `number/object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented. ## Creating Custom Tick Formats diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index a8c8642d68d..bbd4e36b149 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -10,10 +10,10 @@ The axis has configuration properties for ticks, angle lines (line that appear i | Name | Type | Description | ---- | ---- | ----------- -| `angleLines` | `Object` | Angle line configuration. [more...](#angle-line-options) -| `gridLines` | `Object` | Grid line configuration. [more...](../styling.md#grid-line-configuration) -| `pointLabels` | `Object` | Point label configuration. [more...](#point-label-options) -| `ticks` | `Object` | Tick configuration. [more...](#tick-options) +| `angleLines` | `object` | Angle line configuration. [more...](#angle-line-options) +| `gridLines` | `object` | Grid line configuration. [more...](../styling.md#grid-line-configuration) +| `pointLabels` | `object` | Point label configuration. [more...](#point-label-options) +| `ticks` | `object` | Tick configuration. [more...](#tick-options) ## Tick Options The following options are provided by the linear scale. They are all located in the `ticks` sub options. The [common tick configuration](../styling.md#tick-configuration) options are supported by this axis. @@ -21,17 +21,17 @@ The following options are provided by the linear scale. They are all located in | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `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. -| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings) -| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings) -| `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show. -| `precision` | `Number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. -| `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. +| `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. +| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings) +| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings) +| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show. +| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. +| `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. ## Axis Range Settings @@ -92,11 +92,11 @@ The following options are used to configure angled lines that radiate from the c | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `display` | `Boolean` | `true` | if true, angle lines are shown. +| `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. -| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). -| `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). +| `lineWidth` | `number` | `1` | Width of angled lines. +| `borderDash` | `number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). ## Point Label Options @@ -104,9 +104,9 @@ The following options are used to configure the point labels that are shown on t | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string. +| `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. -| `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels. -| `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)). +| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels. +| `fontSize` | `number` | `10` | font size in pixels. +| `fontStyle` | `string` | `'normal'` | Font style to use when rendering point labels. +| `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)). diff --git a/docs/axes/styling.md b/docs/axes/styling.md index 6f4ed7855c8..a5fb5a979b0 100644 --- a/docs/axes/styling.md +++ b/docs/axes/styling.md @@ -8,59 +8,59 @@ The grid line configuration is nested under the scale configuration in the `grid | 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). +| `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). | `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.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. -| `drawTicks` | `Boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart. -| `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). +| `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.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. +| `drawTicks` | `boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart. +| `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.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. +| `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.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 The tick configuration is nested under the scale configuration in the `ticks` key. It defines options for the tick marks that are generated by the axis. | 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. +| `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. | `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. -| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `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)). -| `reverse` | `Boolean` | `false` | Reverses order of tick labels. -| `minor` | `Object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above. -| `major` | `Object` | `{}` | Major ticks configuration. Omitted options are inherited from options above. -| `padding` | `Number` | `0` | Sets the offset of the tick labels from the axis +| `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. +| `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). +| `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)). +| `reverse` | `boolean` | `false` | Reverses order of tick labels. +| `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above. +| `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above. +| `padding` | `number` | `0` | Sets the offset of the tick labels from the axis ## Minor Tick Configuration The minorTick configuration is nested under the ticks configuration in the `minor` key. It defines options for the minor tick marks that are generated by the axis. Omitted options are inherited from `ticks` 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). +| `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). | `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. -| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `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)). +| `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. +| `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). +| `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)). ## Major Tick Configuration The majorTick configuration is nested under the ticks configuration in the `major` key. It defines options for the major tick marks that are generated by the axis. Omitted options are inherited from `ticks` 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). +| `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). | `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. -| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `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)). +| `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. +| `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). +| `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)). diff --git a/docs/charts/area.md b/docs/charts/area.md index c76e89118da..ff7e278a718 100644 --- a/docs/charts/area.md +++ b/docs/charts/area.md @@ -8,10 +8,10 @@ Both [line](line.md) and [radar](radar.md) charts support a `fill` option on the | Mode | Type | Values | | :--- | :--- | :--- | -| Absolute dataset index 1 | `Number` | `1`, `2`, `3`, ... | -| Relative dataset index 1 | `String` | `'-1'`, `'-2'`, `'+1'`, ... | -| Boundary 2 | `String` | `'start'`, `'end'`, `'origin'` | -| Disabled 3 | `Boolean` | `false` | +| Absolute dataset index 1 | `number` | `1`, `2`, `3`, ... | +| Relative dataset index 1 | `string` | `'-1'`, `'-2'`, `'+1'`, ... | +| Boundary 2 | `string` | `'start'`, `'end'`, `'origin'` | +| Disabled 3 | `boolean` | `false` | > 1 dataset filling modes have been introduced in version 2.6.0
> 2 prior version 2.6.0, boundary values was `'zero'`, `'top'`, `'bottom'` (deprecated)
@@ -35,10 +35,10 @@ new Chart(ctx, { ## 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`) +A boolean value (default: `true`) If `true`, the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets: diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 6f6aff611f9..25e8b466075 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -70,15 +70,15 @@ the color of the bars is generally set this way. | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`borderSkipped`](#borderskipped) | `String` | Yes | Yes | `'bottom'` -| [`borderWidth`](#styling) | `Number` | Yes | Yes | `0` -| [`data`](#data-structure) | `Object[]` | - | - | **required** +| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'` +| [`borderWidth`](#styling) | `number` | Yes | Yes | `0` +| [`data`](#data-structure) | `object[]` | - | - | **required** | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined` -| [`hoverBorderWidth`](#interactions) | `Number` | - | Yes | `1` -| [`label`](#general) | `String` | - | - | `''` -| [`xAxisID`](#general) | `String` | - | - | first x axis -| [`yAxisID`](#general) | `String` | - | - | first y axis +| [`hoverBorderWidth`](#interactions) | `number` | - | Yes | `1` +| [`label`](#general) | `string` | - | - | `''` +| [`xAxisID`](#general) | `string` | - | - | first x axis +| [`yAxisID`](#general) | `string` | - | - | first y axis ### General @@ -130,12 +130,12 @@ The bar chart accepts the following configuration from the associated `scale` op | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage) -| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage) -| `barThickness` | `Number/String` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness) -| `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this. -| `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels. -| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines) +| `barPercentage` | `number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage) +| `categoryPercentage` | `number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage) +| `barThickness` | `number/string` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness) +| `maxBarThickness` | `number` | | Set this to ensure that bars are not sized thicker than this. +| `minBarLength` | `number` | | Set this to ensure that bars have a minimum length in pixels. +| `gridLines.offsetGridLines` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines) ### Example Usage @@ -233,7 +233,7 @@ The following dataset properties are specific to stacked bar charts. | 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. diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md index 7d89e094795..67a00dd4af1 100644 --- a/docs/charts/bubble.md +++ b/docs/charts/bubble.md @@ -42,17 +42,17 @@ The bubble chart allows a number of properties to be specified for each dataset. | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`borderWidth`](#styling) | `Number` | Yes | Yes | `3` -| [`data`](#data-structure) | `Object[]` | - | - | **required** +| [`borderWidth`](#styling) | `number` | Yes | Yes | `3` +| [`data`](#data-structure) | `object[]` | - | - | **required** | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` -| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `1` -| [`hoverRadius`](#interactions) | `Number` | Yes | Yes | `4` -| [`hitRadius`](#interactions) | `Number` | Yes | Yes | `1` -| [`label`](#labeling) | `String` | - | - | `undefined` -| [`pointStyle`](#styling) | `String` | Yes | Yes | `'circle'` -| [`rotation`](#styling) | `Number` | Yes | Yes | `0` -| [`radius`](#styling) | `Number` | Yes | Yes | `3` +| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1` +| [`hoverRadius`](#interactions) | `number` | Yes | Yes | `4` +| [`hitRadius`](#interactions) | `number` | Yes | Yes | `1` +| [`label`](#labeling) | `string` | - | - | `undefined` +| [`pointStyle`](#styling) | `string` | Yes | Yes | `'circle'` +| [`rotation`](#styling) | `number` | Yes | Yes | `0` +| [`radius`](#styling) | `number` | Yes | Yes | `3` ### Labeling @@ -98,13 +98,13 @@ Bubble chart datasets need to contain a `data` array of points, each points repr ```javascript { // X Value - x: , + x: number, // Y Value - y: , + y: number, // Bubble radius in pixels (not scaled). - r: + r: number } ``` diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md index ffdf068a60c..9f8e7f8a953 100644 --- a/docs/charts/doughnut.md +++ b/docs/charts/doughnut.md @@ -56,13 +56,13 @@ The doughnut/pie chart allows a number of properties to be specified for each da | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`borderAlign`](#border-alignment) | `String` | Yes | Yes | `'center'` +| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` -| [`borderWidth`](#styling) | `Number` | Yes | Yes | `2` -| [`data`](#data-structure) | `Number[]` | - | - | **required** +| [`borderWidth`](#styling) | `number` | Yes | Yes | `2` +| [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` -| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined` +| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` ### Styling @@ -102,11 +102,11 @@ These are the customisation options specific to Pie & Doughnut charts. These opt | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `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. -| `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. +| `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. +| `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. ## Default Options diff --git a/docs/charts/line.md b/docs/charts/line.md index 9395c7da343..6d8d4d8314b 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -44,32 +44,32 @@ The line chart allows a number of properties to be specified for each dataset. T | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'` -| [`borderCapStyle`](#line-styling) | `String` | - | - | `'butt'` +| [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'` | [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'` -| [`borderDash`](#line-styling) | `Number[]` | - | - | `[]` -| [`borderDashOffset`](#line-styling) | `Number` | - | - | `0.0` -| [`borderJoinStyle`](#line-styling) | `String` | - | - | `'miter'` -| [`borderWidth`](#line-styling) | `Number` | - | - | `3` -| [`cubicInterpolationMode`](#cubicinterpolationmode) | `String` | - | - | `''` -| [`fill`](#line-styling) | `Boolean/String` | - | - | `true` -| [`label`](#general) | `String` | - | - | `''` -| [`lineTension`](#line-styling) | `Number` | - | - | `0.4` +| [`borderDash`](#line-styling) | `number[]` | - | - | `[]` +| [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0` +| [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'` +| [`borderWidth`](#line-styling) | `number` | - | - | `3` +| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | - | - | `''` +| [`fill`](#line-styling) | `boolean/string` | - | - | `true` +| [`label`](#general) | `string` | - | - | `''` +| [`lineTension`](#line-styling) | `number` | - | - | `0.4` | [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'` | [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`pointBorderWidth`](#point-styling) | `Number` | Yes | Yes | `1` -| [`pointHitRadius`](#point-styling) | `Number` | Yes | Yes | `1` +| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1` +| [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1` | [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined` | [`pointHoverBorderColor`](#interactions) | `Color` | Yes | Yes | `undefined` -| [`pointHoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `1` -| [`pointHoverRadius`](#interactions) | `Number` | Yes | Yes | `4` -| [`pointRadius`](#point-styling) | `Number` | Yes | Yes | `3` -| [`pointRotation`](#point-styling) | `Number` | Yes | Yes | `0` -| [`pointStyle`](#point-styling) | `String/Image` | Yes | Yes | `'circle'` -| [`showLine`](#line-styling) | `Boolean` | - | - | `undefined` -| [`spanGaps`](#line-styling) | `Boolean` | - | - | `undefined` -| [`steppedLine`](#stepped-line) | `Boolean/String` | - | - | `false` -| [`xAxisID`](#general) | `String` | - | - | first x axis -| [`yAxisID`](#general) | `String` | - | - | first y axis +| [`pointHoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1` +| [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4` +| [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3` +| [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0` +| [`pointStyle`](#point-styling) | `string/Image` | Yes | Yes | `'circle'` +| [`showLine`](#line-styling) | `boolean` | - | - | `undefined` +| [`spanGaps`](#line-styling) | `boolean` | - | - | `undefined` +| [`steppedLine`](#stepped-line) | `boolean/string` | - | - | `false` +| [`xAxisID`](#general) | `string` | - | - | first x axis +| [`yAxisID`](#general) | `string` | - | - | first y axis ### General @@ -153,8 +153,8 @@ The line chart defines the following configuration options. These options are me | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `showLines` | `Boolean` | `true` | If false, the lines between points are not drawn. -| `spanGaps` | `Boolean` | `false` | If false, NaN data causes a break in the line. +| `showLines` | `boolean` | `true` | If false, the lines between points are not drawn. +| `spanGaps` | `boolean` | `false` | If false, NaN data causes a break in the line. ## Default Options @@ -169,7 +169,7 @@ Chart.defaults.line.spanGaps = true; The `data` property of a dataset for a line chart can be passed in two formats. -### Number[] +### number[] ```javascript data: [20, 10] ``` diff --git a/docs/charts/polar.md b/docs/charts/polar.md index 0994ee041e2..0d4b76033c5 100644 --- a/docs/charts/polar.md +++ b/docs/charts/polar.md @@ -47,13 +47,13 @@ The following options can be included in a polar area chart dataset to configure | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`borderAlign`](#border-alignment) | `String` | Yes | Yes | `'center'` +| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` -| [`borderWidth`](#styling) | `Number` | Yes | Yes | `2` -| [`data`](#data-structure) | `Number[]` | - | - | **required** +| [`borderWidth`](#styling) | `number` | Yes | Yes | `2` +| [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` -| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined` +| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` ### Styling @@ -93,9 +93,9 @@ These are the customisation options specific to Polar Area charts. These options | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `startAngle` | `Number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset. -| `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` | `true` | If true, will animate scaling the chart from the center outwards. +| `startAngle` | `number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset. +| `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` | `true` | If true, will animate scaling the chart from the center outwards. ## Default Options diff --git a/docs/charts/radar.md b/docs/charts/radar.md index acc504a7592..d0b57cd34ec 100644 --- a/docs/charts/radar.md +++ b/docs/charts/radar.md @@ -68,27 +68,27 @@ All `point*` properties can be specified as an array. If these are set to an arr | Name | Type | Description | ---- | ---- | ----------- -| `label` | `String` | The label for the dataset which appears in the legend and tooltips. +| `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). -| `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). -| `lineTension` | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. +| `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). +| `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. -| `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels. -| `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered. -| `pointRotation` | `Number/Number[]` | The rotation of the point in degrees. -| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](#pointstyle) -| `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events. +| `pointBorderWidth` | `number/number[]` | The width of the point border in pixels. +| `pointRadius` | `number/number[]` | The radius of the point shape. If set to 0, the point is not rendered. +| `pointRotation` | `number/number[]` | The rotation of the point in degrees. +| `pointStyle` | `string/string[]/Image/Image[]` | Style of the point. [more...](#pointstyle) +| `pointHitRadius` | `number/number[]` | The pixel size of the non-displayed point that reacts to mouse events. | `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered. | `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered. -| `pointHoverBorderWidth` | `Number/Number[]` | Border width of point when hovered. -| `pointHoverRadius` | `Number/Number[]` | The radius of the point when hovered. +| `pointHoverBorderWidth` | `number/number[]` | Border width of point when hovered. +| `pointHoverRadius` | `number/number[]` | The radius of the point when hovered. ### pointStyle The style of point. Options are: diff --git a/docs/configuration/animations.md b/docs/configuration/animations.md index 81386ee1d2d..40dd8ec3ff7 100644 --- a/docs/configuration/animations.md +++ b/docs/configuration/animations.md @@ -8,10 +8,10 @@ The following animation options are available. The global options for are define | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `duration` | `Number` | `1000` | The number of milliseconds an animation takes. -| `easing` | `String` | `'easeOutQuart'` | Easing function to use. [more...](#easing) -| `onProgress` | `Function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks) -| `onComplete` | `Function` | `null` | Callback called at the end of an animation. [more...](#animation-callbacks) +| `duration` | `number` | `1000` | The number of milliseconds an animation takes. +| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing) +| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks) +| `onComplete` | `function` | `null` | Callback called at the end of an animation. [more...](#animation-callbacks) ## Easing @@ -60,22 +60,22 @@ The `onProgress` and `onComplete` callbacks are useful for synchronizing an exte chart: Chart, // Current Animation frame number - currentStep: Number, + currentStep: number, // Number of animation frames - numSteps: Number, + numSteps: number, // Animation easing to use - easing: String, + easing: string, // Function that renders the chart - render: Function, + render: function, // User callback - onAnimationProgress: Function, + onAnimationProgress: function, // User callback - onAnimationComplete: Function + onAnimationComplete: function } ``` diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md index b5535ee6f7f..e43494e3ad2 100644 --- a/docs/configuration/elements.md +++ b/docs/configuration/elements.md @@ -17,15 +17,15 @@ Global point options: `Chart.defaults.global.elements.point`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `radius` | `Number` | `3` | Point radius. -| [`pointStyle`](#point-styles) | `String/Image` | `'circle'` | Point style. -| `rotation` | `Number` | `0` | Point rotation (in degrees). +| `radius` | `number` | `3` | Point radius. +| [`pointStyle`](#point-styles) | `string/Image` | `'circle'` | Point style. +| `rotation` | `number` | `0` | Point rotation (in degrees). | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point fill color. -| `borderWidth` | `Number` | `1` | Point stroke width. +| `borderWidth` | `number` | `1` | Point stroke width. | `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point stroke color. -| `hitRadius` | `Number` | `1` | Extra radius added to point radius for hit detection. -| `hoverRadius` | `Number` | `4` | Point radius when hovered. -| `hoverBorderWidth` | `Number` | `1` | Stroke width when hovered. +| `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection. +| `hoverRadius` | `number` | `4` | Point radius when hovered. +| `hoverBorderWidth` | `number` | `1` | Stroke width when hovered. ### Point Styles @@ -50,17 +50,17 @@ Global line options: `Chart.defaults.global.elements.line`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `tension` | `Number` | `0.4` | Bézier curve tension (`0` for no Bézier curves). +| `tension` | `number` | `0.4` | Bézier curve tension (`0` for no Bézier curves). | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line fill color. -| `borderWidth` | `Number` | `3` | Line stroke width. +| `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` | `Number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). -| `borderDashOffset` | `Number` | `0.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). +| `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap). +| `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `borderDashOffset` | `number` | `0.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. @@ -70,9 +70,9 @@ Global rectangle options: `Chart.defaults.global.elements.rectangle`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar fill color. -| `borderWidth` | `Number` | `0` | Bar stroke width. +| `borderWidth` | `number` | `0` | Bar stroke width. | `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar stroke color. -| `borderSkipped` | `String` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`. +| `borderSkipped` | `string` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`. ## Arc Configuration Arcs are used in the polar area, doughnut and pie charts. @@ -82,6 +82,6 @@ Global arc options: `Chart.defaults.global.elements.arc`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Arc fill color. -| `borderAlign` | `String` | `'center'` | Arc stroke alignment. +| `borderAlign` | `string` | `'center'` | Arc stroke alignment. | `borderColor` | `Color` | `'#fff'` | Arc stroke color. -| `borderWidth`| `Number` | `2` | Arc stroke width. +| `borderWidth`| `number` | `2` | Arc stroke width. diff --git a/docs/configuration/layout.md b/docs/configuration/layout.md index 856985a3000..22bf236db5a 100644 --- a/docs/configuration/layout.md +++ b/docs/configuration/layout.md @@ -4,7 +4,7 @@ The layout configuration is passed into the `options.layout` namespace. The glob | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `padding` | `Number/Object` | `0` | The padding to add inside the chart. [more...](#padding) +| `padding` | `number/object` | `0` | The padding to add inside the chart. [more...](#padding) ## Padding If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified. diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index 9e19d7f2044..9655a67167a 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -7,13 +7,13 @@ The legend configuration is passed into the `options.legend` namespace. The glob | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `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. -| `reverse` | `Boolean` | `false` | Legend will show datasets in reverse order. -| `labels` | `Object` | | See the [Legend Label Configuration](#legend-label-configuration) section below. +| `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. +| `reverse` | `boolean` | `false` | Legend will show datasets in reverse order. +| `labels` | `object` | | See the [Legend Label Configuration](#legend-label-configuration) section below. ## Position Position of the legend. Options are: @@ -28,15 +28,15 @@ The legend label configuration is nested below the legend configuration using th | 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. +| `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. -| `filter` | `Function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data. -| `usePointStyle` | `Boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case). +| `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. +| `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data. +| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case). ## Legend Item Interface @@ -45,34 +45,34 @@ Items passed to the legend `onClick` function are the ones returned from `labels ```javascript { // Label that will be displayed - text: String, + text: string, // Fill style of the legend box fillStyle: Color, // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect - hidden: Boolean, + hidden: boolean, // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap - lineCap: String, + lineCap: string, // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash - lineDash: Number[], + lineDash: number[], // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset - lineDashOffset: Number, + lineDashOffset: number, // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin - lineJoin: String, + lineJoin: string, // Width of box border - lineWidth: Number, + lineWidth: number, // Stroke style of the legend box strokeStyle: Color, // Point style of the legend box (only used if usePointStyle is true) - pointStyle: String + pointStyle: string } ``` diff --git a/docs/configuration/title.md b/docs/configuration/title.md index a25d7882a05..cef8d97ace5 100644 --- a/docs/configuration/title.md +++ b/docs/configuration/title.md @@ -7,15 +7,15 @@ The title configuration is passed into the `options.title` namespace. The global | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `display` | `Boolean` | `false` | Is the title shown? -| `position` | `String` | `'top'` | Position of title. [more...](#position) -| `fontSize` | `Number` | `12` | Font size. -| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text. +| `display` | `boolean` | `false` | Is the title shown? +| `position` | `string` | `'top'` | Position of title. [more...](#position) +| `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. -| `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). -| `text` | `String/String[]` | `''` | Title text to display. If specified as an array, text is rendered on multiple lines. +| `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). +| `text` | `string/string[]` | `''` | Title text to display. If specified as an array, text is rendered on multiple lines. ### Position Possible title position values are: diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 0807fc8968c..65855d18a21 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -6,41 +6,41 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `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. -| `position` | `String` | `'average'` | The mode for positioning the tooltip. [more...](#position-modes) -| `callbacks` | `Object` | | See the [callbacks section](#tooltip-callbacks). -| `itemSort` | `Function` | | Sort tooltip items. [more...](#sort-callback) -| `filter` | `Function` | | Filter tooltip items. [more...](#filter-callback) +| `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. +| `position` | `string` | `'average'` | The mode for positioning the tooltip. [more...](#position-modes) +| `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. +| `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. +| `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. -| `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. +| `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. -| `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. -| `yPadding` | `Number` | `6` | Padding to add on top and bottom 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. +| `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. +| `yPadding` | `number` | `6` | Padding to add on top and bottom 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. +| `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. +| `borderWidth` | `number` | `0` | Size of the border. ### Position Modes @@ -86,23 +86,23 @@ Allows filtering of [tooltip items](#tooltip-item-interface). Must implement at The tooltip label configuration is nested below the tooltip configuration using the `callbacks` key. The tooltip has the following callbacks for providing text. For all functions, `this` will be the tooltip object created from the `Chart.Tooltip` constructor. -All functions are called with the same arguments: a [tooltip item](#tooltip-item-interface) and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text. +All functions are called with the same arguments: a [tooltip item](#tooltip-item-interface) and the `data` object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text. | Name | Arguments | Description | ---- | --------- | ----------- -| `beforeTitle` | `tooltipItem[], data` | Returns the text to render before the title. -| `title` | `tooltipItem[], data` | Returns text to render as the title of the tooltip. -| `afterTitle` | `tooltipItem[], data` | Returns text to render after the title. -| `beforeBody` | `tooltipItem[], data` | Returns text to render before the body section. -| `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip. -| `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip. [more...](#label-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` | `tooltipItem[], data` | Returns text to render after the body section. -| `beforeFooter` | `tooltipItem[], data` | Returns text to render before the footer section. -| `footer` | `tooltipItem[], data` | Returns text to render as the footer of the tooltip. -| `afterFooter` | `tooltipItem[], data` | Text to render after the footer section. +| `beforeTitle` | `TooltipItem[], object` | Returns the text to render before the title. +| `title` | `TooltipItem[], object` | Returns text to render as the title of the tooltip. +| `afterTitle` | `TooltipItem[], object` | Returns text to render after the title. +| `beforeBody` | `TooltipItem[], object` | Returns text to render before the body section. +| `beforeLabel` | `TooltipItem, object` | Returns text to render before an individual label. This will be called for each item in the tooltip. +| `label` | `TooltipItem, object` | Returns text to render for an individual item in the tooltip. [more...](#label-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, object` | Returns text to render after an individual label. +| `afterBody` | `TooltipItem[], object` | Returns text to render after the body section. +| `beforeFooter` | `TooltipItem[], object` | Returns text to render before the footer section. +| `footer` | `TooltipItem[], object` | Returns text to render as the footer of the tooltip. +| `afterFooter` | `TooltipItem[], object` | Text to render after the footer section. ### Label Callback @@ -163,22 +163,22 @@ The tooltip items passed to the tooltip callbacks implement the following interf ```javascript { // X Value of the tooltip as a string - xLabel: String, + xLabel: string, // Y value of the tooltip as a string - yLabel: String, + yLabel: string, // Index of the dataset the item comes from - datasetIndex: Number, + datasetIndex: number, // Index of this data item in the dataset - index: Number, + index: number, // X position of matching point - x: Number, + x: number, // Y position of matching point - y: Number + y: number } ``` @@ -281,64 +281,64 @@ The tooltip model contains parameters that can be used to render the tooltip. dataPoints: TooltipItem[], // Positioning - xPadding: Number, - yPadding: Number, - xAlign: String, - yAlign: String, + xPadding: number, + yPadding: number, + xAlign: string, + yAlign: string, // X and Y properties are the top left of the tooltip - x: Number, - y: Number, - width: Number, - height: Number, + x: number, + y: number, + width: number, + height: number, // Where the tooltip points to - caretX: Number, - caretY: Number, + caretX: number, + caretY: number, // Body // The body lines that need to be rendered // Each object contains 3 parameters - // before: String[] // lines of text before the line with the color square - // lines: String[], // lines of text to render as the main item with color square - // after: String[], // lines of text to render after the main lines - body: Object[], + // before: string[] // lines of text before the line with the color square + // lines: string[], // lines of text to render as the main item with color square + // after: string[], // lines of text to render after the main lines + body: object[], // lines of text that appear after the title but before the body - beforeBody: String[], + beforeBody: string[], // line of text that appear after the body and before the footer - afterBody: String[], + afterBody: string[], bodyFontColor: Color, - _bodyFontFamily: String, - _bodyFontStyle: String, - _bodyAlign: String, - bodyFontSize: Number, - bodySpacing: Number, + _bodyFontFamily: string, + _bodyFontStyle: string, + _bodyAlign: string, + bodyFontSize: number, + bodySpacing: number, // Title // lines of text that form the title - title: String[], + title: string[], titleFontColor: Color, - _titleFontFamily: String, - _titleFontStyle: String, - titleFontSize: Number, - _titleAlign: String, - titleSpacing: Number, - titleMarginBottom: Number, + _titleFontFamily: string, + _titleFontStyle: string, + titleFontSize: number, + _titleAlign: string, + titleSpacing: number, + titleMarginBottom: number, // Footer // lines of text that form the footer - footer: String[], + footer: string[], footerFontColor: Color, - _footerFontFamily: String, - _footerFontStyle: String, - footerFontSize: Number, - _footerAlign: String, - footerSpacing: Number, - footerMarginTop: Number, + _footerFontFamily: string, + _footerFontStyle: string, + footerFontSize: number, + _footerAlign: string, + footerSpacing: number, + footerMarginTop: number, // Appearance - caretSize: Number, - caretPadding: Number, - cornerRadius: Number, + caretSize: number, + caretPadding: number, + cornerRadius: number, backgroundColor: Color, // colors to render for each item in body[]. This is the color of the squares in the tooltip @@ -346,10 +346,10 @@ The tooltip model contains parameters that can be used to render the tooltip. labelTextColors: Color[], // 0 opacity is a hidden tooltip - opacity: Number, + opacity: number, legendColorBackground: Color, - displayColors: Boolean, + displayColors: boolean, borderColor: Color, - borderWidth: Number + borderWidth: number } ``` diff --git a/docs/developers/axes.md b/docs/developers/axes.md index 516f036e771..893684f8271 100644 --- a/docs/developers/axes.md +++ b/docs/developers/axes.md @@ -38,26 +38,26 @@ Scale instances are given the following properties during the fitting process. ```javascript { - left: Number, // left edge of the scale bounding box - right: Number, // right edge of the bounding box' - top: Number, - bottom: Number, - width: Number, // the same as right - left - height: Number, // the same as bottom - top + left: number, // left edge of the scale bounding box + right: number, // right edge of the bounding box' + top: number, + bottom: number, + width: number, // the same as right - left + height: number, // the same as bottom - top // Margin on each side. Like css, this is outside the bounding box. margins: { - left: Number, - right: Number, - top: Number, - bottom: Number + left: number, + right: number, + top: number, + bottom: number }, // Amount of padding on the inside of the bounding box (like CSS) - paddingLeft: Number, - paddingRight: Number, - paddingTop: Number, - paddingBottom: Number + paddingLeft: number, + paddingRight: number, + paddingTop: number, + paddingBottom: number } ``` @@ -125,7 +125,7 @@ The Core.Scale base class also has some utility functions that you may find usef // If dataValue is an object, returns .x or .y depending on the return of isHorizontal() // If the value is undefined, returns NaN // Otherwise returns the value. - // Note that in all cases, the returned value is not guaranteed to be a Number + // Note that in all cases, the returned value is not guaranteed to be a number getRightValue: function(dataValue) {}, // Returns the scale tick objects ({label, major}) diff --git a/docs/general/device-pixel-ratio.md b/docs/general/device-pixel-ratio.md index 1ad7d855309..6e6e96ecff1 100644 --- a/docs/general/device-pixel-ratio.md +++ b/docs/general/device-pixel-ratio.md @@ -10,4 +10,4 @@ Setting `devicePixelRatio` to a value other than 1 will force the canvas size to | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `devicePixelRatio` | `Number` | `window.devicePixelRatio` | Override the window's default devicePixelRatio. +| `devicePixelRatio` | `number` | `window.devicePixelRatio` | Override the window's default devicePixelRatio. diff --git a/docs/general/fonts.md b/docs/general/fonts.md index f00c5aa5373..a476ca894a2 100644 --- a/docs/general/fonts.md +++ b/docs/general/fonts.md @@ -23,9 +23,9 @@ let chart = new Chart(ctx, { | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `defaultFontColor` | `Color` | `'#666'` | Default font color for all text. -| `defaultFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text. -| `defaultFontSize` | `Number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels. -| `defaultFontStyle` | `String` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. +| `defaultFontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text. +| `defaultFontSize` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels. +| `defaultFontStyle` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. ## Missing Fonts diff --git a/docs/general/interactions/README.md b/docs/general/interactions/README.md index 09e9717015a..9b5ad6d3271 100644 --- a/docs/general/interactions/README.md +++ b/docs/general/interactions/README.md @@ -4,7 +4,7 @@ The hover configuration is passed into the `options.hover` namespace. The global | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `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. +| `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. diff --git a/docs/general/interactions/events.md b/docs/general/interactions/events.md index d52bc997e5f..51e3bf4b84b 100644 --- a/docs/general/interactions/events.md +++ b/docs/general/interactions/events.md @@ -3,9 +3,9 @@ The following properties define how the chart interacts with events. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `events` | `String[]` | `['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']` | 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. +| `events` | `string[]` | `['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']` | 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. ## Event Option For example, to have the chart only respond to click events, you could do: diff --git a/docs/general/responsive.md b/docs/general/responsive.md index f1a3379096e..319709a5a16 100644 --- a/docs/general/responsive.md +++ b/docs/general/responsive.md @@ -13,11 +13,11 @@ Chart.js provides a [few options](#configuration-options) to enable responsivene | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `responsive` | `Boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)). -| `responsiveAnimationDuration` | `Number` | `0` | Duration in milliseconds it takes to animate to new size after a resize event. -| `maintainAspectRatio` | `Boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing. -| `aspectRatio` | `Number` | `2` | Canvas aspect ratio (i.e. `width / height`, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style. -| `onResize` | `Function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size. +| `responsive` | `boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)). +| `responsiveAnimationDuration` | `number` | `0` | Duration in milliseconds it takes to animate to new size after a resize event. +| `maintainAspectRatio` | `boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing. +| `aspectRatio` | `number` | `2` | Canvas aspect ratio (i.e. `width / height`, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style. +| `onResize` | `function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size. ## Important Note From 7fc999d3bb704522b2d53c58183632e2eba78e4d Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Tue, 29 Jan 2019 01:24:52 +0800 Subject: [PATCH 4/6] Use union types --- docs/axes/README.md | 2 +- docs/axes/cartesian/time.md | 2 +- docs/axes/labelling.md | 4 ++-- docs/axes/radial/linear.md | 4 ++-- docs/axes/styling.md | 10 +++++----- docs/charts/bar.md | 2 +- docs/charts/line.md | 6 +++--- docs/charts/radar.md | 24 ++++++++++++------------ docs/configuration/elements.md | 4 ++-- docs/configuration/layout.md | 2 +- docs/configuration/title.md | 4 ++-- 11 files changed, 32 insertions(+), 32 deletions(-) diff --git a/docs/axes/README.md b/docs/axes/README.md index b2a8371c2c3..5761603ba31 100644 --- a/docs/axes/README.md +++ b/docs/axes/README.md @@ -16,7 +16,7 @@ The following properties are common to all axes provided by Chart.js. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `display` | `boolean/string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible. +| `display` | boolean|string | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible. | `callbacks` | `object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks) | `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area. diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md index 66f7e8be83e..802dd098be3 100644 --- a/docs/axes/cartesian/time.md +++ b/docs/axes/cartesian/time.md @@ -35,7 +35,7 @@ The following options are provided by the time scale. You may also set options p | `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.parser` | `string/function` | | Custom parser for dates. [more...](#parser) +| `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. | `time.unit` | `string` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details. diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md index 54a2964c891..8f39235640f 100644 --- a/docs/axes/labelling.md +++ b/docs/axes/labelling.md @@ -10,12 +10,12 @@ The scale label configuration is nested under the scale configuration in the `sc | ---- | ---- | ------- | ----------- | `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. | `fontStyle` | `string` | `'normal'` | Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `padding` | `number/object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented. +| `padding` | number|object | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented. ## Creating Custom Tick Formats diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index bbd4e36b149..a7c04099b12 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -105,8 +105,8 @@ The following options are used to configure the point labels that are shown on t | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `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. +| `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. | `fontStyle` | `string` | `'normal'` | Font style to use when rendering point labels. -| `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)). diff --git a/docs/axes/styling.md b/docs/axes/styling.md index a5fb5a979b0..fb3631d4db4 100644 --- a/docs/axes/styling.md +++ b/docs/axes/styling.md @@ -10,10 +10,10 @@ The grid line configuration is nested under the scale configuration in the `grid | ---- | ---- | ------- | ----------- | `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). -| `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. +| `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.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. +| `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. | `drawTicks` | `boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart. @@ -35,7 +35,7 @@ The tick configuration is nested under the scale configuration in the `ticks` ke | `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. | `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `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)). | `reverse` | `boolean` | `false` | Reverses order of tick labels. | `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above. | `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above. @@ -51,7 +51,7 @@ The minorTick configuration is nested under the ticks configuration in the `mino | `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. | `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `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)). ## Major Tick Configuration The majorTick configuration is nested under the ticks configuration in the `major` key. It defines options for the major tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration. @@ -63,4 +63,4 @@ The majorTick configuration is nested under the ticks configuration in the `majo | `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. | `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -| `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)). diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 25e8b466075..16d763f3c1a 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -132,7 +132,7 @@ The bar chart accepts the following configuration from the associated `scale` op | ---- | ---- | ------- | ----------- | `barPercentage` | `number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage) | `categoryPercentage` | `number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage) -| `barThickness` | `number/string` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness) +| `barThickness` | number|string | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness) | `maxBarThickness` | `number` | | Set this to ensure that bars are not sized thicker than this. | `minBarLength` | `number` | | Set this to ensure that bars have a minimum length in pixels. | `gridLines.offsetGridLines` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines) diff --git a/docs/charts/line.md b/docs/charts/line.md index 6d8d4d8314b..a0996b3ec14 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -51,7 +51,7 @@ The line chart allows a number of properties to be specified for each dataset. T | [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'` | [`borderWidth`](#line-styling) | `number` | - | - | `3` | [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | - | - | `''` -| [`fill`](#line-styling) | `boolean/string` | - | - | `true` +| [`fill`](#line-styling) | boolean|string | - | - | `true` | [`label`](#general) | `string` | - | - | `''` | [`lineTension`](#line-styling) | `number` | - | - | `0.4` | [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'` @@ -64,10 +64,10 @@ The line chart allows a number of properties to be specified for each dataset. T | [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4` | [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3` | [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0` -| [`pointStyle`](#point-styling) | `string/Image` | Yes | Yes | `'circle'` +| [`pointStyle`](#point-styling) | string|Image | Yes | Yes | `'circle'` | [`showLine`](#line-styling) | `boolean` | - | - | `undefined` | [`spanGaps`](#line-styling) | `boolean` | - | - | `undefined` -| [`steppedLine`](#stepped-line) | `boolean/string` | - | - | `false` +| [`steppedLine`](#stepped-line) | boolean|string | - | - | `false` | [`xAxisID`](#general) | `string` | - | - | first x axis | [`yAxisID`](#general) | `string` | - | - | first y axis diff --git a/docs/charts/radar.md b/docs/charts/radar.md index d0b57cd34ec..b1e31d78b07 100644 --- a/docs/charts/radar.md +++ b/docs/charts/radar.md @@ -76,19 +76,19 @@ All `point*` properties can be specified as an array. If these are set to an arr | `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). +| `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. -| `pointBorderWidth` | `number/number[]` | The width of the point border in pixels. -| `pointRadius` | `number/number[]` | The radius of the point shape. If set to 0, the point is not rendered. -| `pointRotation` | `number/number[]` | The rotation of the point in degrees. -| `pointStyle` | `string/string[]/Image/Image[]` | Style of the point. [more...](#pointstyle) -| `pointHitRadius` | `number/number[]` | The pixel size of the non-displayed point that reacts to mouse events. -| `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered. -| `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered. -| `pointHoverBorderWidth` | `number/number[]` | Border width of point when hovered. -| `pointHoverRadius` | `number/number[]` | The radius of the point when hovered. +| `pointBackgroundColor` | Color|Color[] | The fill color for points. +| `pointBorderColor` | Color|Color[] | The border color for points. +| `pointBorderWidth` | number|number[] | The width of the point border in pixels. +| `pointRadius` | number|number[] | The radius of the point shape. If set to 0, the point is not rendered. +| `pointRotation` | number|number[] | The rotation of the point in degrees. +| `pointStyle` | string|string[]|Image|Image[] | Style of the point. [more...](#pointstyle) +| `pointHitRadius` | number|number[] | The pixel size of the non-displayed point that reacts to mouse events. +| `pointHoverBackgroundColor` | Color|Color[] | Point background color when hovered. +| `pointHoverBorderColor` | Color|Color[] | Point border color when hovered. +| `pointHoverBorderWidth` | number|number[] | Border width of point when hovered. +| `pointHoverRadius` | number|number[] | The radius of the point when hovered. ### pointStyle The style of point. Options are: diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md index e43494e3ad2..ac77008c060 100644 --- a/docs/configuration/elements.md +++ b/docs/configuration/elements.md @@ -18,7 +18,7 @@ Global point options: `Chart.defaults.global.elements.point`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `radius` | `number` | `3` | Point radius. -| [`pointStyle`](#point-styles) | `string/Image` | `'circle'` | Point style. +| [`pointStyle`](#point-styles) | string|Image | `'circle'` | Point style. | `rotation` | `number` | `0` | Point rotation (in degrees). | `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point fill color. | `borderWidth` | `number` | `1` | Point stroke width. @@ -59,7 +59,7 @@ Global line options: `Chart.defaults.global.elements.line`. | `borderDashOffset` | `number` | `0.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). +| `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 diff --git a/docs/configuration/layout.md b/docs/configuration/layout.md index 22bf236db5a..375a480702f 100644 --- a/docs/configuration/layout.md +++ b/docs/configuration/layout.md @@ -4,7 +4,7 @@ The layout configuration is passed into the `options.layout` namespace. The glob | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `padding` | `number/object` | `0` | The padding to add inside the chart. [more...](#padding) +| `padding` | number|object | `0` | The padding to add inside the chart. [more...](#padding) ## Padding If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified. diff --git a/docs/configuration/title.md b/docs/configuration/title.md index cef8d97ace5..33b69531fa9 100644 --- a/docs/configuration/title.md +++ b/docs/configuration/title.md @@ -14,8 +14,8 @@ The title configuration is passed into the `options.title` namespace. The global | `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). -| `text` | `string/string[]` | `''` | Title text to display. If specified as an array, text is rendered on multiple lines. +| `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 Possible title position values are: From 68cd661c30d1f2884a41b2b254a5b74227daeeae Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Tue, 29 Jan 2019 01:55:27 +0800 Subject: [PATCH 5/6] Add minor fixes in docs --- docs/charts/line.md | 2 +- docs/developers/plugins.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/charts/line.md b/docs/charts/line.md index a0996b3ec14..d8cc23d6ae6 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -113,7 +113,7 @@ The style of the line can be controlled with the following properties: | `showLine` | If false, the line is not drawn for this dataset. | `spanGaps` | 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. -If the value is `undefined`, `showLine` and `spanGaps` fallback to the associated [chart configuration options](#configuration-options). The rest of values fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options. +If the value is `undefined`, `showLine` and `spanGaps` fallback to the associated [chart configuration options](#configuration-options). The rest of the values fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options. ### Interactions diff --git a/docs/developers/plugins.md b/docs/developers/plugins.md index 4cc8faeffaf..a935fe2fe74 100644 --- a/docs/developers/plugins.md +++ b/docs/developers/plugins.md @@ -52,7 +52,7 @@ Chart.plugins.register({ ### Plugin ID -Plugins must define an unique id in order to be configurable. +Plugins must define a unique id in order to be configurable. This id should follow the [npm package name convention](https://docs.npmjs.com/files/package.json#name): From 186d101352b10330aa89c8559a7bd14d6fe265c2 Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Tue, 29 Jan 2019 10:34:54 +0800 Subject: [PATCH 6/6] Add spaces to color values and fix indentation and spacing --- docs/axes/cartesian/README.md | 2 +- docs/axes/cartesian/time.md | 4 +-- docs/axes/radial/linear.md | 4 +-- docs/axes/styling.md | 4 +-- docs/charts/area.md | 2 +- docs/charts/bar.md | 6 ++-- docs/charts/bubble.md | 6 ++-- docs/charts/doughnut.md | 2 +- docs/charts/line.md | 12 ++++---- docs/charts/mixed.md | 56 +++++++++++++++++----------------- docs/charts/polar.md | 2 +- docs/configuration/README.md | 2 +- docs/configuration/elements.md | 14 ++++----- docs/configuration/title.md | 2 +- docs/configuration/tooltip.md | 4 +-- docs/developers/axes.md | 2 +- docs/general/colors.md | 2 +- docs/getting-started/README.md | 2 +- docs/notes/comparison.md | 4 +-- 19 files changed, 66 insertions(+), 66 deletions(-) diff --git a/docs/axes/cartesian/README.md b/docs/axes/cartesian/README.md index 8caf0004302..a12245a44bc 100644 --- a/docs/axes/cartesian/README.md +++ b/docs/axes/cartesian/README.md @@ -84,7 +84,7 @@ var myChart = new Chart(ctx, { label: 'Right dataset', // This binds the dataset to the right y axis - yAxisID: 'right-y-axis', + yAxisID: 'right-y-axis' }], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md index 802dd098be3..6349af4fcb4 100644 --- a/docs/axes/cartesian/time.md +++ b/docs/axes/cartesian/time.md @@ -115,8 +115,8 @@ var chart = new Chart(ctx, { The `distribution` property controls the data distribution along the scale: - * `'linear'`: data are spread according to their time (distances can vary) - * `'series'`: data are spread at the same distance from each other +* `'linear'`: data are spread according to their time (distances can vary) +* `'series'`: data are spread at the same distance from each other ```javascript var chart = new Chart(ctx, { diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index a7c04099b12..af1674aa518 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -20,7 +20,7 @@ The following options are provided by the linear scale. They are all located in | 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. @@ -93,7 +93,7 @@ The following options are used to configure angled lines that radiate from the c | 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. +| `color` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Color of angled lines. | `lineWidth` | `number` | `1` | Width of angled lines. | `borderDash` | `number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). | `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). diff --git a/docs/axes/styling.md b/docs/axes/styling.md index fb3631d4db4..e0089cb3725 100644 --- a/docs/axes/styling.md +++ b/docs/axes/styling.md @@ -10,7 +10,7 @@ The grid line configuration is nested under the scale configuration in the `grid | ---- | ---- | ------- | ----------- | `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). -| `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. +| `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.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. @@ -19,7 +19,7 @@ The grid line configuration is nested under the scale configuration in the `grid | `drawTicks` | `boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart. | `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). +| `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.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. diff --git a/docs/charts/area.md b/docs/charts/area.md index ff7e278a718..824a469e872 100644 --- a/docs/charts/area.md +++ b/docs/charts/area.md @@ -38,7 +38,7 @@ new Chart(ctx, { | [`plugins.filler.propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden. ### propagate -A boolean value (default: `true`) +`propagate` takes a `boolean` value (default: `true`). If `true`, the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets: diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 16d763f3c1a..88e2744c713 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -66,10 +66,10 @@ The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the color of the bars is generally set this way. -| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default +| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- -| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` +| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` +| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'` | [`borderWidth`](#styling) | `number` | Yes | Yes | `0` | [`data`](#data-structure) | `object[]` | - | - | **required** diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md index 67a00dd4af1..b94c98c17d5 100644 --- a/docs/charts/bubble.md +++ b/docs/charts/bubble.md @@ -38,10 +38,10 @@ var myBubbleChart = new Chart(ctx, { The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way. -| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default +| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- -| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` +| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` +| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderWidth`](#styling) | `number` | Yes | Yes | `3` | [`data`](#data-structure) | `object[]` | - | - | **required** | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md index 9f8e7f8a953..ad1af3106ef 100644 --- a/docs/charts/doughnut.md +++ b/docs/charts/doughnut.md @@ -55,7 +55,7 @@ The doughnut/pie chart allows a number of properties to be specified for each da | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- -| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` +| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` | [`borderWidth`](#styling) | `number` | Yes | Yes | `2` diff --git a/docs/charts/line.md b/docs/charts/line.md index d8cc23d6ae6..f7744eedbb6 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -41,11 +41,11 @@ var myLineChart = new Chart(ctx, { The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way. -| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default +| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- -| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'` +| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'` | [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'` -| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'` +| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'` | [`borderDash`](#line-styling) | `number[]` | - | - | `[]` | [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0` | [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'` @@ -54,8 +54,8 @@ The line chart allows a number of properties to be specified for each dataset. T | [`fill`](#line-styling) | boolean|string | - | - | `true` | [`label`](#general) | `string` | - | - | `''` | [`lineTension`](#line-styling) | `number` | - | - | `0.4` -| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'` -| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'` +| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` +| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1` | [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1` | [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined` @@ -139,7 +139,7 @@ If left untouched (`undefined`), the global `options.elements.line.cubicInterpol ### Stepped Line The following values are supported for `steppedLine`. -* `false`: No Step Interpolation (default) +* `false`: No Step Interpolation (default) * `true`: Step-before Interpolation (eq. `'before'`) * `'before'`: Step-before Interpolation * `'after'`: Step-after Interpolation diff --git a/docs/charts/mixed.md b/docs/charts/mixed.md index f075b381663..9f83f2ea6d8 100644 --- a/docs/charts/mixed.md +++ b/docs/charts/mixed.md @@ -38,35 +38,35 @@ At this point we have a chart rendering how we'd like. It's important to note th {% chartjs %} { - "type": "bar", - "data": { - "labels": [ - "January", - "February", - "March", - "April" - ], - "datasets": [{ - "label": "Bar Dataset", - "data": [10, 20, 30, 40], - "borderColor": "rgb(255, 99, 132)", - "backgroundColor": "rgba(255, 99, 132, 0.2)" - }, { - "label": "Line Dataset", - "data": [50, 50, 50, 50], - "type": "line", - "fill": false, - "borderColor": "rgb(54, 162, 235)" - }] - }, - "options": { - "scales": { - "yAxes": [{ - "ticks": { - "beginAtZero": true + "type": "bar", + "data": { + "labels": [ + "January", + "February", + "March", + "April" + ], + "datasets": [{ + "label": "Bar Dataset", + "data": [10, 20, 30, 40], + "borderColor": "rgb(255, 99, 132)", + "backgroundColor": "rgba(255, 99, 132, 0.2)" + }, { + "label": "Line Dataset", + "data": [50, 50, 50, 50], + "type": "line", + "fill": false, + "borderColor": "rgb(54, 162, 235)" + }] + }, + "options": { + "scales": { + "yAxes": [{ + "ticks": { + "beginAtZero": true + } + }] } - }] } - } } {% endchartjs %} diff --git a/docs/charts/polar.md b/docs/charts/polar.md index 0d4b76033c5..8403a387230 100644 --- a/docs/charts/polar.md +++ b/docs/charts/polar.md @@ -46,7 +46,7 @@ The following options can be included in a polar area chart dataset to configure | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- -| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` +| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` | [`borderWidth`](#styling) | `number` | Yes | Yes | `2` diff --git a/docs/configuration/README.md b/docs/configuration/README.md index 51c973d78fb..0a4dee450c9 100644 --- a/docs/configuration/README.md +++ b/docs/configuration/README.md @@ -14,7 +14,7 @@ The following example would set the hover mode to 'nearest' for all charts where Chart.defaults.global.hover.mode = 'nearest'; // Hover mode is set to nearest because it was not overridden here -var chartHoverModeNearest = new Chart(ctx, { +var chartHoverModeNearest = new Chart(ctx, { type: 'line', data: data }); diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md index ac77008c060..a2a794d3de2 100644 --- a/docs/configuration/elements.md +++ b/docs/configuration/elements.md @@ -20,9 +20,9 @@ Global point options: `Chart.defaults.global.elements.point`. | `radius` | `number` | `3` | Point radius. | [`pointStyle`](#point-styles) | string|Image | `'circle'` | Point style. | `rotation` | `number` | `0` | Point rotation (in degrees). -| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point fill color. +| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Point fill color. | `borderWidth` | `number` | `1` | Point stroke width. -| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point stroke color. +| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Point stroke color. | `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection. | `hoverRadius` | `number` | `4` | Point radius when hovered. | `hoverBorderWidth` | `number` | `1` | Stroke width when hovered. @@ -51,9 +51,9 @@ Global line options: `Chart.defaults.global.elements.line`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `tension` | `number` | `0.4` | Bézier curve tension (`0` for no Bézier curves). -| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line fill color. +| `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. +| `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` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). | `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). @@ -69,9 +69,9 @@ Global rectangle options: `Chart.defaults.global.elements.rectangle`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar fill color. +| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar fill color. | `borderWidth` | `number` | `0` | Bar stroke width. -| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar stroke color. +| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar stroke color. | `borderSkipped` | `string` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`. ## Arc Configuration @@ -81,7 +81,7 @@ Global arc options: `Chart.defaults.global.elements.arc`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Arc fill color. +| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Arc fill color. | `borderAlign` | `string` | `'center'` | Arc stroke alignment. | `borderColor` | `Color` | `'#fff'` | Arc stroke color. | `borderWidth`| `number` | `2` | Arc stroke width. diff --git a/docs/configuration/title.md b/docs/configuration/title.md index 33b69531fa9..f7033790d1f 100644 --- a/docs/configuration/title.md +++ b/docs/configuration/title.md @@ -10,7 +10,7 @@ The title configuration is passed into the `options.title` namespace. The global | `display` | `boolean` | `false` | Is the title shown? | `position` | `string` | `'top'` | Position of title. [more...](#position) | `fontSize` | `number` | `12` | Font size. -| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text. +| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text. | `fontColor` | `Color` | `'#666'` | Font color. | `fontStyle` | `string` | `'bold'` | Font style. | `padding` | `number` | `10` | Number of pixels to add above and below the title text. diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 65855d18a21..2014dcdac9c 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -14,7 +14,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g | `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. +| `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. @@ -39,7 +39,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g | `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. +| `borderColor` | `Color` | `'rgba(0, 0, 0, 0)'` | Color of the border. | `borderWidth` | `number` | `0` | Size of the border. ### Position Modes diff --git a/docs/developers/axes.md b/docs/developers/axes.md index 893684f8271..682e93ea919 100644 --- a/docs/developers/axes.md +++ b/docs/developers/axes.md @@ -39,7 +39,7 @@ Scale instances are given the following properties during the fitting process. ```javascript { left: number, // left edge of the scale bounding box - right: number, // right edge of the bounding box' + right: number, // right edge of the bounding box top: number, bottom: number, width: number, // the same as right - left diff --git a/docs/general/colors.md b/docs/general/colors.md index 8521d01e6d1..12d700d7d49 100644 --- a/docs/general/colors.md +++ b/docs/general/colors.md @@ -1,6 +1,6 @@ # 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. diff --git a/docs/getting-started/README.md b/docs/getting-started/README.md index 9f9522b858e..5a879c4ce51 100644 --- a/docs/getting-started/README.md +++ b/docs/getting-started/README.md @@ -40,4 +40,4 @@ var chart = new Chart(ctx, { It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more. -There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases). +All our examples are [available online](https://www.chartjs.org/samples/latest/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder. diff --git a/docs/notes/comparison.md b/docs/notes/comparison.md index 46f6cdd5018..b7a72316392 100644 --- a/docs/notes/comparison.md +++ b/docs/notes/comparison.md @@ -9,7 +9,7 @@ Library Features | SVG | | ✓ | ✓ | ✓ | | Built-in Charts | ✓ | | ✓ | ✓ | | 8+ Chart Types | ✓ | ✓ | ✓ | | -| Extendable to Custom Charts | ✓ | ✓ | | | +| Extendable to Custom Charts | ✓ | ✓ | | | | Supports Modern Browsers | ✓ | ✓ | ✓ | ✓ | | Extensive Documentation | ✓ | ✓ | ✓ | ✓ | | Open Source | ✓ | ✓ | | ✓ | @@ -24,7 +24,7 @@ Built in Chart Types | Horizontal Bar | ✓ | ✓ | ✓ | | Pie/Doughnut | ✓ | ✓ | ✓ | | Polar Area | ✓ | ✓ | | -| Radar | ✓ | | | +| Radar | ✓ | | | | Scatter | ✓ | ✓ | ✓ | | Bubble | ✓ | | | | Gauges | | ✓ | |