Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-19 06:36:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

3.0.0-alpha.2 Release (#7644)

Browse Source
This commit is contained in:
Evert Timberg
2020-07-17 16:56:24 -04:00
committed by GitHub
parent a7fe828ee1
commit b1babbf2b4
398 changed files with 23873 additions and 19237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.editorconfig
View File

@@ -9,10 +9,6 @@ charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[gulpfile.js]
indent_style = space
indent_size = 2
[*.yml]
indent_style = space
indent_size = 2

2
.eslintrc.yml
View File

@@ -22,3 +22,5 @@ plugins: ['html']
rules:
class-methods-use-this: 0
no-empty-function: 0
complexity: [1, 10]
max-statements: [1, 30]

2
.github/ISSUE_TEMPLATE/BUG.md vendored
View File

@@ -26,7 +26,7 @@ labels: 'type: bug'
or ideas how to implement the addition or change
-->
## Steps to Reproduce (for bugs)
## Steps to Reproduce
<!--
Provide a link to a live example. Bug reports MUST be submitted with an
interactive example (https://codepen.io/pen?template=JXVYzq).

13
.github/workflows/ci.yml vendored
View File

@@ -28,9 +28,6 @@ jobs:
Xvfb :99 -screen 0 1024x768x24 &
echo "::set-env name=DISPLAY:::99.0"
if: runner.os == 'Linux'
- name: Install gulp
run: npm install --global gulp
if: runner.os == 'macOS'
- name: Install chrome
run: |
brew update
@@ -45,13 +42,13 @@ jobs:
- name: Build and Test
run: |
npm install
gulp build
gulp test --coverage ${BROWSERS}
npm run build
npm test
- name: Package
run: |
gulp docs
gulp package
gulp bower
npm run docs
npm run typedoc
npm pack
- name: Publish Test Results
run: cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
shell: bash

22
.gitignore vendored
View File

@@ -1,17 +1,29 @@
/_book
# Deployment
/coverage
/custom
/dist
/docs/index.md
/gh-pages
/jsdoc
/node_modules
/helpers
# Node.js
node_modules/
npm-debug.log*
# Docs
.docusaurus
.cache-loader
build/
# Development
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea
.project
.settings
.vscode
bower.json
*.log
*.swp
*.stackdump

12
.travis.yml
View File

@@ -9,11 +9,12 @@ services:
- xvfb
script:
- gulp build
- gulp test --coverage
- gulp docs
- gulp package
- gulp bower
- npm run build
- npm test
- ./scripts/docs-config.sh
- npm run docs
- npm run typedoc
- npm pack
- cat ./coverage/lcov.info | ./node_modules/.bin/coveralls || true
sudo: required
@@ -55,3 +56,4 @@ deploy:
skip_cleanup: true
on:
tags: true
tag: next

5
MAINTAINING.md
View File

@@ -16,8 +16,7 @@ creation fails and the release process is aborted.
Merging into the `release` branch kicks off the automated release process:
* build of the `dist/*.js` files
* `bower.json` is generated from `package.json`
* `dist/*.js` and `bower.json` are added to a detached branch
* `dist/*.js` is added to a detached branch
* a tag is created from the `package.json` version
* tag (with dist files) is pushed to GitHub
@@ -32,5 +31,5 @@ Finally, [cdnjs](https://cdnjs.com/libraries/Chart.js) is automatically updated
### Further Reading
* [Travis GitHub releases](https://github.com/chartjs/Chart.js/pull/2555)
* [Bower support and dist/* files](https://github.com/chartjs/Chart.js/issues/3033)
* [dist/* files](https://github.com/chartjs/Chart.js/issues/3033)
* [cdnjs npm auto update](https://github.com/cdnjs/cdnjs/pull/8401)

2
README.md
View File

@@ -25,7 +25,7 @@
## Contributing
Instructions on building and testing Chart.js can be found in [the documentation](https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md#building-and-testing). Before submitting an issue or a pull request, please take a moment to look over the [contributing guidelines](https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md) first. For support, please post questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/chartjs) with the `chartjs` tag.
Instructions on building and testing Chart.js can be found in [the documentation](https://www.chartjs.org/docs/latest/developers/contributing.html#building-and-testing). Before submitting an issue or a pull request, please take a moment to look over the [contributing guidelines](https://www.chartjs.org/docs/latest/developers/contributing.html) first. For support, please post questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/chartjs) with the `chartjs` tag.
## License

26
babel.config.json
View File

@@ -1,33 +1,19 @@
{
"presets": [
"@babel/preset-env"
[
"@babel/preset-env", {
"loose": true
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-object-assign"
],
"env": {
"es6": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
},
"modules": false,
"useBuiltIns": false
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
},
"test": {
"plugins": [
"istanbul"
]
}
}
}
}

32
book.json
View File

@@ -1,32 +0,0 @@
{
"root": "./docs",
"title": "Chart.js documentation",
"author": "chartjs",
"gitbook": "3.2.2",
"plugins": [
"-lunr",
"-search",
"search-plus",
"anchorjs",
"chartjs",
"ga",
"redirect"
],
"pluginsConfig": {
"anchorjs": {
"icon": "#",
"placement": "left",
"visible": "always"
},
"ga": {
"token": "UA-28909194-3",
"configuration": "auto"
},
"theme-default": {
"showLevel": false,
"styles": {
"website": "style.css"
}
}
}
}

78
docs/README.md
View File

@@ -1,63 +1,33 @@
# Chart.js
# Website
[![slack](https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600)](https://chartjs-slack.herokuapp.com/)
This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
## Installation
### Installation
You can download the latest version of Chart.js from the [GitHub releases](https://github.com/chartjs/Chart.js/releases/latest) or use a [Chart.js CDN](https://www.jsdelivr.com/package/npm/chart.js). Detailed installation instructions can be found on the [installation](./getting-started/installation.md) page.
## Creating a Chart
It's easy to get started with Chart.js. All that's required is the script included in your page along with a single `<canvas>` node to render the chart.
In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md).
```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
```
$ npm install
```
## Contributing
### Local Development
Before submitting an issue or a pull request to the project, please take a moment to look over the [contributing guidelines](https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md) first.
```
$ npm run start
```
For support using Chart.js, please post questions with the [`chartjs` tag on Stack Overflow](https://stackoverflow.com/questions/tagged/chartjs).
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
## License
### Build
Chart.js is available under the [MIT license](https://opensource.org/licenses/MIT).
```
$ npm run build
```
This command generates static content into the `build` directory and can be served using any static contents hosting service.
### Deployment
```
$ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

60
docs/SUMMARY.md
View File

@@ -1,60 +0,0 @@
# Summary
* [Chart.js](https://www.chartjs.org)
* [Introduction](README.md)
* [Getting Started](getting-started/README.md)
* [Installation](getting-started/installation.md)
* [Integration](getting-started/integration.md)
* [Usage](getting-started/usage.md)
* [Migration Guide](getting-started/v3-migration.md)
* [General](general/README.md)
* [Data structures](general/data-structures.md)
* [Accessibility](general/accessibility.md)
* [Responsive](general/responsive.md)
* [Pixel Ratio](general/device-pixel-ratio.md)
* [Interactions](general/interactions/README.md)
* [Events](general/interactions/events.md)
* [Modes](general/interactions/modes.md)
* [Options](general/options.md)
* [Colors](general/colors.md)
* [Fonts](general/fonts.md)
* [Performance](general/performance.md)
* [Configuration](configuration/README.md)
* [Animations](configuration/animations.md)
* [Layout](configuration/layout.md)
* [Legend](configuration/legend.md)
* [Title](configuration/title.md)
* [Tooltip](configuration/tooltip.md)
* [Elements](configuration/elements.md)
* [Charts](charts/README.md)
* [Line](charts/line.md)
* [Bar](charts/bar.md)
* [Radar](charts/radar.md)
* [Doughnut & Pie](charts/doughnut.md)
* [Polar Area](charts/polar.md)
* [Bubble](charts/bubble.md)
* [Scatter](charts/scatter.md)
* [Area](charts/area.md)
* [Mixed](charts/mixed.md)
* [Axes](axes/README.md)
* [Cartesian](axes/cartesian/README.md)
* [Category](axes/cartesian/category.md)
* [Linear](axes/cartesian/linear.md)
* [Logarithmic](axes/cartesian/logarithmic.md)
* [Time](axes/cartesian/time.md)
* [Radial](axes/radial/README.md)
* [Linear](axes/radial/linear.md)
* [Labelling](axes/labelling.md)
* [Styling](axes/styling.md)
* [Developers](developers/README.md)
* [Chart.js API](developers/api.md)
* [TypeDoc](typedoc/index.html)
* [Updating Charts](developers/updates.md)
* [Plugins](developers/plugins.md)
* [New Charts](developers/charts.md)
* [New Axes](developers/axes.md)
* [Contributing](developers/contributing.md)
* [Additional Notes](notes/README.md)
* [Comparison Table](notes/comparison.md)
* [Popular Extensions](notes/extensions.md)
* [License](notes/license.md)

11
docs/axes/cartesian/logarithmic.md
View File

@@ -1,11 +0,0 @@
# Logarithmic Cartesian Axis
The logarithmic scale is use to chart numerical data. It can be placed on either the x or y axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.
## Tick Configuration Options
The logarithmic scale options extend the [common tick configuration](README.md#tick-configuration). This scale does not define any options that are unique to it.
## Internal data format
Internally logarithmic scale uses numeric data

59
docs/axes/styling.md
View File

@@ -1,59 +0,0 @@
# Styling
There are a number of options to allow styling an axis. There are settings to control [grid lines](#grid-line-configuration) and [ticks](#tick-configuration).
## Grid Line Configuration
The grid line configuration is nested under the scale configuration in the `gridLines` key. It defines options for the grid lines that run perpendicular to the axis.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `display` | `boolean` | `true` | If false, do not display grid lines for this axis.
| `borderColor` | `Color` | | If set, used as the color of the border line. If unset, the first `color` option is resolved and used.
| `borderWidth` | `number` | | If set, used as the width of the border line. If unset, the first `lineWidth` option is resolved and used.
| `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
| `color` | <code>Color&#124;Color[]&#124;function</code> | `'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` | <code>number&#124;function</code> | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `lineWidth` | <code>number&#124;number[]&#124;function</code> | `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.
| `offsetGridLines` | `boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
| `z` | `number` | `0` | z-index of gridline layer. Values &lt;= 0 are drawn under datasets, &gt; 0 on top.
For function arguments, the function is passed a context object that is of the form:
```javscript
{
scale: // Scale object
tick: // Tick object
}
```
## 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 | [Scriptable](../general/options.md#scriptable-options) | 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 labels.
| `fontColor` | `Color` | Yes | `'#666'` | Font color for tick labels.
| `fontFamily` | `string` | Yes | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
| `fontSize` | `number` | Yes | `12` | Font size for the tick labels.
| `fontStyle` | `string` | Yes | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
| `lineHeight` | <code>number&#124;string</code> | Yes | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| `lineWidth` | `number` | Yes | `0` | Stroke width around the text.
| `major` | `object` | | `{}` | Major ticks configuration.
| `padding` | `number` | | `0` | Sets the offset of the tick labels from the axis
| `reverse` | `boolean` | | `false` | Reverses order of tick labels.
| `strokeStyle` | `string` | Yes | `` | The color of the stroke around the text.
| `z` | `number` | `0` | | z-index of tick layer. Useful when ticks are drawn on chart area. Values &lt;= 0 are drawn under datasets, &gt; 0 on top.
## 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.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `enabled` | `boolean` | `false` | If true, major ticks are generated. A major tick will affect autoskipping and `major` will be defined on ticks in the scriptable options context.

14
docs/charts/README.md
View File

@@ -1,14 +0,0 @@
# Charts
Chart.js comes with built-in chart types:
* [line](./line.md)
* [bar](./bar.md)
* [radar](./radar.md)
* [doughnut and pie](./doughnut.md)
* [polar area](./polar.md)
* [bubble](./bubble.md)
* [scatter](./scatter.md)
[Area charts](area.md) can be built from a line or radar chart using the dataset `fill` option.
To create a new chart type, see the [developer notes](../developers/charts.md#new-charts).

121
docs/configuration/animations.md
View File

@@ -1,121 +0,0 @@
# Animations
Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
## Animation Configuration
The following animation options are available. The global options for are defined in `Chart.defaults.animation`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
| `debug` | `boolean` | `undefined` | Running animation count + FPS display in upper left corner of the chart.
| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks)
| `onComplete` | `function` | `null` | Callback called when all animations are completed. [more...](#animation-callbacks)
| `delay` | `number` | `undefined` | Delay before starting the animations.
| `loop` | `boolean` | `undefined` | If set to `true`, loop the animations loop endlessly.
| `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, '`color`'.
| `from` | <code>number&#124;Color</code> | `undefined` | Start value for the animation. Current value is used when `undefined`
| `active` | `object` | `{ duration: 400 }` | Option overrides for `active` animations (hover)
| `resize` | `object` | `{ duration: 0 }` | Option overrides for `resize` animations.
| [property] | `object` | `undefined` | Option overrides for [property].
| [collection] | `object` | [defaults...](#default-collections) | Option overrides for multiple properties, identified by `properties` array.
| [mode] | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. A custom mode can be used by passing a custom `mode` to [update](../developers/api.md#updatemode)
### Default collections
| Name | Option | Value
| ---- | ------ | -----
| `numbers` | `type` | `'number'`
| | `properties` | `['x', 'y', 'borderWidth', 'radius', 'tension']`
| `colors` | `type` | `'color'`
| | `properties` | `['borderColor', 'backgroundColor']`
Direct property configuration overrides configuration of same property in a collection.
These defaults can be overridden in `options.animation` and `dataset.animation`.
### Default modes
| Mode | Option | Value
| -----| ------ | -----
| active | duration | 400
| resize | duration | 0
| show | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }`
| | visible | `{ type: 'boolean', duration: 0 }`
| hide | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }`
| | visible | `{ type: 'boolean', easing: 'easeInExpo' }`
## Easing
Available options are:
* `'linear'`
* `'easeInQuad'`
* `'easeOutQuad'`
* `'easeInOutQuad'`
* `'easeInCubic'`
* `'easeOutCubic'`
* `'easeInOutCubic'`
* `'easeInQuart'`
* `'easeOutQuart'`
* `'easeInOutQuart'`
* `'easeInQuint'`
* `'easeOutQuint'`
* `'easeInOutQuint'`
* `'easeInSine'`
* `'easeOutSine'`
* `'easeInOutSine'`
* `'easeInExpo'`
* `'easeOutExpo'`
* `'easeInOutExpo'`
* `'easeInCirc'`
* `'easeOutCirc'`
* `'easeInOutCirc'`
* `'easeInElastic'`
* `'easeOutElastic'`
* `'easeInOutElastic'`
* `'easeInBack'`
* `'easeOutBack'`
* `'easeInOutBack'`
* `'easeInBounce'`
* `'easeOutBounce'`
* `'easeInOutBounce'`
See [Robert Penner's easing equations](http://robertpenner.com/easing/).
## Animation Callbacks
The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed following object:
```javascript
{
// Chart object
chart: Chart,
// Number of animations still in progress
currentStep: number,
// Total number of animations at the start of current animation
numSteps: number,
}
```
The following example fills a progress bar during the chart animation.
```javascript
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
}
}
}
});
```
Another example usage of these callbacks can be found on [Github](https://github.com/chartjs/Chart.js/blob/master/samples/advanced/progress-bar.html): this sample displays a progress bar showing how far along the animation is.

16
docs/axes/cartesian/category.md → docs/docs/axes/cartesian/category.md
View File

@@ -1,4 +1,6 @@
# Category Cartesian Axis
---
title: Category Axis
---
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.
@@ -35,15 +37,15 @@ let chart = new Chart(ctx, {
});
```
## Tick Configuration Options
## Configuration Options
The category scale provides the following options for configuring tick marks. They are nested in the `ticks` sub object. These options extend the [common tick configuration](README.md#tick-configuration).
These options extend the [common configuration for all cartesian axes](index.md#configuration-options).
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| Name | Type | Description
| ---- | ---- | -----------
| `min` | `string`\|`number` | | The minimum item to display. [more...](#min-max-configuration)
| `max` | `string`\|`number` | | The maximum item to display. [more...](#min-max-configuration)
| `labels` | `string[]` | - | An array of labels to display.
| `min` | <code>string&#124;number</code> | | The minimum item to display. [more...](#min-max-configuration)
| `max` | <code>string&#124;number</code> | | The maximum item to display. [more...](#min-max-configuration)
## Min Max Configuration

14
docs/axes/cartesian/README.md → docs/docs/axes/cartesian/index.md
View File

@@ -1,4 +1,6 @@
# Cartesian Axes
---
title: Cartesian Axes
---
Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default.
@@ -9,15 +11,16 @@ Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes
## Common Configuration
All of the included cartesian axes support a number of common options.
All of the included cartesian axes support a number of common options. These options extend the [common configuration available to all types of axes](../index.md#common-configuration).
| 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. [more...](#axis-position)
| `axis` | `string` | | Which type of axis this is. Possible values are: `'x'`, `'y'`. If not set, this is inferred from the first character of the ID which should be `'x'` or `'y'`.
| `min` | `number` | | User defined minimum value for the scale, overrides minimum value from data.
| `max` | `number` | | User defined maximum value for the scale, overrides maximum value from data.
| `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 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)
@@ -28,7 +31,7 @@ An axis can either be positioned at the edge of the chart, at the center of the
To position the axis at the edge of the chart, set the `position` option to one of: `'top'`, `'left'`, `'bottom'`, `'right'`.
To position the axis at the center of the chart area, set the `position` option to `'center'`. In this mode, either the `axis` option is specified or the axis ID starts with the letter 'x' or 'y'.
To position the axis with respect to a data value, set the `position` option to an object such as:
To position the axis with respect to a data value, set the `position` option to an object such as:
```javascript
{
@@ -39,12 +42,11 @@ To position the axis with respect to a data value, set the `position` option to
This will position the axis at a value of -20 on the axis with ID "x". For cartesian axes, only 1 axis may be specified.
### Tick Configuration
The following options are common to all cartesian axes but do not apply to other axes.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `min` | `number` | | User defined minimum value for the scale, overrides minimum value from data.
| `max` | `number` | | User defined maximum value for the scale, overrides maximum value from data.
| `sampleSize` | `number` | `ticks.length` | The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
| `autoSkip` | `boolean` | `true` | If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to `maxRotation` before skipping any. Turn `autoSkip` off to show all labels no matter what.
| `autoSkipPadding` | `number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled.

9
docs/axes/cartesian/linear.md → docs/docs/axes/cartesian/linear.md
View File

@@ -1,9 +1,13 @@
# Linear Cartesian Axis
---
title: Linear Axis
---
The linear scale is use to chart numerical data. It can be placed on either the x or y axis. The scatter chart type automatically configures a line chart to use one of these scales for the x axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.
## Configuration Options
These options extend the [common configuration for all cartesian axes](index.md#configuration-options).
| Name | Type | Description
| ---- | ---- | -----------
| `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
@@ -12,10 +16,11 @@ The linear scale is use to chart numerical data. It can be placed on either the
## Tick Configuration Options
The following options are provided by the linear scale. They are all located in the `ticks` sub options. These options extend the [common tick configuration](README.md#tick-configuration).
The following tick options are provided by the linear scale. They are all located in the `ticks` sub options. These options extend the [common tick configuration](index.md#tick-configuration).
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `format` | `object` | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
| `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)

17
docs/docs/axes/cartesian/logarithmic.md Normal file
View File

@@ -0,0 +1,17 @@
---
title: Logarithmic Axis
---
The logarithmic scale is use to chart numerical data. It can be placed on either the x or y axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.
## Tick Configuration Options
The following options are provided by the logarithmic scale. They are all located in the `ticks` sub options. These options extend the [common tick configuration](index.md#tick-configuration).
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `format` | `object` | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
## Internal data format
Internally logarithmic scale uses numeric data

83
docs/axes/cartesian/time.md → docs/docs/axes/cartesian/time.md
View File

@@ -1,6 +1,8 @@
# Time Cartesian Axis
---
title: Time Cartesian Axis
---
The time scale is used to display times and dates. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.
The time scale is used to display times and dates. Data are spread according to the amount of time between data points. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.
## Date Adapters
@@ -10,37 +12,26 @@ The time scale **requires** both a date library and corresponding adapter to be
### Input Data
The x-axis data points may additionally be specified via the `t` or `x` attribute when using the time scale.
```javascript
data: [{
x: new Date(),
y: 1
}, {
t: new Date(),
y: 10
}]
```
See [data structures](../../general/data-structures.md).
### Date Formats
When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See [Moment.js docs](https://momentjs.com/docs/#/parsing/) for details.
When providing data for the time scale, Chart.js uses timestamps defined as milliseconds since the epoch (midnight January 1, 1970 UTC) internally. However, Chart.js also supports all of the formats that your chosen date adapter accepts. You should use timestamps if you'd like to set `parsing: false` for better performance.
## Configuration Options
The following options are provided by the time scale. You may also set options provided by the [common tick configuration](README.md#tick-configuration).
The following options are provided by the time scale. You may also set options provided by the [common tick configuration](index.md#tick-configuration).
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `adapters.date` | `object` | `{}` | Options for adapter for external date library if that adapter needs or supports options
| `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.parser` | <code>string&#124;function</code> | | 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.tooltipFormat` | `string` | | The 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.
@@ -80,21 +71,21 @@ var chart = new Chart(ctx, {
### Display Formats
The following display formats are used to configure how different time units are formed into strings for the axis tick marks. See [Moment.js](https://momentjs.com/docs/#/displaying/format/) for the allowable format strings.
You may specify a map of display formats with a key for each unit:
Name | Default | Example
--- | --- | ---
`millisecond` | `'h:mm:ss.SSS a'` | `'11:20:01.123 AM'`
`second` | `'h:mm:ss a'` | `'11:20:01 AM'`
`minute` | `'h:mm a'` | `'11:20 AM'`
`hour` | `'hA'` | `'11AM'`
`day` | `'MMM D'` | `'Sep 4'`
`week` | `'ll'` | `'Sep 4 2015'`
`month` | `'MMM YYYY'` | `'Sep 2015'`
`quarter` | `'[Q]Q - YYYY'` | `'Q3 - 2015'`
`year` | `'YYYY'` | `'2015'`
* `millisecond`
* `second`
* `minute`
* `hour`
* `day`
* `week`
* `month`
* `quarter`
* `year`
For example, to set the display format for the `quarter` unit to show the month and year, the following config would be passed to the chart constructor.
The format string used as a value depends on the date adapter you chose to use.
For example, to set the display format for the `quarter` unit to show the month and year, the following config might be passed to the chart constructor.
```javascript
var chart = new Chart(ctx, {
@@ -115,30 +106,6 @@ var chart = new Chart(ctx, {
});
```
### Scale Distribution
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
```javascript
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
distribution: 'series'
}
}
}
});
```
When the scale is in `series` mode, the data indices are expected to be unique, sorted, and consistent across datasets.
### Scale Bounds
The `bounds` property controls the scale boundary strategy (bypassed by `min`/`max` time options).
@@ -151,14 +118,14 @@ The `bounds` property controls the scale boundary strategy (bypassed by `min`/`m
The `ticks.source` property controls the ticks generation.
* `'auto'`: generates "optimal" ticks based on scale size and time options
* `'data'`: generates ticks from data (including labels from data `{t|x|y}` objects)
* `'data'`: generates ticks from data (including labels from data `{x|y}` objects)
* `'labels'`: generates ticks from user given `labels` ONLY
### Parser
If this property is defined as a string, it is interpreted as a custom format to be used by Moment.js to parse the date.
If this property is defined as a string, it is interpreted as a custom format to be used by the date adapter to parse the date.
If this is a function, it must return a Moment.js object given the appropriate data value.
If this is a function, it must return a type which can be handled by your date adapter's `parse` method.
### Internal data format

25
docs/docs/axes/cartesian/timeseries.md Normal file
View File

@@ -0,0 +1,25 @@
---
title: Time Series Axis
---
The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant.
## Example
```javascript
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'timeseries',
}
}
}
});
```
## More details
Please see [the time scale documentation](./time.md) for all other details.

22
docs/axes/README.md → docs/docs/axes/index.md
View File

@@ -1,8 +1,10 @@
# Axes
---
title: Axes
---
Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X axis and 1 or more Y axis to map points onto the 2 dimensional canvas. These axes are known as ['cartesian axes'](./cartesian/README.md#cartesian-axes).
Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X axis and 1 or more Y axis to map points onto the 2 dimensional canvas. These axes are known as ['cartesian axes'](./cartesian/index.md#cartesian-axes).
In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/README.md#radial-axes).
In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/index.md#radial-axes).
Scales in Chart.js >v2.0 are significantly more powerful, but also different than those of v1.0.
@@ -13,17 +15,17 @@ Scales in Chart.js >v2.0 are significantly more powerful, but also different tha
## Common Configuration
The following properties are common to all axes provided by Chart.js.
The following options are common to all axes provided by Chart.js.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `display` | <code>boolean&#124;string</code> | `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)
| `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.
| `reverse` | `boolean` | `false` | Reverse the scale.
| `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.
There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process. The options are supplied at the top level of the axis options.
| Name | Arguments | Description
| ---- | --------- | -----------
@@ -44,14 +46,12 @@ There are a number of config callbacks that can be used to change parameters in
### Updating Axis Defaults
The default configuration for a scale can be easily changed using the scale service. All you need to do is to pass in a partial configuration that will be merged with the current scale default configuration to form the new default.
The default configuration for a scale can be easily changed. All you need to do is set the new options to `Chart.defaults.scales[type]`.
For example, to set the minimum value of 0 for all linear scales, you would do the following. Any linear scales created after this time would now have a minimum of 0.
```javascript
Chart.scaleService.updateScaleDefaults('linear', {
min: 0
});
Chart.defaults.scales.linear.min = 0;
```
## Creating New Axes

12
docs/axes/labelling.md → docs/docs/axes/labelling.md
View File

@@ -1,4 +1,6 @@
# Labeling Axes
---
title: Labeling Axes
---
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
@@ -11,12 +13,8 @@ The scale label configuration is nested under the scale configuration in the `sc
| `display` | `boolean` | `false` | If true, display the axis title.
| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
| `labelString` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
| `lineHeight` | <code>number&#124;string</code> | `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` | <code>number&#124;object</code> | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
| `padding` | `number`\|`object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
## Creating Custom Tick Formats

6
docs/axes/radial/README.md → docs/docs/axes/radial/index.md
View File

@@ -1,5 +1,7 @@
# Radial Axes
---
title: Radial Axes
---
Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
* [linear](./linear.md#linear-radial-axis)
* [radialLinear](./linear.md#linear-radial-axis)

81
docs/axes/radial/linear.md → docs/docs/axes/radial/linear.md
View File

@@ -1,6 +1,8 @@
# Linear Radial Axis
---
title: Linear Radial Axis
---
The linear scale is used to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation the center of the axis.
The linear radial scale is used to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation the center of the axis.
The following additional configuration options are provided by the radial linear scale.
@@ -22,17 +24,29 @@ The axis has configuration properties for ticks, angle lines (line that appear i
## 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.
The following options are provided by the linear radial scale. They are all located in the `ticks` sub options. The [common tick configuration](../styling.md#tick-configuration) options are supported by this axis.
| 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.
| `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)
| `showLabelBackdrop` | `boolean` | `true` | If true, draw a background behind the tick labels.
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `backdropColor` | `Color` | Yes | `'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.
| `format` | `object` | | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
| `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)
| `showLabelBackdrop` | `boolean` | Yes | `true` | If true, draw a background behind the tick labels.
The scriptable context has the following form:
```javascript
{
chart,
scale,
index,
tick
}
```
## Axis Range Settings
@@ -90,27 +104,38 @@ let options = {
The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options.
| 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.
| `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).
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `display` | `boolean` | | `true` | if true, angle lines are shown.
| `color` | `Color` | Yes | `'rgba(0, 0, 0, 0.1)'` | Color of angled lines.
| `lineWidth` | `number` | Yes | `1` | Width of angled lines.
| `borderDash` | `number[]` | Yes* | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | Yes | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
The `borderDash` setting only accepts a static value or a function. Passing an array of arrays is not supported.
The scriptable context has the following form:
```javascript
{
chart,
scale,
index,
label
}
```
## Point Label Options
The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `display` | `boolean` | `true` | if true, point labels are shown.
| `callback` | `function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
| `fontColor` | <code>Color&#124;Color[]</code> | `'#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` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `display` | `boolean` | | `true` | if true, point labels are shown.
| `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
| `font` | `Font` | Yes | `defaults.font` | See [Fonts](../general/fonts.md)
The scriptable context is the same as for the [Angle Line Options](#angle-line-options).
## Internal data format

60
docs/docs/axes/styling.md Normal file
View File

@@ -0,0 +1,60 @@
---
title: Styling
---
There are a number of options to allow styling an axis. There are settings to control [grid lines](#grid-line-configuration) and [ticks](#tick-configuration).
## Grid Line Configuration
The grid line configuration is nested under the scale configuration in the `gridLines` key. It defines options for the grid lines that run perpendicular to the axis.
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
| `borderColor` | [`Color`](../general/colors.md) | | | | If set, used as the color of the border line. If unset, the first `color` option is resolved and used.
| `borderWidth` | `number` | | | | If set, used as the width of the border line. If unset, the first `lineWidth` option is resolved and used.
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar chart only).
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `'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` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `lineWidth` | `number` | Yes | Yes | `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.
| `offsetGridLines` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
| `z` | `number` | | | `0` | z-index of gridline layer. Values &lt;= 0 are drawn under datasets, &gt; 0 on top.
The scriptable context has the following form:
```javascript
{
chart,
scale,
index,
tick
}
```
## 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 | Scriptable | 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 labels.
| `font` | `Font` | Yes | `defaults.font` | See [Fonts](../general/fonts.md)
| `major` | `object` | | `{}` | [Major ticks configuration](#major-tick-configuration).
| `padding` | `number` | | `0` | Sets the offset of the tick labels from the axis
| `z` | `number` | | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values &lt;= 0 are drawn under datasets, &gt; 0 on top.
The scriptable context is the same as for the [Grid Line Configuration](#grid-line-configuration).
## 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.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `enabled` | `boolean` | `false` | If true, major ticks are generated. A major tick will affect autoskipping and `major` will be defined on ticks in the scriptable options context.

10
docs/charts/area.md → docs/docs/charts/area.md
View File

@@ -1,4 +1,6 @@
# Area Charts
---
title: Area Chart
---
Both [line](line.md) and [radar](radar.md) charts support a `fill` option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale `origin`, `start` or `end` (see [filling modes](#filling-modes)).
@@ -13,9 +15,9 @@ Both [line](line.md) and [radar](radar.md) charts support a `fill` option on the
| Boundary <sup>2</sup> | `string` | `'start'`, `'end'`, `'origin'` |
| Disabled <sup>3</sup> | `boolean` | `false` |
> <sup>1</sup> dataset filling modes have been introduced in version 2.6.0<br>
> <sup>2</sup> prior version 2.6.0, boundary values was `'zero'`, `'top'`, `'bottom'` (deprecated)<br>
> <sup>3</sup> for backward compatibility, `fill: true` (default) is equivalent to `fill: 'origin'`<br>
> <sup>1</sup> dataset filling modes have been introduced in version 2.6.0<br/>
> <sup>2</sup> prior version 2.6.0, boundary values was `'zero'`, `'top'`, `'bottom'` (deprecated)<br/>
> <sup>3</sup> for backward compatibility, `fill: true` (default) is equivalent to `fill: 'origin'`<br/>
**Example**
```javascript

194
docs/charts/bar.md → docs/docs/charts/bar.mdx
View File

@@ -1,54 +1,64 @@
# Bar
---
title: Bar Chart
---
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
{% chartjs %}
{
"type": "bar",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
import { useEffect } from 'react';
export const ExampleChart0 = () => {
useEffect(() => {
const cfg = {
type: 'bar',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July'
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(201, 203, 207, 0.2)"
],
"borderColor": [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
"borderWidth": 1
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
},
"options": {
"scales": {
"y": {
"beginAtZero": true
}
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
};
new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart0/>
## Example Usage
@@ -70,13 +80,14 @@ 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'`
| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'`
| [`borderWidth`](#borderwidth) | <code>number&#124;object</code> | Yes | Yes | `0`
| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
| [`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`
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
| [`indexAxis`](#general) | `string` | `'x'` | The base axis for the dataset. Use `'y'` for horizontal bar.
| [`label`](#general) | `string` | - | - | `''`
| [`order`](#general) | `number` | - | - | `0`
| [`xAxisID`](#general) | `string` | - | - | first x axis
@@ -87,6 +98,7 @@ the color of the bars is generally set this way.
| Name | Description
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `indexAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars.
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend.
| `xAxisID` | The ID of the x axis to plot this dataset on.
@@ -116,6 +128,8 @@ that derive from a bar chart.
Options are:
* `'start'`
* `'end'`
* `'bottom'`
* `'left'`
* `'top'`
@@ -261,51 +275,59 @@ The following dataset properties are specific to stacked bar charts.
## 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.
{% chartjs %}
{
"type": "horizontalBar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(201, 203, 207, 0.2)"
],
"borderColor": [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
"borderWidth": 1
export const ExampleChart1 = () => {
useEffect(() => {
const cfg = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
axis: 'y',
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
},
"options": {
"scales": {
"x": {
"beginAtZero": true
}
},
options: {
scales: {
x: {
beginAtZero: true
}
}
}
}
};
new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart1/>
## Example
```javascript
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
type: 'bar',
data: data,
options: options
});
@@ -315,8 +337,6 @@ var myBarChart = new Chart(ctx, {
The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.
## Internal data format
`{x, y, _custom}` where `_custom` is optional object defining stacked bar properties: `{start, end, barStart, barEnd, min, max}`. `start` and `end` are the input values. Those two are repeated in `barStart` (closer to origin), `barEnd` (further from origin), `min` and `max`.

48
docs/charts/bubble.md → docs/docs/charts/bubble.mdx
View File

@@ -1,27 +1,37 @@
# Bubble Chart
---
title: Bubble Chart
---
A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
{% chartjs %}
{
"type": "bubble",
"data": {
"datasets": [{
"label": "First Dataset",
"data": [{
"x": 20,
"y": 30,
"r": 15
}, {
"x": 40,
"y": 10,
"r": 10
}],
"backgroundColor": "rgb(255, 99, 132)"
import { useEffect } from 'react';
export const ExampleChart = () => {
useEffect(() => {
const cfg = {
type: 'bubble',
data: {
datasets: [{
label: 'First Dataset',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 40,
y: 10,
r: 10
}],
backgroundColor: 'rgb(255, 99, 132)'
}]
}
}
};
new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart/>
## Example Usage

49
docs/charts/doughnut.md → docs/docs/charts/doughnut.mdx
View File

@@ -1,4 +1,7 @@
# Doughnut and Pie
---
title: Doughnut and Pie Charts
---
Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
@@ -7,27 +10,35 @@ Pie and doughnut charts are effectively the same class in Chart.js, but have one
They are also registered under two aliases in the `Chart` core. Other than their different default value, and different alias, they are exactly the same.
{% chartjs %}
{
"type": "doughnut",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
import { useEffect } from 'react';
export const ExampleChart = () => {
useEffect(() => {
const cfg = {
type: 'doughnut',
data: {
labels: [
'Red',
'Blue',
'Yellow'
],
"datasets": [{
"label": "My First Dataset",
"data": [300, 50, 100],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"
]
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
]
}]
}
}
};
new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart/>
## Example Usage

73
docs/charts/line.md → docs/docs/charts/line.mdx
View File

@@ -1,33 +1,42 @@
# Line
---
title: Line Chart
---
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
{% chartjs %}
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1
}]
},
"options": {
import { useEffect } from 'react';
}
export const ExampleChart = () => {
useEffect(() => {
const cfg = {
type: 'line',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
lineTension: 0.1
}]
},
options: {
}
};
new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart/>
## Example Usage
@@ -52,9 +61,9 @@ The line chart allows a number of properties to be specified for each dataset. T
| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
| [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
| [`fill`](#line-styling) | `boolean`\|`string` | Yes | - | `true`
| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
@@ -63,7 +72,7 @@ The line chart allows a number of properties to be specified for each dataset. T
| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
| [`label`](#general) | `string` | - | - | `''`
| [`lineTension`](#line-styling) | `number` | - | - | `0.4`
| [`lineTension`](#line-styling) | `number` | - | - | `0`
| [`order`](#general) | `number` | - | - | `0`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
@@ -75,10 +84,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) | <code>string&#124;Image</code> | Yes | Yes | `'circle'`
| [`pointStyle`](#point-styling) | `string`\|`Image` | Yes | Yes | `'circle'`
| [`showLine`](#line-styling) | `boolean` | - | - | `undefined`
| [`spanGaps`](#line-styling) | <code>boolean&#124;number</code> | - | - | `undefined`
| [`stepped`](#stepped) | <code>boolean&#124;string</code> | - | - | `false`
| [`spanGaps`](#line-styling) | `boolean`\|`number` | - | - | `undefined`
| [`stepped`](#stepped) | `boolean`\|`string` | - | - | `false`
| [`xAxisID`](#general) | `string` | - | - | first x axis
| [`yAxisID`](#general) | `string` | - | - | first y axis
@@ -171,7 +180,7 @@ 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.
| `spanGaps` | `boolean`\|`number` | `false` | 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. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.
## Default Options

86
docs/charts/mixed.md → docs/docs/charts/mixed.mdx
View File

@@ -1,32 +1,22 @@
# Mixed Chart Types
---
title: Mixed Chart Types
---
With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.
Creating a mixed chart starts with the initialization of a basic chart.
```javascript
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
```
At this point we have a standard bar chart. Now we need to convert one of the datasets to a line dataset.
When creating a mixed chart, we specify the chart type on each dataset.
```javascript
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
type: 'bar',
label: 'Bar Dataset',
data: [10, 20, 30, 40]
}, {
type: 'line'
label: 'Line Dataset',
data: [50, 50, 50, 50],
// Changes this dataset to become a line
type: 'line'
}],
labels: ['January', 'February', 'March', 'April']
},
@@ -34,40 +24,48 @@ var mixedChart = new Chart(ctx, {
});
```
At this point we have a chart rendering how we'd like. It's important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the `type` field.
At this point we have a chart rendering how we'd like. It's important to note that the default options for the charts are only considered at the dataset level and are not merged at the chart level in this case.
{% chartjs %}
{
"type": "bar",
"data": {
"labels": [
"January",
"February",
"March",
"April"
import { useEffect } from 'react';
export const ExampleChart = () => {
useEffect(() => {
const cfg = {
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)"
datasets: [{
type: 'bar',
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)"
type: 'line',
label: 'Line Dataset',
data: [50, 50, 50, 50],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
},
"options": {
"scales": {
"y": {
"beginAtZero": true
}
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
};
new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart/>
## Drawing order

56
docs/charts/polar.md → docs/docs/charts/polar.mdx
View File

@@ -1,34 +1,44 @@
# Polar Area
---
title: Polar Area Chart
---
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
{% chartjs %}
{
"type": "polarArea",
"data": {
"labels": [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
import { useEffect } from 'react';
export const ExampleChart = () => {
useEffect(() => {
const cfg = {
type: 'polarArea',
data: {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
"datasets": [{
"label": "My First Dataset",
"data": [11, 16, 7, 3, 14],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(75, 192, 192)",
"rgb(255, 205, 86)",
"rgb(201, 203, 207)",
"rgb(54, 162, 235)"
]
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
}
}
};
new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart/>
## Example Usage

97
docs/charts/radar.md → docs/docs/charts/radar.mdx
View File

@@ -1,55 +1,66 @@
# Radar
---
title: Radar Chart
---
A radar chart is a way of showing multiple data points and the variation between them.
They are often useful for comparing the points of two or more different data sets.
{% chartjs %}
{
"type": "radar",
"data": {
"labels": [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running"
import { useEffect } from 'react';
export const ExampleChart = () => {
useEffect(() => {
const cfg = {
type: 'radar',
data: {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)",
"fill": true
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)',
fill: true
}, {
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)",
"fill": true
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)',
fill: true
}]
},
"options": {
"elements": {
"line": {
"tension": 0,
"borderWidth": 3
}
},
options: {
elements: {
line: {
tension: 0,
borderWidth: 3
}
}
}
}
};
new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
{% endchartjs %}
<ExampleChart/>
## Example Usage

4
docs/charts/scatter.md → docs/docs/charts/scatter.md
View File

@@ -1,4 +1,6 @@
# Scatter Chart
---
title: Scatter Chart
---
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.

229
docs/docs/configuration/animations.mdx Normal file
View File

@@ -0,0 +1,229 @@
---
title: Animations
---
Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
import { useEffect } from 'react';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs
defaultValue='tension'
values={[
{label: 'Looping tension [property]', value: 'tension' },
{label: 'Hide and show [mode]', value: 'hideshow' },
]}
>
<TabItem value="tension">
```jsx live
function example() {
useEffect(() => {
const ctx = document.getElementById('chartjs-a0').getContext('2d');
const cfg = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Looping tension',
data: [65, 59, 80, 81, 26, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
}]
},
options: {
animation: {
tension: {
duration: 1000,
easing: 'linear',
from: 1,
to: 0,
loop: true
}
},
scales: {
y: { // defining min and max so hiding the dataset does not change scale range
min: 0,
max: 100
}
}
}
};
new Chart(ctx, cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-a0" className="chartjs"></canvas></div>;
}
```
</TabItem>
<TabItem value="hideshow">
```jsx live
function example() {
useEffect(() => {
const ctx = document.getElementById('chartjs-a1').getContext('2d');
const cfg = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Try hiding me',
data: [65, 59, 80, 81, 26, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
}]
},
options: {
animation: {
show: {
x: {
from: 0
},
y: {
from: 0
}
},
hide: {
x: {
to: 0
},
y: {
to: 0
}
}
}
}
};
new Chart(ctx, cfg);
});
return <div className="chartjs-wrapper"><canvas id="chartjs-a1" className="chartjs"></canvas></div>;
}
```
</TabItem>
</Tabs>
## Animation Configuration
The following animation options are available. The global options are defined in `Chart.defaults.animation`.
The default configuration is defined here: <a href="https://github.com/chartjs/Chart.js/blob/master/src/core/core.animations.js#L6-L55" target="_blank">core.animations.js</a>
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
| `debug` | `boolean` | `undefined` | Running animation count + FPS display in upper left corner of the chart.
| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks)
| `onComplete` | `function` | `null` | Callback called when all animations are completed. [more...](#animation-callbacks)
| `delay` | `number` | `undefined` | Delay before starting the animations.
| `loop` | `boolean` | `undefined` | If set to `true`, the animations loop endlessly.
| `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, `'color'` and `'boolean'`. Only really needed for `'color'`, because `typeof` does not get that right.
| `from` | <code>`number`&#124;`Color`&#124;`boolean`</code> | `undefined` | Start value for the animation. Current value is used when `undefined`
| `active` | `object` | `{ duration: 400 }` | Option overrides for `active` animations (hover)
| `resize` | `object` | `{ duration: 0 }` | Option overrides for `resize` animations.
| [property] | `object` | `undefined` | Option overrides for a single element `[property]`. These have precedence over `[collection]`. See **Looping tension [property]** example above.
| [collection] | `object` | [defaults...](#default-collections) | Option overrides for multiple properties, identified by `properties` array. Collection can be named whatever you like, but should not collide with a `[property]` or `[mode]`.
| [mode] | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. See **Hide and show [mode]** example above. A custom mode can be used by passing a custom `mode` to [update](../developers/api.md#updatemode)
### Default collections
| Name | Option | Value
| ---- | ------ | -----
| `numbers` | `type` | `'number'`
| | `properties` | `['x', 'y', 'borderWidth', 'radius', 'tension']`
| `colors` | `type` | `'color'`
| | `properties` | `['borderColor', 'backgroundColor']`
Direct property configuration overrides configuration of same property in a collection.
These defaults can be overridden in `options.animation` or `dataset.animation` and `tooltip.animation`. These keys are also [Scriptable](../general/options.md#scriptable-options)
:::note
These default collections are overridden by most dataset controllers.
:::
### Default modes
| Mode | Option | Value | Description
| -----| ------ | ----- | -----
| `'active'` | duration | 400 | Override default duration to 400ms for hover animations
| `'resize'` | duration | 0 | Override default duration to 0ms (= no animation) for resize
| `'show'` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }` | Colors are faded in from transparent when dataset is shown using legend / [api](../developers/api.md#showdatasetIndex).
| | visible | `{ type: 'boolean', duration: 0 }` | Dataset visiblity is immediately changed to true so the color transition from transparent is visible.
| `'hide'` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }` | Colors are faded to transparent when dataset id hidden using legend / [api](../developers/api.md#hidedatasetIndex).
| | visible | `{ type: 'boolean', easing: 'easeInExpo' }` | Visibility is changed to false very at late phase of animation
## Easing
Available options are:
* `'linear'`
* `'easeInQuad'`
* `'easeOutQuad'`
* `'easeInOutQuad'`
* `'easeInCubic'`
* `'easeOutCubic'`
* `'easeInOutCubic'`
* `'easeInQuart'`
* `'easeOutQuart'`
* `'easeInOutQuart'`
* `'easeInQuint'`
* `'easeOutQuint'`
* `'easeInOutQuint'`
* `'easeInSine'`
* `'easeOutSine'`
* `'easeInOutSine'`
* `'easeInExpo'`
* `'easeOutExpo'`
* `'easeInOutExpo'`
* `'easeInCirc'`
* `'easeOutCirc'`
* `'easeInOutCirc'`
* `'easeInElastic'`
* `'easeOutElastic'`
* `'easeInOutElastic'`
* `'easeInBack'`
* `'easeOutBack'`
* `'easeInOutBack'`
* `'easeInBounce'`
* `'easeOutBounce'`
* `'easeInOutBounce'`
See [Robert Penner's easing equations](http://robertpenner.com/easing/).
## Animation Callbacks
The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed following object:
```javascript
{
// Chart object
chart: Chart,
// Number of animations still in progress
currentStep: number,
// Total number of animations at the start of current animation
numSteps: number,
}
```
The following example fills a progress bar during the chart animation.
```javascript
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
}
}
}
});
```
Another example usage of these callbacks can be found on [Github](https://github.com/chartjs/Chart.js/blob/master/samples/advanced/progress-bar.html): this sample displays a progress bar showing how far along the animation is.

24
docs/configuration/elements.md → docs/docs/configuration/elements.md
View File

@@ -1,4 +1,6 @@
# Elements
---
title: Elements
---
While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[rectangles](#rectangle-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
@@ -19,11 +21,11 @@ Global point options: `Chart.defaults.elements.point`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `radius` | `number` | `3` | Point radius.
| [`pointStyle`](#point-styles) | <code>string&#124;Image</code> | `'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.
| `backgroundColor` | `Color` | `Chart.defaults.color` | Point fill color.
| `borderWidth` | `number` | `1` | Point stroke width.
| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Point stroke color.
| `borderColor` | `Color` | `Chart.defaults.color` | 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.
@@ -54,16 +56,16 @@ Global line options: `Chart.defaults.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` | `Chart.defaults.color` | Line fill color.
| `borderWidth` | `number` | `3` | Line stroke width.
| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Line stroke color.
| `borderColor` | `Color` | `Chart.defaults.color` | 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.
| `cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. [See more...](../charts/line.md#cubicinterpolationmode)
| `fill` | <code>boolean&#124;string</code> | `true` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes).
| `fill` | `boolean`\|`string` | `true` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes).
| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
## Rectangle Configuration
@@ -74,10 +76,10 @@ Global rectangle options: `Chart.defaults.elements.rectangle`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar fill color.
| `backgroundColor` | `Color` | `Chart.defaults.color` | Bar fill color.
| `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'`.
| `borderColor` | `Color` | `Chart.defaults.color` | Bar stroke color.
| `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'bottom'`, `'left'`, `'top'` or `'right'`.
## Arc Configuration
@@ -88,7 +90,7 @@ Global arc options: `Chart.defaults.elements.arc`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Arc fill color.
| `backgroundColor` | `Color` | `Chart.defaults.color` | Arc fill color.
| `borderAlign` | `string` | `'center'` | Arc stroke alignment.
| `borderColor` | `Color` | `'#fff'` | Arc stroke color.
| `borderWidth`| `number` | `2` | Arc stroke width.

4
docs/configuration/README.md → docs/docs/configuration/index.md
View File

@@ -1,4 +1,6 @@
# Configuration
---
title: Configuration
---
The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc.

4
docs/configuration/layout.md → docs/docs/configuration/layout.md
View File

@@ -1,4 +1,6 @@
# Layout Configuration
---
title: Layout
---
The layout configuration is passed into the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.layout`.

54
docs/configuration/legend.md → docs/docs/configuration/legend.md
View File

@@ -1,10 +1,12 @@
# Legend Configuration
---
title: Legend
---
The chart legend displays data about the datasets that are appearing on the chart.
## Configuration options
The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.legend`.
The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.plugins.legend`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
@@ -12,13 +14,13 @@ The legend configuration is passed into the `options.legend` namespace. The glob
| `position` | `string` | `'top'` | Position of the legend. [more...](#position)
| `align` | `string` | `'center'` | Alignment of the legend. [more...](#align)
| `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.
| `onLeave` | `function` | | A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item.
| `onClick` | `function` | | A callback that is called when a click event is registered on a label item. Arguments: `[event, legendItem, legend]`.
| `onHover` | `function` | | A callback that is called when a 'mousemove' event is registered on top of a label item. Arguments: `[event, legendItem, legend]`.
| `onLeave` | `function` | | A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. Arguments: `[event, legendItem, legend]`.
| `reverse` | `boolean` | `false` | Legend will show datasets in reverse order.
| `labels` | `object` | | See the [Legend Label Configuration](#legend-label-configuration) section below.
| `rtl` | `boolean` | | `true` for rendering the legends from right to left.
| `textDirection` | `string` | canvas' default | This will force the text direction `'rtl' or `'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas
| `textDirection` | `string` | canvas' default | This will force the text direction `'rtl'` or `'ltr'` on the canvas for rendering the legend, regardless of the css specified on the canvas
| `title` | `object` | | See the [Legend Title Configuration](#legend-title-configuration) section below.
## Position
@@ -47,14 +49,12 @@ 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.
| `fontColor` | `Color` | `'#666'` | Color of text.
| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family of legend text.
| `boxHeight` | `number` | fontSize | Height of the coloured box.
| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
| `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 the mimimum value between boxWidth and fontSize).
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the mimimum value between boxWidth and font.size).
## Legend Title Configuration
@@ -63,11 +63,7 @@ The legend title configuration is nested below the legend configuration using th
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `display` | `boolean` | `false` | Is the legend title displayed.
| `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.
| `lineHeight` | `number` | | Line height of the text. If unset, is computed from the font size.
| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
| `padding` | <code>number&#124;object</code> | `0` | Padding around the title. If specified as a number, it applies evenly to all sides.
| `text` | `string` | | The string title.
@@ -138,31 +134,31 @@ It can be common to want to trigger different behaviour when clicking an item in
The default legend click handler is:
```javascript
function(e, legendItem) {
var index = legendItem.datasetIndex;
var ci = this.chart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
function(e, legendItem, legend) {
const index = legendItem.datasetIndex;
const ci = legend.chart;
if (ci.isDatasetVisible(index)) {
ci.hide(index);
legendItem.hidden = true;
} else {
ci.show(index);
legendItem.hidden = false;
}
}
```
Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.
```javascript
var defaultLegendClickHandler = Chart.defaults.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
var defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
var newLegendClickHandler = function (e, legendItem, legend) {
var index = legendItem.datasetIndex;
if (index > 1) {
// Do the original logic
defaultLegendClickHandler(e, legendItem);
} else {
let ci = this.chart;
let ci = legend.chart;
[
ci.getDatasetMeta(0),
ci.getDatasetMeta(1)

15
docs/configuration/title.md → docs/docs/configuration/title.md
View File

@@ -1,25 +1,26 @@
# Title
---
title: Title
---
The chart title defines text to draw at the top of the chart.
## Title Configuration
The title configuration is passed into the `options.title` namespace. The global options for the chart title is defined in `Chart.defaults.title`.
The title configuration is passed into the `options.title` namespace. The global options for the chart title is defined in `Chart.defaults.plugins.title`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `align` | `string` | `'center'` | Alignment of the title. [more...](#align)
| `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.
| `font` | `Font` | `defaults.font` | See [Fonts](../general/fonts.md)
| `padding` | <code>number&#124;{top: number, bottom: number}</code> | `10` | Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.
| `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
| `text` | <code>string&#124;string[]</code> | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
### Position
Possible title position values are:
* `'top'`
* `'left'`
* `'bottom'`

114
docs/configuration/tooltip.md → docs/docs/configuration/tooltip.md
View File

@@ -1,8 +1,10 @@
# Tooltips
---
title: Tooltip
---
## Tooltip Configuration
The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.tooltips`.
The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
@@ -15,23 +17,14 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
| `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.
| `titleFontColor` | `Color` | `'#fff'` | Title font color.
| `titleFont` | `Font` | `{style: 'bold', color: '#fff'}` | See [Fonts](../general/fonts.md).
| `titleAlign` | `string` | `'left'` | Horizontal alignment of the title text lines. [more...](#alignment)
| `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.
| `bodyFont` | `Font` | `{color: '#fff'}` | See [Fonts](../general/fonts.md).
| `bodyAlign` | `string` | `'left'` | Horizontal alignment of the body text lines. [more...](#alignment)
| `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.
| `footerFont` | `Font` | `{style: 'bold', color: '#fff'}` | See [Fonts](../general/fonts.md).
| `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#alignment)
| `footerSpacing` | `number` | `2` | Spacing to add to top and bottom of each footer line.
| `footerMarginTop` | `number` | `6` | Margin to add before drawing the footer.
@@ -42,8 +35,8 @@ 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.
| `boxWidth` | `number` | `bodyFontSize` | Width of the color box if displayColors is true.
| `boxHeight` | `number` | `bodyFontSize` | Height of the color box if displayColors is true.
| `boxWidth` | `number` | `bodyFont.size` | Width of the color box if displayColors is true.
| `boxHeight` | `number` | `bodyFont.size` | Height of the color box if displayColors is true.
| `borderColor` | `Color` | `'rgba(0, 0, 0, 0)'` | Color of the border.
| `borderWidth` | `number` | `0` | Size of the border.
| `rtl` | `boolean` | | `true` for rendering the legends from right to left.
@@ -52,6 +45,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
### Position Modes
Possible modes are:
* `'average'`
* `'nearest'`
@@ -60,6 +54,7 @@ Possible modes are:
New modes can be defined by adding functions to the `Chart.Tooltip.positioners` map.
Example:
```javascript
/**
* Custom positioner
@@ -68,7 +63,7 @@ Example:
* @param eventPosition {Point} the position of the event in canvas coordinates
* @returns {Point} the tooltip position
*/
const tooltipPlugin = Chart.plugins.getAll().find(p => p.id === 'tooltip');
const tooltipPlugin = Chart.registry.getPlugin('tooltip');
tooltipPlugin.positioners.custom = function(elements, eventPosition) {
/** @type {Tooltip} */
var tooltip = this;
@@ -98,13 +93,13 @@ Allows sorting of [tooltip items](#tooltip-item-interface). Must implement at mi
### Filter Callback
Allows filtering of [tooltip items](#tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.filter](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). This function can also accept a second parameter that is the data object passed to the chart.
Allows filtering of [tooltip items](#tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.filter](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). This function can also accept a fourth parameter that is the data object passed to the chart.
## Tooltip Callbacks
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 `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 context](#tooltip-item-interface). 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
| ---- | --------- | -----------
@@ -133,14 +128,14 @@ var chart = new Chart(ctx, {
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
label: function(context) {
var label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (!helpers.isNullOrUndef(tooltipItem.value)) {
label += '$' + tooltipItem.value;
if (!isNaN(context.dataPoint.y)) {
label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.dataPoint.y);
}
return label;
}
@@ -153,6 +148,7 @@ var chart = new Chart(ctx, {
### Label Color Callback
For example, to return a red box for each item in the tooltip you could do:
```javascript
var chart = new Chart(ctx, {
type: 'line',
@@ -160,13 +156,13 @@ var chart = new Chart(ctx, {
options: {
tooltips: {
callbacks: {
labelColor: function(tooltipItem, chart) {
labelColor: function(context) {
return {
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(255, 0, 0)'
};
},
labelTextColor: function(tooltipItem, chart) {
labelTextColor: function(context) {
return '#543453';
}
}
@@ -176,29 +172,41 @@ var chart = new Chart(ctx, {
```
### Tooltip Item Interface
### Tooltip Item Context
The tooltip items passed to the tooltip callbacks implement the following interface.
```javascript
{
// The chart the tooltip is being shown on
chart: Chart
// Label for the tooltip
label: string,
// Value for the tooltip
value: string,
// Parsed data values for the given `dataIndex` and `datasetIndex`
dataPoint: object,
// Formatted value for the tooltip
formattedValue: string,
// The dataset the item comes from
dataset: object
// Index of the dataset the item comes from
datasetIndex: number,
// Index of this data item in the dataset
index: number
dataIndex: number,
// The chart element (point, arc, bar, etc.) for this tooltip item
element: Element,
}
```
## External (Custom) Tooltips
Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an oncanvas one. You can enable custom tooltips in the global or chart configuration like so:
Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The `custom` option takes a function which is passed a context parameter containing the `chart` and `tooltip`. You can enable custom tooltips in the global or chart configuration like so:
```javascript
var myPieChart = new Chart(ctx, {
@@ -209,7 +217,7 @@ var myPieChart = new Chart(ctx, {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel) {
custom: function(context) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
@@ -222,6 +230,7 @@ var myPieChart = new Chart(ctx, {
}
// Hide if no tooltip
var tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
@@ -265,17 +274,14 @@ var myPieChart = new Chart(ctx, {
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
var position = context.chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.font = tooltipModel.bodyFont.string;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
@@ -287,6 +293,7 @@ var myPieChart = new Chart(ctx, {
See [samples](https://www.chartjs.org/samples/) for examples on how to get started with custom tooltips.
## Tooltip Model
The tooltip model contains parameters that can be used to render the tooltip.
```javascript
@@ -295,8 +302,6 @@ The tooltip model contains parameters that can be used to render the tooltip.
dataPoints: TooltipItem[],
// Positioning
xPadding: number,
yPadding: number,
xAlign: string,
yAlign: string,
@@ -320,40 +325,14 @@ The tooltip model contains parameters that can be used to render the tooltip.
beforeBody: string[],
// line of text that appear after the body and before the footer
afterBody: string[],
bodyFontColor: Color,
_bodyFontFamily: string,
_bodyFontStyle: string,
_bodyAlign: string,
bodyFontSize: number,
bodySpacing: number,
// Title
// lines of text that form the title
title: string[],
titleFontColor: Color,
_titleFontFamily: string,
_titleFontStyle: string,
titleFontSize: number,
_titleAlign: string,
titleSpacing: number,
titleMarginBottom: number,
// Footer
// lines of text that form the footer
footer: string[],
footerFontColor: Color,
_footerFontFamily: string,
_footerFontStyle: string,
footerFontSize: number,
_footerAlign: string,
footerSpacing: number,
footerMarginTop: number,
// Appearance
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
labelColors: Color[],
@@ -361,9 +340,8 @@ The tooltip model contains parameters that can be used to render the tooltip.
// 0 opacity is a hidden tooltip
opacity: number,
multiKeyBackground: Color,
displayColors: boolean,
borderColor: Color,
borderWidth: number
// tooltip options
options : Object
}
```

19
docs/developers/api.md → docs/docs/developers/api.md
View File

@@ -1,4 +1,6 @@
# Chart Prototype Methods
---
title: API
---
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.
@@ -28,7 +30,7 @@ myLineChart.update(); // Calling update now animates the position of March from
> **Note:** replacing the data reference (e.g. `myLineChart.data = {datasets: [...]}` only works starting **version 2.6**. Prior that, replacing the entire data object could be achieved with the following workaround: `myLineChart.config.data = {datasets: [...]}`.
A `mode` string can be provided to indicate what should be updated and what animation configuration should be used. Core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`. `'none'` is also a supported mode for skipping animations for single update. Please see [animations](../configuration/animations.md) docs for more details.
A `mode` string can be provided to indicate what should be updated and what animation configuration should be used. Core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`. `'none'` is also a supported mode for skipping animations for single update. Please see [animations](../configuration/animations.mdx) docs for more details.
Example:
@@ -157,15 +159,6 @@ chart.setDatasetVisibility(1, false); // hides dataset at index 1
chart.update(); // chart now renders with dataset hidden
```
## setDataVisibility(datasetIndex, index, visibility)
Like [setDatasetVisibility](#setdatasetvisibility) except that it hides only a single item in the dataset. **Note** this only applies to polar area and doughnut charts at the moment. It will have no affect on line, bar, radar, or scatter charts.
```javascript
chart.setDataVisibility(0, 2, false); // hides the item in dataset 0, at index 2
chart.update(); // chart now renders with item hidden
```
## toggleDataVisibility(index)
Toggles the visibility of an item in all datasets. A dataset needs to explicitly support this feature for it to have an effect. From internal chart types, doughnut / pie and polar area use this.
@@ -185,7 +178,7 @@ var visible = chart.getDataVisibility(2);
## hide(datasetIndex)
Sets the visibility for the given dataset to false. Updates the chart and animates the dataset with `'hide'` mode. This animation can be configured under the `hide` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
Sets the visibility for the given dataset to false. Updates the chart and animates the dataset with `'hide'` mode. This animation can be configured under the `hide` key in animation options. Please see [animations](../configuration/animations.mdx) docs for more details.
```javascript
chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
@@ -193,7 +186,7 @@ chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
## show(datasetIndex)
Sets the visibility for the given dataset to true. Updates the chart and animates the dataset with `'show'` mode. This animation can be configured under the `show` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
Sets the visibility for the given dataset to true. Updates the chart and animates the dataset with `'show'` mode. This animation can be configured under the `show` key in animation options. Please see [animations](../configuration/animations.mdx) docs for more details.
```javascript
chart.show(1); // shows dataset at index 1 and does 'show' animation.

34
docs/developers/axes.md → docs/docs/developers/axes.md
View File

@@ -1,21 +1,45 @@
# New Axes
---
title: New Axes
---
Axes in Chart.js can be individually extended. Axes should always derive from `Chart.Scale` but this is not a mandatory requirement.
```javascript
let MyScale = Chart.Scale.extend({
class MyScale extends Chart.Scale {
/* extensions ... */
});
}
MyScale.id = 'myScale';
MyScale.defaults = defaultConfigObject;
// Or in classic style
/*
function MyScale() {
Chart.Scale.call(this, arguments);
// constructor stuff
}
MyScale.prototype = Object.create(Chart.Scale.prototype);
MyScale.prototype.constructor = MyScale;
MyScale.prototype.draw = function(ctx) {
Chart.Scale.prototype.draw.call(this, arguments);
// ...
}
MyScale.id = 'myScale';
MyScale.defaults = defaultConfigObject;
*/
// MyScale is now derived from Chart.Scale
```
Once you have created your scale class, you need to register it with the global chart object so that it can be used. A default config for the scale may be provided when registering the constructor. The first parameter to the register function is a string key that is used later to identify which scale type to use for a chart.
```javascript
Chart.scaleService.registerScale(MyScale);
Chart.register(MyScale);
// If the scale is created in classical way, the prototype can not be used to detect what
// you are trying to register - so you need to be explicit:
// Chart.registry.addScales(MyScale);
```
To use the new scale, simply pass in the string key to the config when creating a chart.
@@ -64,6 +88,7 @@ Scale instances are given the following properties during the fitting process.
```
## Scale Interface
To work with Chart.js, custom scale types must implement the following interface.
```javascript
@@ -118,6 +143,7 @@ Optionally, the following methods may also be overwritten, but an implementation
```
The Core.Scale base class also has some utility functions that you may find useful.
```javascript
{
// Returns true if the scale instance is horizontal

82
docs/developers/charts.md → docs/docs/developers/charts.md
View File

@@ -1,12 +1,15 @@
# New Charts
---
title: New Charts
---
Chart.js 2.0 introduces the concept of controllers for each dataset. Like scales, new controllers can be written as needed.
```javascript
Chart.controllers.MyType = Chart.DatasetController.extend({
class MyType extends Chart.DatasetController {
});
}
Chart.controllers.MyType = MyType;
// Now we can create a new instance of our chart, using the Chart.js API
new Chart(ctx, {
@@ -26,12 +29,8 @@ Dataset controllers must implement the following interface.
// Create elements for each piece of data in the dataset. Store elements in an array on the dataset as dataset.metaData
addElements: function() {},
// Create a single element for the data at the given index and reset its state
addElementAndReset: function(index) {},
// Draw the representation of the dataset
// @param ease : if specified, this number represents how far to transition elements. See the implementation of draw() in any of the provided controllers to see how this should be used
draw: function(ease) {},
draw: function() {},
// Remove hover styling from the given element
removeHoverStyle: function(element, datasetIndex, index) {},
@@ -40,16 +39,17 @@ Dataset controllers must implement the following interface.
setHoverStyle: function(element, datasetIndex, index) {},
// Update the elements in response to new data
// @param reset : if true, put the elements into a reset state so they can animate to their final values
update: function(reset) {}
// @param mode : update mode, core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`
update: function(mode) {}
}
```
The following methods may optionally be overridden by derived dataset controllers.
```javascript
{
// Initializes the controller
initialize: function(chart, datasetIndex) {},
initialize: function() {},
// Ensures that the dataset represented by this controller is linked to a scale. Overridden to helpers.noop in the polar area and doughnut controllers as these
// chart types using a single scale
@@ -65,9 +65,9 @@ The following methods may optionally be overridden by derived dataset controller
Extending or replacing an existing controller type is easy. Simply replace the constructor for one of the built in types with your own.
The built in controller types are:
* `Chart.controllers.line`
* `Chart.controllers.bar`
* `Chart.controllers.horizontalBar`
* `Chart.controllers.radar`
* `Chart.controllers.doughnut`
* `Chart.controllers.polarArea`
@@ -76,16 +76,10 @@ The built in controller types are:
For example, to derive a new chart type that extends from a bubble chart, you would do the following.
```javascript
// Sets the default config for 'derivedBubble' to be the same as the bubble defaults.
// We look for the defaults by doing Chart.defaults[chartType]
// It looks like a bug exists when the defaults don't exist
Chart.defaults.derivedBubble = Chart.defaults.bubble;
// I think the recommend using Chart.controllers.bubble.extend({ extensions here });
var custom = Chart.controllers.bubble.extend({
draw: function(ease) {
class Custom extends Chart.controllers.bubble {
draw() {
// Call super method first
Chart.controllers.bubble.prototype.draw.call(this, ease);
super.draw(arguments);
// Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
var meta = this.getMeta();
@@ -100,10 +94,11 @@ var custom = Chart.controllers.bubble.extend({
ctx.restore();
}
});
Custom.id = 'derivedBubble';
Custom.defaults = Chart.defaults.bubble;
// Stores the controller so that the chart initialization routine can look it up with
// Chart.controllers[type]
Chart.controllers.derivedBubble = custom;
// Stores the controller so that the chart initialization routine can look it up
Chart.register(Custom);
// Now we can create and use our new chart type
new Chart(ctx, {
@@ -113,5 +108,40 @@ new Chart(ctx, {
});
```
### Bar Controller
The bar controller has a special property that you should be aware of. To correctly calculate the width of a bar, the controller must determine the number of datasets that map to bars. To do this, the bar controller attaches a property `bar` to the dataset during initialization. If you are creating a replacement or updated bar controller, you should do the same. This will ensure that charts with regular bars and your new derived bars will work seamlessly.
Same example in classic style
```javascript
function Custom() {
Chart.controllers.bubble.apply(this, arguments);
// constructor stuff
}
Custom.prototype = Object.create(Chart.controllers.bubble.prototype);
Custom.prototype.constructor = Custom;
Custom.prototype.draw = function(ctx) {
Chart.controllers.bubble.prototype.draw.apply(this, arguments);
var meta = this.getMeta();
var pt0 = meta.data[0];
var radius = pt0.radius;
var ctx = this.chart.chart.ctx;
ctx.save();
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.strokeRect(pt0.x - radius, pt0.y - radius, 2 * radius, 2 * radius);
ctx.restore();}
}
Custom.id = 'derivedBubble';
Custom.defaults = Chart.defaults.bubble;
Chart.register(Custom);
// Now we can create and use our new chart type
new Chart(ctx, {
type: 'derivedBubble',
data: data,
options: options
});
```

47
docs/developers/contributing.md → docs/docs/developers/contributing.md
View File

@@ -1,10 +1,12 @@
# Contributing
---
title: Contributing
---
New contributions to the library are welcome, but we ask that you please follow these guidelines:
- Before opening a PR for major additions or changes, please discuss the expected API and/or implementation by [filing an issue](https://github.com/chartjs/Chart.js/issues) or asking about it in the [Chart.js Slack](https://chartjs-slack.herokuapp.com/) #dev channel. This will save you development time by getting feedback upfront and make review faster by giving the maintainers more context and details.
- Consider whether your changes are useful for all users, or if creating a Chart.js [plugin](plugins.md) would be more appropriate.
- Check that your code will pass tests and `eslint` code standards. `gulp test` will run both the linter and tests for you.
- Check that your code will pass tests and `eslint` code standards. `npm test` will run both the linter and tests for you.
- Add unit tests and document new functionality (in the `test/` and `docs/` directories respectively).
- Avoid breaking changes unless there is an upcoming major release, which are infrequent. We encourage people to write plugins for most new advanced features, and care a lot about backwards compatibility.
- We strongly prefer new methods to be added as private whenever possible. A method can be made private either by making a top-level `function` outside of a class or by prefixing it with `_` and adding `@private` JSDoc if inside a class. Public APIs take considerable time to review and become locked once implemented as we have limited ability to change them without breaking backwards compatibility. Private APIs allow the flexibility to address unforeseen cases.
@@ -15,33 +17,35 @@ Active committers and contributors are invited to introduce yourself and request
## Building and Testing
Chart.js uses <a href="https://gulpjs.com/" target="_blank">gulp</a> to build the library into a single JavaScript file.
Firstly, we need to ensure development dependencies are installed. With node and npm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following:
```bash
> npm install
> npm install -g gulp-cli
```
This will install the local development dependencies for Chart.js, along with a CLI for the JavaScript task runner <a href="https://gulpjs.com/" target="_blank">gulp</a>.
This will install the local development dependencies for Chart.js.
The following commands are now available from the repository root:
```bash
> gulp build // build dist files in ./dist
> gulp build --watch // build and watch for changes
> gulp unittest // run tests from ./test/specs
> gulp unittest --watch // run tests and watch for source changes
> gulp unittest --coverage // run tests and generate coverage reports in ./coverage
> gulp lint // perform code linting (ESLint)
> gulp test // perform code linting and run unit tests
> gulp test --browsers ... // test with specified browsers (comma-separated)
> gulp docs // build the documentation in ./dist/docs
> gulp docs --watch // starts the gitbook live reloaded server
> npm run build // build dist files in ./dist
> npm run autobuild // build and watch for source changes
> npm run dev // run tests and watch for source and test changes
> npm run lint // perform code linting (ESLint, tsc)
> npm test // perform code linting and run unit tests with coverage
```
More information can be found in [gulpfile.js](https://github.com/chartjs/Chart.js/blob/master/gulpfile.js).
`npm run dev` and `npm test` can be appended with a string that is used to match the spec filenames. For example: `npm run dev plugins` will start karma in watch mode for `test/specs/**/*plugin*.js`.
### Documentation
We use [Docusaurus v2](https://v2.docusaurus.io/docs/introduction) to manage the docs which are contained as Markdown files in the docs directory. You can run the doc server locally using the commands provided by Docusaurus:
```bash
> cd docs
> npm install
> npm run start
```
### Image-Based Tests
@@ -50,10 +54,11 @@ Some display-related functionality is difficult to test via typical Jasmine unit
Generated charts in image-based tests should be **as minimal as possible** and focus only on the tested feature to prevent failure if another feature breaks (e.g. disable the title and legend when testing scales).
You can create a new image-based test by following the steps below:
- Create a JS file ([example](https://github.com/chartjs/Chart.js/blob/f7b671006a86201808402c3b6fe2054fe834fd4a/test/fixtures/controller.bubble/radius-scriptable.js)) or JSON file ([example](https://github.com/chartjs/Chart.js/blob/4b421a50bfa17f73ac7aa8db7d077e674dbc148d/test/fixtures/plugin.filler/fill-line-dataset.json)) that defines chart config and generation options.
- Add this file in `test/fixtures/{spec.name}/{feature-name}.json`.
- Add a [describe line](https://github.com/chartjs/Chart.js/blob/4b421a50bfa17f73ac7aa8db7d077e674dbc148d/test/specs/plugin.filler.tests.js#L10) to the beginning of `test/specs/{spec.name}.tests.js` if it doesn't exist yet.
- Run `gulp unittest --watch --inputs=test/specs/{spec.name}.tests.js`.
- Run `npm run dev`.
- Click the *"Debug"* button (top/right): a test should fail with the associated canvas visible.
- Right click on the chart and *"Save image as..."* `test/fixtures/{spec.name}/{feature-name}.png` making sure not to activate the tooltip or any hover functionality
- Refresh the browser page (`CTRL+R`): test should now pass
@@ -71,8 +76,8 @@ Well structured, detailed bug reports are hugely valuable for the project.
Guidelines for reporting bugs:
- Check the issue search to see if it has already been reported
- Isolate the problem to a simple test case
- Please include a demonstration of the bug on a website such as [JS Bin](https://jsbin.com/), [JS Fiddle](https://jsfiddle.net/), or [Codepen](https://codepen.io/pen/). ([Template](https://codepen.io/pen?template=JXVYzq)). If filing a bug against `master`, you may reference the latest code via https://www.chartjs.org/dist/master/Chart.min.js (changing the filename to point at the file you need as appropriate). Do not rely on these files for production purposes as they may be removed at any time.
- Check the issue search to see if it has already been reported
- Isolate the problem to a simple test case
- Please include a demonstration of the bug on a website such as [JS Bin](https://jsbin.com/), [JS Fiddle](https://jsfiddle.net/), or [Codepen](https://codepen.io/pen/). ([Template](https://codepen.io/pen?template=JXVYzq)). If filing a bug against `master`, you may reference the latest code via <https://www.chartjs.org/dist/master/Chart.min.js> (changing the filename to point at the file you need as appropriate). Do not rely on these files for production purposes as they may be removed at any time.
Please provide any additional details associated with the bug, if it's browser or screen density specific, or only happens with a certain configuration or data.

13
docs/developers/README.md → docs/docs/developers/index.md
View File

@@ -1,4 +1,6 @@
# Developers
---
title: Developers
---
Developer features allow extending and enhancing Chart.js in many different ways.
@@ -16,8 +18,6 @@ Latest builds are available for testing at:
- https://www.chartjs.org/dist/master/Chart.js
- https://www.chartjs.org/dist/master/Chart.min.js
> Note: Development builds are currently only available via HTTP, so in order to include them in [JSFiddle](https://jsfiddle.net) or [CodePen](https://codepen.io), you need to access these tools via HTTP as well.
**WARNING: Development builds MUST not be used for production purposes or as replacement for CDN.**
## Browser support
@@ -35,12 +35,13 @@ Thanks to [BrowserStack](https://browserstack.com) for allowing our team to test
## Previous versions
To migrate from version 3 to version 2, please see [the v3 migration guide](../getting-started/v3-migration).
Version 2 has a completely different API than earlier versions.
Most earlier version options have current equivalents or are the same.
Please use the documentation that is available on [chartjs.org](https://www.chartjs.org/docs/) for the current version of Chart.js.
Please note - documentation for previous versions are available on the GitHub repo.
Please note - documentation for previous versions are available online or in the GitHub repo.
- [2.9.3 Documentation](https://www.chartjs.org/docs/2.9.3/)
- [1.x Documentation](https://github.com/chartjs/Chart.js/tree/v1.1.1/docs)

4
docs/developers/plugins.md → docs/docs/developers/plugins.md
View File

@@ -1,4 +1,6 @@
# Plugins
---
title: Plugins
---
Plugins are the most efficient way to customize or change the default behavior of a chart. They have been introduced at [version 2.1.0](https://github.com/chartjs/Chart.js/releases/tag/2.1.0) (global plugins only) and extended at [version 2.5.0](https://github.com/chartjs/Chart.js/releases/tag/v2.5.0) (per chart plugins and options).

4
docs/developers/updates.md → docs/docs/developers/updates.md
View File

@@ -1,4 +1,6 @@
# Updating Charts
---
title: Updating Charts
---
It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate to the new data values and options.

4
docs/general/accessibility.md → docs/docs/general/accessibility.md
View File

@@ -1,4 +1,6 @@
# Accessible Charts
---
title: Accessibility
---
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.

4
docs/general/colors.md → docs/docs/general/colors.md
View File

@@ -1,4 +1,6 @@
# Colors
---
title: 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.color`. It is initially set to `'rgba(0, 0, 0, 0.1)'`.

52
docs/general/data-structures.md → docs/docs/general/data-structures.md
View File

@@ -1,4 +1,6 @@
# Data structures
---
title: Data structures
---
The `data` property of a dataset can be passed in various formats. By default, that `data` is parsed using the associated chart type and scales.
@@ -27,6 +29,54 @@ data: [{x:'Sales', y:20}, {x:'Revenue', y:10}]
This is also the internal format used for parsed data. In this mode, parsing can be disabled by specifying `parsing: false` at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.
## Object[] using custom properties
```javascript
type: 'bar',
data: {
datasets: [{
data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
}]
},
options: {
parsing: {
xAxisKey: 'id',
yAxisKey: 'nested.value'
}
}
```
### `parsing` can also be specified per dataset
```javascript
const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const cfg = {
type: 'bar',
data: {
labels: ['Jan', 'Feb'],
datasets: [{
label: 'Net sales',
data: data,
parsing: {
yAxisKey: 'net'
}
}, {
label: 'Cost of goods sold',
data: data,
parsing: {
yAxisKey: 'cogs'
}
}, {
label: 'Gross margin',
data: data,
parsing: {
yAxisKey: 'gm'
}
}]
},
};
```
## Object
```javascript

4
docs/general/device-pixel-ratio.md → docs/docs/general/device-pixel-ratio.md
View File

@@ -1,4 +1,6 @@
# Device Pixel Ratio
---
title: Device Pixel Ratio
---
By default the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio (e.g. Retina displays).

40
docs/docs/general/fonts.md Normal file
View File

@@ -0,0 +1,40 @@
---
title: Fonts
---
There are special global settings that can change all of the fonts on the chart. These options are in `Chart.defaults.font`. The global font settings only apply when more specific options are not included in the config.
For example, in this chart the text will all be red except for the labels in the legend.
```javascript
Chart.defaults.font.color = 'red';
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
labels: {
// This more specific font property overrides the global property
font: {
color: 'black'
}
}
}
}
});
```
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `color` | `Color` | `'#666'` | Default font color for all text.
| `family` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text, follows CSS font-family options.
| `size` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
| `style` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
| `weight` | `string` | `undefined` | Default font weight (boldness). (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)).
| `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| `lineWidth` | `number` | `0` | Stroke width around the text. Currently only supported by [ticks](../axes/styling.md#tick-configuration).
| `strokeStyle` | `string` | `` | The color of the stroke around the text. Currently only supported by [ticks](../axes/styling.md#tick-configuration).
## Missing Fonts
If a font is specified for a chart that does exist on the system, the browser will not apply the font when it is set. If you notice odd fonts appearing in your charts, check that the font you are applying exists on your system. See [issue 3318](https://github.com/chartjs/Chart.js/issues/3318) for more details.

9
docs/general/interactions/events.md → docs/docs/general/interactions/events.md
View File

@@ -1,11 +1,14 @@
# Events
---
title: Events
---
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.
| `onHover` | `function` | `null` | Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart.
| `onClick` | `function` | `null` | Called if the event is of type `'mouseup'` or `'click'`. Passed the event, an array of active elements, and the chart.
## Event Option
For example, to have the chart only respond to click events, you could do:

4
docs/general/interactions/README.md → docs/docs/general/interactions/index.md
View File

@@ -1,4 +1,6 @@
# Interactions
---
title: Interactions
---
The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.hover`. To configure which events trigger chart interactions, see [events](./events.md#events).

9
docs/general/interactions/modes.md → docs/docs/general/interactions/modes.md
View File

@@ -1,10 +1,13 @@
# Interaction Modes
---
title: Interaction Modes
---
When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
The modes are detailed below and how they behave in conjunction with the `intersect` setting.
## point
Finds all of the items that intersect the point.
```javascript
@@ -20,6 +23,7 @@ var chart = new Chart(ctx, {
```
## nearest
Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the `axis` setting to define which directions are used in distance calculation. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
```javascript
@@ -35,6 +39,7 @@ var chart = new Chart(ctx, {
```
## index
Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
```javascript
@@ -53,7 +58,7 @@ To use index mode in a chart like the horizontal bar chart, where we search alon
```javascript
var chart = new Chart(ctx, {
type: 'horizontalBar',
type: 'bar',
data: data,
options: {
tooltips: {

12
docs/general/options.md → docs/docs/general/options.md
View File

@@ -1,4 +1,6 @@
# Options
---
title: Options
---
## Scriptable Options
@@ -16,10 +18,9 @@ color: function(context) {
}
```
## Indexable Options
Indexable options also accept an array in which each item corresponds to the element at the same index. Note that this method requires to provide as many items as data, so, in most cases, using a [function](#scriptable-options) is more appropriated if supported.
Indexable options also accept an array in which each item corresponds to the element at the same index. Note that if there are less items than data, the items are looped over. In many cases, using a [function](#scriptable-options) is more appropriate if supported.
Example:
@@ -40,9 +41,10 @@ The option context is used to give contextual information when resolving options
The context object contains the following properties:
- `chart`: the associated chart
- `dataPoint`: the parsed data values for the given `dataIndex` and `datasetIndex`
- `dataIndex`: index of the current data
- `dataset`: dataset at index `datasetIndex`
- `datasetIndex`: index of the current dataset
- `hover`: true if hovered
- `active`: true if element is active (hovered)
**Important**: since the context can represent different types of entities (dataset, data, etc.), some properties may be `undefined` so be sure to test any context property before using it.
**Important**: since the context can represent different types of entities (dataset, data, ticks, etc.), some properties may be `undefined` so be sure to test any context property before using it.

49
docs/general/performance.md → docs/docs/general/performance.md
View File

@@ -1,16 +1,36 @@
# Performance
---
title: Performance
---
Chart.js charts are rendered on `canvas` elements, which makes rendering quite fast. For large datasets or performance sensitive applications, you may wish to consider the tips below.
## Data structure and format
### Parsing
Provide prepared data in the internal format accepted by the dataset and scales and set `parsing: false`. See [Data structures](data-structures.md) for more information.
### Data normalization
Chart.js is fastest if you provide data with indices that are unique, sorted, and consistent across datasets and provide the `normalized: true` option to let Chart.js know that you have done so. Even without this option, it can sometimes still be faster to provide sorted data.
### Decimation
Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide.
There are many approaches to data decimation and selection of an algorithm will depend on your data and the results you want to achieve. For instance, [min/max](https://digital.ni.com/public.nsf/allkb/F694FFEEA0ACF282862576020075F784) decimation will preserve peaks in your data but could require up to 4 points for each pixel. This type of decimation would work well for a very noisy signal where you need to see data peaks.
Line charts are able to do [automatic data decimation during draw](#automatic-data-decimation-during-draw), when certain conditions are met. You should still consider decimating data yourself before passing it in for maximum performance since the automatic decimation occurs late in the chart life cycle.
## Tick Calculation
### Rotation
[Specify a rotation value](https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration) by setting `minRotation` and `maxRotation` to the same value, which avoids the chart from having to automatically determine a value to use.
[Specify a rotation value](../axes/cartesian/index.md#tick-configuration) by setting `minRotation` and `maxRotation` to the same value, which avoids the chart from having to automatically determine a value to use.
### Sampling
Set the [`ticks.sampleSize`](../axes/cartesian/README.md#tick-configuration) option. This will determine how large your labels are by looking at only a subset of them in order to render axes more quickly. This works best if there is not a large variance in the size of your labels.
Set the [`ticks.sampleSize`](../axes/cartesian/index.md#tick-configuration) option. This will determine how large your labels are by looking at only a subset of them in order to render axes more quickly. This works best if there is not a large variance in the size of your labels.
## Disable Animations
@@ -28,10 +48,6 @@ new Chart(ctx, {
});
```
## Provide ordered data
If the data is unordered, Chart.js needs to sort it. This can be slow in some cases, so its always a good idea to provide ordered data.
## Specify `min` and `max` for scales
If you specify the `min` and `max`, the scale does not have to compute the range from the data.
@@ -57,19 +73,7 @@ new Chart(ctx, {
});
```
## Data structure and format
Provide prepared data in the internal format accepted by the dataset and scales and set `parsing: false`. See [Data structures](data-structures.md) for more information.
## Data Decimation
Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide.
There are many approaches to data decimation and selection of an algorithm will depend on your data and the results you want to achieve. For instance, [min/max](https://digital.ni.com/public.nsf/allkb/F694FFEEA0ACF282862576020075F784) decimation will preserve peaks in your data but could require up to 4 points for each pixel. This type of decimation would work well for a very noisy signal where you need to see data peaks.
Line charts are able to do [automatic data decimation during draw](#automatic-data-decimation-during-draw), when certain conditions are met. You should still consider decimating data yourself before passing it in for maximum performance since the automatic decimation occurs late in the chart life cycle.
## Render Chart.js in a web worker (Chrome only)
## Parallel rendering with web workers (Chrome only)
Chome (in version 69) added the ability to [transfer rendering control of a canvas](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen) to a web worker. Web workers can use the [OffscreenCanvas API](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) to render from a web worker onto canvases in the DOM. Chart.js is a canvas-based library and supports rendering in a web worker - just pass an OffscreenCanvas into the Chart constructor instead of a Canvas element. Note that as of today, this API is only supported in Chrome.
@@ -217,3 +221,8 @@ new Chart(ctx, {
}
});
```
## When transpiling with Babel, cosider using `loose` mode
Babel 7.9 changed the way classes are constructed. It is slow, unless used with `loose` mode.
[More information](https://github.com/babel/babel/issues/11356)

4
docs/general/responsive.md → docs/docs/general/responsive.md
View File

@@ -1,4 +1,6 @@
# Responsive Charts
---
title: Responsive Charts
---
When it comes to changing the chart size based on the window size, a major limitation is that the canvas *render* size (`canvas.width` and `.height`) can **not** be expressed with relative values, contrary to the *display* size (`canvas.style.width` and `.height`). Furthermore, these sizes are independent from each other and thus the canvas *render* size does not adjust automatically based on the *display* size, making the rendering inaccurate.

4
docs/getting-started/README.md → docs/docs/getting-started/index.md
View File

@@ -1,4 +1,6 @@
# Getting Started
---
title: Getting Started
---
Let's get started using Chart.js!

16
docs/getting-started/installation.md → docs/docs/getting-started/installation.md
View File

@@ -1,19 +1,13 @@
# Installation
Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way.
---
title: Installation
---
## npm
[![npm](https://img.shields.io/npm/v/chart.js.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chart.js)
[![npm](https://img.shields.io/npm/dm/chart.js.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chart.js)
```bash
npm install chart.js --save
```
## Bower
[![bower](https://img.shields.io/bower/v/chartjs.svg?style=flat-square&maxAge=600)](https://libraries.io/bower/chartjs)
```bash
bower install chart.js --save
```sh
npm install chart.js
```
## CDN

17
docs/getting-started/integration.md → docs/docs/getting-started/integration.md
View File

@@ -1,11 +1,13 @@
# Integration
---
title: Integration
---
Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.
## Script Tag
```html
<script src="path/to/chartjs/dist/Chart.js"></script>
<script src="path/to/chartjs/dist/chart.js"></script>
<script>
var myChart = new Chart(ctx, {...});
</script>
@@ -20,17 +22,22 @@ var myChart = new Chart(ctx, {...});
## Bundlers (Webpack, Rollup, etc.)
Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.
```javascript
import Chart from 'chart.js';
import Chart, LineController, Line, Point, LinearScale, CategoryScale, Title, Tooltip, Filler, Legend from 'chart.js';
Chart.register(LineController, Line, Point, LinearScale, CategoryScale, Title, Tooltip, Filler, Legend);
var myChart = new Chart(ctx, {...});
```
## Require JS
**Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the UMD builds 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 UMD builds instead (i.e. `dist/chart.js`, `dist/chart.min.js`, etc.).
```javascript
require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
var myChart = new Chart(ctx, {...});
});
```

5
docs/getting-started/usage.md → docs/docs/getting-started/usage.md
View File

@@ -1,4 +1,7 @@
# Usage
---
title: Usage
---
Chart.js can be used with ES6 modules, plain JavaScript, and module loaders.
## Creating a Chart

166
docs/getting-started/v3-migration.md → docs/docs/getting-started/v3-migration.md
View File

@@ -1,4 +1,6 @@
# Chart.js 3.x Migration Guide
---
title: 3.x Migration Guide
---
Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released in April 2016. In the years since then, as Chart.js has grown in popularity and feature set, we've learned some lessons about how to better create a charting library. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit. Some major highlights of v3 include:
@@ -6,21 +8,61 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
* Additional configurability and scriptable options with better defaults
* Completely rewritten animation system
* Rewritten filler plugin with numerous bug fixes
* API Documentation generated and verified by TypeScript
* Documentation migrated from GitBook to Docusaurus
* API documentation generated and verified by TypeDoc
* No more CSS injection
* Tons of bug fixes
* Tree shaking
## End user migration
### Setup and installation
* Distributed files are now in lower case. For example: `dist/chart.js`.
* Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`. Please see the [installation](installation.md) and [integration](integration.md) docs for details on the recommended way to setup Chart.js if you were using these builds.
* `moment` is no longer specified as an npm dependency. If you are using the time scale, you must include one of [the available adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library. You no longer need to exclude moment from your build.
* `moment` is no longer specified as an npm dependency. If you are using the `time` or `timeseries` scales, you must include one of [the available adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library. You no longer need to exclude moment from your build.
* Chart.js 3 is tree-shakeable. So if you are using it as an `npm` module in a project, you need to import and register the controllers, elements, scales and plugins you want to use. You will not have to call `register` if importing Chart.js via a `script` tag, but will not get the tree shaking benefits in this case. Here is an example of registering components:
```javascript
import Chart, LineController, Line, Point, LinearScale, Title from `chart.js`
Chart.register(LineController, Line, Point, LinearScale, Title);
const chart = new Chart(ctx, {
type: 'line',
// data: ...
options: {
title: {
display: true,
text: 'Chart Title'
},
scales: {
x: {
type: 'linear'
},
y: {
type: 'linear'
}
}
}
})
```
### Chart types
* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`indexAxis`](../charts/bar.md#general) option
### Options
A number of changes were made to the configuration options passed to the `Chart` constructor. Those changes are documented below.
#### Generic changes
* Indexable options are now looping. `backgroundColor: ['red', 'green']` will result in alternating `'red'` / `'green'` if there are more than 2 data points.
* The input properties of object data can now be freely specified, see [data structures](../general/data-structures.md) for details.
#### Specific changes
* `hover.animationDuration` is now configured in `animation.active.duration`
* `responsiveAnimationDuration` is now configured in `animation.resize.duration`
* Polar area `startAngle` option is now consistent with `Radar`, 0 is at top and value is in degrees. Default is changed from `-½π` to `0`.
@@ -46,17 +88,21 @@ A number of changes were made to the configuration options passed to the `Chart`
* The dataset option `tension` was removed. Use `lineTension`
* Dataset options are now configured as `options[type].datasets` rather than `options.datasets[type]`
* To override the platform class used in a chart instance, pass `platform: PlatformClass` in the config object. Note that the class should be passed, not an instance of the class.
* `aspectRatio` defaults to 1 for doughnut, pie, polarArea, and radar charts
* `TimeScale` does not read `t` from object data by default anymore. The default property is `x` or `y`, depending on the orientation. See [data structures](../general/data-structures.md) for details on how to change the default.
#### Defaults
* `global` namespace was removed from `defaults`. So `Chart.defaults.global` is now `Chart.defaults`
* `default` prefix was removed from defaults. For example `Chart.defaults.global.defaultColor` is now `Chart.defaults.color`
* `defaultColor` was renamed to `color`
* `defaultFontColor` was renamed to `fontColor`
* `defaultFontFamily` was renamed to `fontFamily`
* `defaultFontSize` was renamed to `fontSize`
* `defaultFontStyle` was renamed to `fontStyle`
* `defaultLineHeight` was renamed to `lineHeight`
* `defaultFontColor` was renamed to `font.color`
* `defaultFontFamily` was renamed to `font.family`
* `defaultFontSize` was renamed to `font.size`
* `defaultFontStyle` was renamed to `font.style`
* `defaultLineHeight` was renamed to `font.lineHeight`
* Horizontal Bar default tooltip mode was changed from `'index'` to `'nearest'` to match vertical bar charts
* `legend`, `title` and `tooltip` namespaces were moved from `Chart.defaults` to `Chart.defaults.plugins`.
#### Scales
@@ -79,11 +125,13 @@ options: {
major: {
enabled: true
},
fontStyle: function(context) {
return context.tick && context.tick.major ? 'bold' : undefined;
},
fontColor: function(context) {
return context.tick && context.tick.major ? '#FF0000' : undefined;
font: function(context) {
if (context.tick && context.tick.major) {
return {
style: 'bold',
color: '#FF0000'
};
}
}
}
}],
@@ -115,11 +163,13 @@ options: {
major: {
enabled: true
},
fontStyle: function(context) {
return context.tick && context.tick.major ? 'bold' : undefined;
},
fontColor: function(context) {
return context.tick && context.tick.major ? '#FF0000' : undefined;
font: function(context) {
if (context.tick && context.tick.major) {
return {
style: 'bold',
color: '#FF0000'
};
}
}
}
},
@@ -134,10 +184,12 @@ options: {
}
```
* The time scale option `distribution: 'series'` was removed and a new scale type `timeseries` was introduced in its place
* In the time scale, `autoSkip` is now enabled by default for consistency with the other scales
#### Animations
Animation system was completely rewritten in Chart.js v3. Each property can now be animated separately. Please see [animations](../configuration/animations.md) docs for details.
Animation system was completely rewritten in Chart.js v3. Each property can now be animated separately. Please see [animations](../configuration/animations.mdx) docs for details.
#### Customizability
@@ -151,39 +203,81 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
* `{mode: 'single'}` was replaced with `{mode: 'nearest', intersect: true}`
* `modes['X-axis']` was replaced with `{mode: 'index', intersect: false}`
* `options.onClick` is now limited to the chart area
* `options.onClick` and `options.onHover` now receive the `chart` instance as a 3rd argument
* `options.onHover` now receives a wrapped `event` as the first parameter. The previous first parameter value is accessible via `event.native`.
#### Ticks
* `options.ticks.major` and `options.ticks.minor` were replaced with scriptable options for tick fonts.
* `Chart.Ticks.formatters.linear` and `Chart.Ticks.formatters.logarithmic` were replaced with `Chart.Ticks.formatters.numeric`.
* `Chart.Ticks.formatters.linear` was renamed to `Chart.Ticks.formatters.numeric`.
#### Tooltip
* `xLabel` and `yLabel` were removed. Please use `index` and `value`
* `xLabel` and `yLabel` were removed. Please use `label` and `formattedValue`
* The `filter` option will now be passed additional parameters when called and should have the method signature `function(tooltipItem, index, tooltipItems, data)`
* The `custom` callback now takes a context object that has `tooltip` and `chart` properties
* All properties of tooltip model related to the tooltip options have been moved to reside within the `options` property.
* The callbacks no longer are given a `data` parameter. The tooltip item parameter contains the chart and dataset instead
* The tooltip item's `index` parameter was renamed to `dataIndex` and `value` was renamed to `formattedValue`
## Developer migration
While the end-user migration for Chart.js 3 is fairly straight-forward, the developer migration can be more complicated. Please reach out for help in the #dev [Slack](https://chartjs-slack.herokuapp.com/) channel if tips on migrating would be helpful.
Some of the biggest things that have changed:
* There is a completely rewritten and more performant animation system.
* `Element._model` and `Element._view` are no longer used and properties are now set directly on the elements. You will have to use the method `getProps` to access these properties inside most methods such as `inXRange`/`inYRange` and `getCenterPoint`. Please take a look at [the Chart.js-provided elements](https://github.com/chartjs/Chart.js/tree/master/src/elements) for examples.
* When building the elements in a controller, it's now suggested to call `updateElement` to provide the element properties. There are also methods such as `getSharedOptions` and `includeOptions` that have been added to skip redundant computation. Please take a look at [the Chart.js-provided controllers](https://github.com/chartjs/Chart.js/tree/master/src/controllers) for examples.
* Scales introduced a new parsing API. This API takes user data and converts it into a more standard format. E.g. it allows users to provide numeric data as a `string` and converts it to a `number` where necessary. Previously this was done on the fly as charts were rendered. Now it's done up front with the ability to skip it for better performance if users provide data in the correct format. If you're using standard data format like `x`/`y` you may not need to do anything. If you're using a custom data format you will have to override some of the parse methods in `core.datasetController.js`. An example can be found in [chartjs-chart-financial](https://github.com/chartjs/chartjs-chart-financial), which uses an `{o, h, l, c}` data format.
A few changes were made to controllers that are more straight-forward, but will affect all controllers:
* Options:
* `global` was removed from the defaults namespace as it was unnecessary and sometimes inconsistent
* Dataset defaults are now under the chart type options instead of vice-versa. This was not able to be done when introduced in 2.x for backwards compatibility. Fixing it removes the biggest stumbling block that new chart developers encountered
* Scale default options need to be updated as described in the end user migration section (e.g. `x` instead of `xAxes` and `y` instead of `yAxes`)
* `updateElement` was changed to `updateElements` and has a new method signature as described below. This provides performance enhancements such as allowing easier reuse of computations that are common to all elements and reducing the number of function calls
### Removed
The following properties and methods were removed:
#### Chart
* `Chart.active`
* `Chart.borderWidth`
* `Chart.chart.chart`
* `Chart.Bar`. New charts are created via `new Chart` and providing the appropriate `type` parameter
* `Chart.Bubble`. New charts are created via `new Chart` and providing the appropriate `type` parameter
* `Chart.Chart`
* `Chart.Controller`
* `Chart.innerRadius`
* `Chart.Doughnut`. New charts are created via `new Chart` and providing the appropriate `type` parameter
* `Chart.innerRadius` now lives on doughnut, pie, and polarArea controllers
* `Chart.lastActive`
* `Chart.Legend` was moved to `Chart.plugins.legend._element` and made private
* `Chart.Line`. New charts are created via `new Chart` and providing the appropriate `type` parameter
* `Chart.LinearScaleBase` now must be imported and cannot be accessed off the `Chart` object
* `Chart.offsetX`
* `Chart.offsetY`
* `Chart.outerRadius`
* `Chart.outerRadius` now lives on doughnut, pie, and polarArea controllers
* `Chart.plugins` was replaced with `Chart.registry`. Plugin defaults are now in `Chart.defaults.plugins[id]`.
* `Chart.PolarArea`. New charts are created via `new Chart` and providing the appropriate `type` parameter
* `Chart.prototype.generateLegend`
* `Chart.platform`. It only contained `disableCSSInjection`. CSS is never injected in v3.
* `Chart.PluginBase`
* `Chart.Radar`. New charts are created via `new Chart` and providing the appropriate `type` parameter
* `Chart.radiusLength`
* `Chart.scaleService` was replaced with `Chart.registry`. Scale defaults are now in `Chart.defaults.scales[type]`.
* `Chart.Scatter`. New charts are created via `new Chart` and providing the appropriate `type` parameter
* `Chart.types`
* `Chart.Title` was moved to `Chart.plugins.title._element` and made private
* `Chart.Tooltip` is now provided by the tooltip plugin. The positioners can be accessed from `tooltipPlugin.positioners`
* `ILayoutItem.minSize`
#### Dataset Controller
#### Dataset Controllers
* `BarController.getDatasetMeta().bar`
* `DatasetController.addElementAndReset`
* `DatasetController.createMetaData`
* `DatasetController.createMetaDataset`
@@ -201,11 +295,13 @@ The following properties and methods were removed:
* `helpers.addEvent`
* `helpers.aliasPixel`
* `helpers.arrayEquals`
* `helpers.configMerge`
* `helpers.findIndex`
* `helpers.findNextWhere`
* `helpers.findPreviousWhere`
* `helpers.extend`. Use `Object.assign` instead
* `helpers.getValueAtIndexOrDefault`. Use `helpers.resolve` instead.
* `helpers.indexOf`
* `helpers.lineTo`
* `helpers.longestText` was moved to the `helpers.canvas` namespace and made private
@@ -221,8 +317,13 @@ The following properties and methods were removed:
* `helpers.scaleMerge`
* `helpers.where`
#### Layout
* `Layout.defaults`
#### Scales
* `LinearScaleBase.handleDirectionalChanges`
* `LogarithmicScale.minNotZero`
* `Scale.getRightValue`
* `Scale.longestLabelWidth`
@@ -238,14 +339,20 @@ The following properties and methods were removed:
* `IPlugin.afterScaleUpdate`. Use `afterLayout` instead
* `Legend.margins` is now private
* Legend `onClick`, `onHover`, and `onLeave` options now receive the legend as the 3rd argument in addition to implicitly via `this`
* Legend `onClick`, `onHover`, and `onLeave` options now receive a wrapped `event` as the first parameter. The previous first parameter value is accessible via `event.native`.
* `Title.margins` is now private
* The tooltip item's `x` and `y` attributes were removed. Use `datasetIndex` and `index` to get the element and any corresponding data from it
* The tooltip item's `x` and `y` attributes were replaced by `element`. You can use `element.x` and `element.y` or `element.tooltipPosition()` instead.
#### Removal of private APIs
The following private APIs were removed.
* `Chart.data.datasets[datasetIndex]._meta`
* `DatasetController._getIndexScaleId`
* `DatasetController._getIndexScale`
* `DatasetController._getValueScaleId`
* `DatasetController._getValueScale`
* `Element._ctx`
* `Element._model`
* `Element._view`
@@ -260,6 +367,9 @@ The following properties were renamed during v3 development:
* `Chart.Animation.animationObject` was renamed to `Chart.Animation`
* `Chart.Animation.chartInstance` was renamed to `Chart.Animation.chart`
* `Chart.canvasHelpers` was renamed to `Chart.helpers.canvas`
* `Chart.layoutService` was renamed to `Chart.layouts`
* `Chart.pluginService` was renamed to `Chart.plugins`
* `helpers._decimalPlaces` was renamed to `helpers.math._decimalPlaces`
* `helpers.almostEquals` was renamed to `helpers.math.almostEquals`
* `helpers.almostWhole` was renamed to `helpers.math.almostWhole`
@@ -272,7 +382,6 @@ The following properties were renamed during v3 development:
* `helpers.getMaximumWidth` was renamed to `helpers.dom.getMaximumWidth`
* `helpers.getRelativePosition` was renamed to `helpers.dom.getRelativePosition`
* `helpers.getStyle` was renamed to `helpers.dom.getStyle`
* `helpers.getValueAtIndexOrDefault` was renamed to `helpers.valueAtIndexOrDefault`
* `helpers.getValueOrDefault` was renamed to `helpers.valueOrDefault`
* `helpers.easingEffects` was renamed to `helpers.easing.effects`
* `helpers.log10` was renamed to `helpers.math.log10`
@@ -328,7 +437,6 @@ The APIs listed in this section have changed in signature or behaviour from vers
* `Scale.getLabelForIndex` was replaced by `scale.getLabelForValue`
* `Scale.getPixelForValue` now has only one parameter. For the `TimeScale` that parameter must be millis since the epoch
* `ScaleService.registerScaleType` was renamed to `ScaleService.registerScale` and now takes a scale constructors which is expected to have `id` and `defaults` properties.
##### Ticks
@@ -337,6 +445,7 @@ The APIs listed in this section have changed in signature or behaviour from vers
* `Scale.convertTicksToLabels` was renamed to `generateTickLabels`. It is now expected to set the label property on the ticks given as input
* `Scale.ticks` now contains objects instead of strings
* When the `autoSkip` option is enabled, `Scale.ticks` now contains only the non-skipped ticks instead of all ticks.
* Ticks are now always generated in monotonically increasing order
##### Time Scale
@@ -372,3 +481,4 @@ The APIs listed in this section have changed in signature or behaviour from vers
* `Chart.platform` is no longer the platform object used by charts. Every chart instance now has a separate platform instance.
* `Chart.platforms` is an object that contains two usable platform classes, `BasicPlatform` and `DomPlatform`. It also contains `BasePlatform`, a class that all platforms must extend from.
* If the canvas passed in is an instance of `OffscreenCanvas`, the `BasicPlatform` is automatically used.
* `isAttached` method was added to platform.

66
docs/docs/index.md Normal file
View File

@@ -0,0 +1,66 @@
---
title: Chart.js
---
[![slack](https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600)](https://chartjs-slack.herokuapp.com/)
## Installation
You can download the latest version of Chart.js from the [GitHub releases](https://github.com/chartjs/Chart.js/releases/latest) or use a [Chart.js CDN](https://www.jsdelivr.com/package/npm/chart.js). Detailed installation instructions can be found on the [installation](./getting-started/installation.md) page.
## Creating a Chart
It's easy to get started with Chart.js. All that's required is the script included in your page along with a single `<canvas>` node to render the chart.
In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md).
```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
```
## Contributing
Before submitting an issue or a pull request to the project, please take a moment to look over the [contributing guidelines](./developers/contributing.md) first.
For support using Chart.js, please post questions with the [`chartjs` tag on Stack Overflow](https://stackoverflow.com/questions/tagged/chartjs).
## License
Chart.js is available under the [MIT license](https://opensource.org/licenses/MIT).

4
docs/notes/comparison.md → docs/docs/notes/comparison.md
View File

@@ -1,4 +1,6 @@
# Comparison with Other Charting Libraries
---
title: Comparison with Other Libraries
---
Library Features

4
docs/notes/license.md → docs/docs/notes/license.md
View File

@@ -1,3 +1,5 @@
# License
---
title: License
---
Chart.js is <a href="https://github.com/chartjs/Chart.js" target="_blank">open source</a> and available under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>.

0
docs/style.css → docs/docs/style.css
View File

97
docs/docusaurus.config.js Normal file
View File

@@ -0,0 +1,97 @@
/* eslint-disable import/no-commonjs */
// VERSION replaced by deploy script
module.exports = {
title: 'Chart.js',
tagline: 'Open source HTML5 Charts for your website',
url: 'https://chartjs.org',
baseUrl: '/docs/VERSION/',
favicon: 'img/favicon.ico',
organizationName: 'chartjs', // Usually your GitHub org/user name.
projectName: 'chartjs.github.io', // Usually your repo name.
plugins: [require.resolve('@docusaurus/plugin-google-analytics')],
scripts: ['https://www.chartjs.org/dist/VERSION/chart.min.js'],
themes: [require.resolve('@docusaurus/theme-live-codeblock')],
themeConfig: {
algolia: {
apiKey: 'd7ee00a3cbaaf3c33e28ad1c274e7ba6',
indexName: 'chartjs',
algoliaOptions: {
facetFilters: ['version:VERSION'],
}
},
googleAnalytics: {
trackingID: 'UA-28909194-3',
// Optional fields.
anonymizeIP: true, // Should IPs be anonymized?
},
disableDarkMode: true, // Would need to implement for Charts embedded in docs
navbar: {
title: 'Chart.js',
logo: {
alt: 'Chart.js Logo',
src: 'img/logo.svg',
},
},
footer: {
style: 'dark',
links: [
{
title: 'Other Docs',
items: [
{
label: 'Samples',
href: 'https://www.chartjs.org/samples/VERSION/',
},
{
label: 'v2 Docs',
href: 'https://www.chartjs.org/docs/2.9.3/',
},
],
},
{
title: 'Community',
items: [
{
label: 'Slack',
href: 'https://chartjs-slack.herokuapp.com/',
},
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/chart.js',
},
],
},
{
title: 'Developers',
items: [
{
label: 'GitHub',
href: 'https://github.com/chartjs/Chart.js',
},
{
label: 'Contributing',
to: 'developers/contributing',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Chart.js contributors.`,
},
},
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
homePageId: 'index',
sidebarPath: require.resolve('./sidebars.js'),
routeBasePath: '',
editUrl: 'https://github.com/chartjs/Chart.js/edit/master/docs/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
};

11
docs/general/README.md
View File

@@ -1,11 +0,0 @@
# General Configuration
These sections describe general configuration options that can apply elsewhere in the documentation.
* [Responsive](./responsive.md) defines responsive chart options that apply to all charts.
* [Device Pixel Ratio](./device-pixel-ratio.md) defines the ratio between display pixels and rendered pixels.
* [Interactions](./interactions/README.md) defines options that reflect how hovering chart elements works.
* [Options](./options.md) scriptable and indexable options syntax.
* [Colors](./colors.md) defines acceptable color values.
* [Font](./fonts.md) defines various font options.
* [Performance](./performance.md) gives tips for performance-sensitive applications.

32
docs/general/fonts.md
View File

@@ -1,32 +0,0 @@
# Fonts
There are 4 special global settings that can change all of the fonts on the chart. These options are in `Chart.defaults`. The global font settings only apply when more specific options are not included in the config.
For example, in this chart the text will all be red except for the labels in the legend.
```javascript
Chart.defaults.fontColor = 'red';
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
labels: {
// This more specific font property overrides the global property
fontColor: 'black'
}
}
}
});
```
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `fontColor` | `Color` | `'#666'` | Default font color for all text.
| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text.
| `fontSize` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
| `fontStyle` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
## Missing Fonts
If a font is specified for a chart that does exist on the system, the browser will not apply the font when it is set. If you notice odd fonts appearing in your charts, check that the font you are applying exists on your system. See [issue 3318](https://github.com/chartjs/Chart.js/issues/3318) for more details.

1
docs/notes/README.md
View File

@@ -1 +0,0 @@
# Additional Notes

1
docs/notes/extensions.md
View File

@@ -1 +0,0 @@
!REDIRECT "https://github.com/chartjs/awesome"

13542
docs/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
docs/package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "docs",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy"
},
"dependencies": {
"@docusaurus/core": "^2.0.0-alpha.56",
"@docusaurus/plugin-google-analytics": "^2.0.0-alpha.56",
"@docusaurus/preset-classic": "^2.0.0-alpha.56",
"@docusaurus/theme-live-codeblock": "^2.0.0-alpha.56",
"classnames": "^2.2.6",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

85
docs/sidebars.js Normal file
View File

@@ -0,0 +1,85 @@
const pkg = require('../package.json');
const docsVersion = pkg.version.indexOf('-') > -1 ? 'next' : 'latest';
module.exports = {
someSidebar: {
Introduction: ['index'],
'Getting Started': [
'getting-started/index',
'getting-started/installation',
'getting-started/integration',
'getting-started/usage',
'getting-started/v3-migration'
],
General: [
'general/data-structures',
'general/accessibility',
'general/responsive',
'general/device-pixel-ratio',
{Interactions: ['general/interactions/index', 'general/interactions/events', 'general/interactions/modes']},
'general/options',
'general/colors',
'general/fonts',
'general/performance'
],
Configuration: [
'configuration/index',
'configuration/animations',
'configuration/layout',
'configuration/legend',
'configuration/title',
'configuration/tooltip',
'configuration/elements'
],
'Chart Types': [
'charts/line',
'charts/bar',
'charts/radar',
'charts/doughnut',
'charts/polar',
'charts/bubble',
'charts/scatter',
'charts/area',
'charts/mixed'
],
Axes: [
'axes/index',
{Cartesian: [
'axes/cartesian/index',
'axes/cartesian/category',
'axes/cartesian/linear',
'axes/cartesian/logarithmic',
'axes/cartesian/time'
]},
{Radial: [
'axes/radial/index',
'axes/radial/linear'
]},
'axes/labelling',
'axes/styling'
],
Developers: [
'developers/index',
'developers/api',
{
type: 'link',
label: 'TypeDoc',
href: 'https://chartjs.org/docs/' + docsVersion + '/typedoc/'
},
'developers/updates',
'developers/plugins',
'developers/charts',
'developers/axes',
'developers/contributing'
],
'Additional Notes': [
'notes/comparison',
{
type: 'link',
label: 'Extensions',
href: 'https://github.com/chartjs/awesome'
},
'notes/license'
]
},
};

29
docs/src/css/custom.css Normal file
View File

@@ -0,0 +1,29 @@
/* stylelint-disable docusaurus/copyright-header */
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: rgb(70, 203, 174);
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
--ifm-code-color: #2472C8;
--ifm-code-background: transparent;
--ifm-code-padding-vertical: 1px;
--ifm-code-padding-horizontal: 3px;
}
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}

36
docs/src/pages/styles.module.css Normal file
View File

@@ -0,0 +1,36 @@
/* stylelint-disable docusaurus/copyright-header */
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureImage {
height: 200px;
width: 200px;
}

BIN
docs/static/img/favicon.ico vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

14
docs/static/img/logo.svg vendored Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="192px" height="192px" viewBox="0 0 192 192" enable-background="new 0 0 192 192" xml:space="preserve">
<path fill="#36A2EB" d="M161.271,96.556c-22.368,0.439-17.709,14.599-33.473,18.18c-16.014,3.638-18.542-39.111-34.552-39.111
c-16.012,0-19.559,41.526-39.608,70.034l-0.572,0.807l42.985,24.813l65.22-37.651V96.556z"/>
<path fill="#FFCE56" d="M161.271,95.267c-7.488-9.61-12.567-20.658-23.494-20.658c-19.337,0-14.249,31.545-35.62,31.545
c-21.373,0-23.62-33.931-47.832-2.035c-7.715,10.163-13.925,21.495-18.803,32.218l60.529,34.943l65.22-37.651V95.267z"/>
<path opacity="0.8" fill="#FE6184" d="M30.829,108.334c7.338-20.321,10.505-36.779,24.514-36.779
c21.371,0,26.458,60.039,44.779,53.931c18.318-6.105,16.282-38.669,44.779-38.669c5.424,0,10.962,3.323,16.371,8.698v38.113
l-65.22,37.651l-65.222-37.651V108.334z"/>
<path fill="#E7E9ED" d="M96,176l-69.292-39.999V56L96,16l69.292,40v80L96,176z M34.849,131.301L96,166.602l61.151-35.301V60.7
L96,25.399L34.849,60.7V131.301z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

198
gulpfile.js
View File

@@ -1,198 +0,0 @@
/* eslint-disable import/no-nodejs-modules, import/no-commonjs, no-use-before-define */
const gulp = require('gulp');
const eslint = require('gulp-eslint');
const file = require('gulp-file');
const replace = require('gulp-replace');
const size = require('gulp-size');
const streamify = require('gulp-streamify');
const terser = require('gulp-terser');
const zip = require('gulp-zip');
const exec = require('child_process').exec;
const karma = require('karma');
const merge = require('merge-stream');
const yargs = require('yargs');
const path = require('path');
const htmllint = require('gulp-htmllint');
const typescript = require('gulp-typescript');
const typedoc = require('gulp-typedoc');
const pkg = require('./package.json');
const tsProject = typescript.createProject('./tsconfig.json');
const argv = yargs
.option('verbose', {default: false})
.argv;
const srcDir = './src/';
const outDir = './dist/';
gulp.task('bower', bowerTask);
gulp.task('build', buildTask);
gulp.task('package', packageTask);
gulp.task('lint-html', lintHtmlTask);
gulp.task('lint-js', lintJsTask);
gulp.task('lint', gulp.parallel('lint-html', 'lint-js'));
gulp.task('tsc', typescriptTask);
gulp.task('docs', docsTask);
gulp.task('unittest', unittestTask);
gulp.task('test', gulp.parallel('lint', 'tsc', 'unittest'));
gulp.task('library-size', librarySizeTask);
gulp.task('module-sizes', moduleSizesTask);
gulp.task('size', gulp.parallel('library-size', 'module-sizes'));
gulp.task('default', gulp.parallel('build'));
function run(bin, args) {
return new Promise((resolve, reject) => {
const exe = '"' + process.execPath + '"';
const src = require.resolve(bin);
const cmd = [exe, src].concat(args || []).join(' ');
const ps = exec(cmd);
ps.stdout.pipe(process.stdout);
ps.stderr.pipe(process.stderr);
ps.on('close', (error) => {
if (error) {
reject(error);
} else {
resolve();
}
});
});
}
/**
* Generates the bower.json manifest file which will be pushed along release tags.
* Specs: https://github.com/bower/spec/blob/master/json.md
*/
function bowerTask() {
const json = JSON.stringify({
name: pkg.name,
description: pkg.description,
homepage: pkg.homepage,
license: pkg.license,
version: pkg.version,
main: outDir + 'Chart.js',
ignore: [
'.github',
'.codeclimate.yml',
'.gitignore',
'.npmignore',
'.travis.yml',
'scripts'
]
}, null, 2);
return file('bower.json', json, {src: true})
.pipe(gulp.dest('./'));
}
function buildTask() {
return run('rollup/dist/bin/rollup', ['-c', argv.watch ? '--watch' : '']);
}
function packageTask() {
return merge(
// gather "regular" files landing in the package root
gulp.src([outDir + '*.js', outDir + '*.css', 'LICENSE.md']),
// since we moved the dist files one folder up (package root), we need to rewrite
// samples src="../dist/ to src="../ and then copy them in the /samples directory.
gulp.src('./samples/**/*', {base: '.'})
.pipe(streamify(replace(/src="((?:\.\.\/)+)dist\//g, 'src="$1')))
)
// finally, create the zip archive
.pipe(zip('Chart.js.zip'))
.pipe(gulp.dest(outDir));
}
function lintJsTask() {
const files = [
'samples/**/*.html',
'samples/**/*.js',
'src/**/*.js',
'test/**/*.js'
];
// NOTE(SB) codeclimate has 'complexity' and 'max-statements' eslint rules way too strict
// compare to what the current codebase can support, and since it's not straightforward
// to fix, let's turn them as warnings and rewrite code later progressively.
const options = {
rules: {
complexity: [1, 10],
'max-statements': [1, 30]
}
};
return gulp.src(files)
.pipe(eslint(options))
.pipe(eslint.format())
.pipe(eslint.failAfterError());
}
function typescriptTask() {
return tsProject.src()
.pipe(tsProject())
.js.pipe(gulp.dest('dist'));
}
function lintHtmlTask() {
return gulp.src('samples/**/*.html')
.pipe(htmllint({
failOnError: true,
}));
}
function docsTask(done) {
const bin = require.resolve('gitbook-cli/bin/gitbook.js');
const cmd = argv.watch ? 'serve' : 'build';
return run(bin, ['install', './'])
.then(() => run(bin, [cmd, './', './dist/docs']))
.then(() => {
const config = {
moduleResolution: 'Node',
target: 'ES6',
out: './dist/docs/typedoc'
};
gulp.src(['./src/**/*.js'], {read: false})
.pipe(typedoc(config, done));
}).catch((err) => {
done(new Error(err.stdout || err));
});
}
function unittestTask(done) {
// use `env.test` from `babel.config.json` for karma builds
process.env.NODE_ENV = 'test';
new karma.Server({
configFile: path.join(__dirname, 'karma.conf.js'),
singleRun: !argv.watch,
args: {
coverage: !!argv.coverage,
inputs: argv.inputs,
browsers: argv.browsers,
watch: argv.watch
}
},
// https://github.com/karma-runner/gulp-karma/issues/18
(error) => {
error = error ? new Error('Karma returned with the error code: ' + error) : undefined;
done(error);
}).start();
}
function librarySizeTask() {
return gulp.src('dist/Chart.bundle.min.js')
.pipe(size({
gzip: true
}));
}
function moduleSizesTask() {
return gulp.src(srcDir + '**/*.js')
.pipe(terser())
.pipe(size({
showFiles: true,
gzip: true
}));
}

45
karma.conf.js
View File

@@ -1,31 +1,39 @@
/* eslint-disable import/no-commonjs */
const babel = require('rollup-plugin-babel');
const commonjs = require('@rollup/plugin-commonjs');
const json = require('@rollup/plugin-json');
const resolve = require('@rollup/plugin-node-resolve');
const resolve = require('@rollup/plugin-node-resolve').default;
const webWorkerLoader = require('rollup-plugin-web-worker-loader');
const builds = require('./rollup.config');
const yargs = require('yargs');
module.exports = function(karma) {
const args = karma.args || {};
const args = yargs
.option('verbose', {default: false})
.argv;
// Use the same rollup config as our dist files: when debugging (--watch),
const grep = args.grep === true ? '' : args.grep;
const specPattern = 'test/specs/**/*' + grep + '*.js';
// Use the same rollup config as our dist files: when debugging (npm run dev),
// we will prefer the unminified build which is easier to browse and works
// better with source mapping. In other cases, pick the minified build to
// make sure that the minification process (terser) doesn't break anything.
const regex = args.watch ? /Chart\.js$/ : /Chart\.min\.js$/;
const build = builds.filter(v => v.output.file.match(regex))[0];
if (args.watch) {
build.output.sourcemap = 'inline';
}
const regex = karma.autoWatch ? /chart\.js$/ : /chart\.min\.js$/;
const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0];
karma.set({
frameworks: ['jasmine'],
reporters: ['progress', 'kjhtml'],
browsers: (args.browsers || 'chrome,firefox').split(','),
logLevel: karma.LOG_WARN,
logLevel: karma.LOG_INFO,
client: {
jasmine: {
failFast: !!karma.autoWatch
}
},
// Explicitly disable hardware acceleration to make image
// diff more stable when ran on Travis and dev machine.
@@ -56,13 +64,14 @@ module.exports = function(karma) {
{pattern: 'test/fixtures/**/*.json', included: false},
{pattern: 'test/fixtures/**/*.png', included: false},
'node_modules/moment/min/moment.min.js',
'test/index.js',
'src/index.js',
'node_modules/chartjs-adapter-moment/dist/chartjs-adapter-moment.js'
].concat((args.inputs || 'test/specs/**/*.js').split(';')),
{pattern: 'test/index.js', watched: false},
{pattern: 'src/index.js', watched: false},
'node_modules/chartjs-adapter-moment/dist/chartjs-adapter-moment.js',
{pattern: specPattern, watched: false}
],
preprocessors: {
'test/specs/**/*.js': ['rollup'],
[specPattern]: ['rollup'],
'test/index.js': ['rollup'],
'src/index.js': ['sources']
},
@@ -71,13 +80,13 @@ module.exports = function(karma) {
plugins: [
json(),
resolve(),
babel({exclude: 'node_modules/**'}), // use babel since we have ES proposal features
commonjs({exclude: ['src/**', 'test/**']}),
webWorkerLoader()
],
output: {
name: 'test',
format: 'umd'
format: 'umd',
sourcemap: karma.autoWatch ? 'inline' : false
}
},

15436
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

102
package.json
View File

@@ -2,12 +2,12 @@
"name": "chart.js",
"homepage": "https://www.chartjs.org",
"description": "Simple HTML5 charts using the canvas element.",
"version": "3.0.0-alpha",
"version": "3.0.0-alpha.2",
"license": "MIT",
"jsdelivr": "dist/Chart.min.js",
"unpkg": "dist/Chart.min.js",
"main": "dist/Chart.js",
"module": "dist/Chart.esm.js",
"jsdelivr": "dist/chart.min.js",
"unpkg": "dist/chart.min.js",
"main": "dist/chart.js",
"module": "dist/chart.esm.js",
"keywords": [
"canvas",
"charts",
@@ -24,64 +24,62 @@
"url": "https://github.com/chartjs/Chart.js/issues"
},
"files": [
"bower.json",
"composer.json",
"dist/*.css",
"dist/*.js"
"dist/*.js",
"helpers/**/*.js"
],
"scripts": {
"autobuild": "rollup -c -w",
"build": "rollup -c",
"dev": "karma start ---auto-watch --no-single-run --browsers chrome --grep",
"docs": "cd docs && npm install && npm run build && mkdir -p ../dist && cp -r build ../dist/docs",
"lint-js": "eslint samples/**/*.html samples/**/*.js src/**/*.js test/**/*.js",
"lint-tsc": "tsc",
"lint": "concurrently \"npm:lint-*\"",
"test": "npm run lint && cross-env NODE_ENV=test karma start --no-auto-watch --single-run --coverage --grep",
"typedoc": "npx typedoc"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/core": "^7.10.2",
"@babel/plugin-transform-object-assign": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@rollup/plugin-commonjs": "^11.0.2",
"@rollup/plugin-json": "^4.0.2",
"@rollup/plugin-node-resolve": "^7.1.1",
"@babel/preset-env": "^7.10.2",
"@kurkle/color": "^0.1.9",
"@rollup/plugin-commonjs": "^13.0.0",
"@rollup/plugin-inject": "^4.0.2",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^8.0.1",
"babel-plugin-istanbul": "^6.0.0",
"babel-preset-es2015-rollup": "^3.0.0",
"chartjs-adapter-moment": "^0.1.1",
"coveralls": "^3.0.9",
"eslint": "^6.8.0",
"concurrently": "^5.2.0",
"coveralls": "^3.1.0",
"cross-env": "^7.0.2",
"eslint": "^7.2.0",
"eslint-config-chartjs": "^0.2.0",
"eslint-config-esnext": "^4.0.0",
"eslint-plugin-html": "^6.0.0",
"gitbook-cli": "^2.3.2",
"gulp": "^4.0.0",
"gulp-eslint": "^6.0.0",
"gulp-file": "^0.4.0",
"gulp-htmllint": "^0.0.16",
"gulp-replace": "^1.0.0",
"gulp-size": "^3.0.0",
"gulp-streamify": "^1.0.2",
"gulp-terser": "^1.1.6",
"gulp-typedoc": "^2.2.4",
"gulp-typescript": "^6.0.0-alpha.1",
"gulp-zip": "^5.0.0",
"jasmine": "^3.3.0",
"jasmine-core": "^3.3.0",
"karma": "^4.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-coverage": "^2.0.0",
"eslint-config-esnext": "^4.1.0",
"eslint-plugin-html": "^6.0.2",
"glob": "^7.1.6",
"jasmine": "^3.5.0",
"jasmine-core": "^3.5.0",
"karma": "^5.0.9",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.2",
"karma-edge-launcher": "^0.4.2",
"karma-firefox-launcher": "^1.3.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.5.2",
"karma-rollup-preprocessor": "^7.0.3",
"karma-jasmine": "^3.3.1",
"karma-jasmine-html-reporter": "^1.5.4",
"karma-rollup-preprocessor": "^7.0.5",
"karma-safari-private-launcher": "^1.0.0",
"merge-stream": "^1.0.1",
"moment": "^2.10.2",
"pixelmatch": "^5.0.0",
"moment": "^2.26.0",
"pixelmatch": "^5.2.0",
"resize-observer-polyfill": "^1.5.1",
"rollup": "^1.31.1",
"rollup-plugin-babel": "^4.3.3",
"rollup": "^2.15.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-cleanup": "^3.1.1",
"rollup-plugin-terser": "^5.2.0",
"rollup-plugin-web-worker-loader": "^0.8.1",
"typedoc": "^0.16.10",
"typescript": "^3.8.2",
"yargs": "^14.2.2"
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-web-worker-loader": "^1.3.0",
"typedoc": "^0.17.7",
"typescript": "^3.9.5",
"yargs": "^15.3.1"
},
"dependencies": {
"@kurkle/color": "^0.1.6"
}
"dependencies": {}
}

58
rollup.config.js
View File

@@ -3,12 +3,22 @@
const babel = require('rollup-plugin-babel');
const cleanup = require('rollup-plugin-cleanup');
const glob = require('glob');
const inject = require('@rollup/plugin-inject');
const json = require('@rollup/plugin-json');
const resolve = require('@rollup/plugin-node-resolve');
const resolve = require('@rollup/plugin-node-resolve').default;
const terser = require('rollup-plugin-terser').terser;
const pkg = require('./package.json');
const input = 'src/index.js';
const inputESM = {
'dist/chart.esm': 'src/index.esm.js',
};
glob('src/helpers/helpers.*.js', (_er, files) => {
files.forEach(file => {
inputESM[file.replace(/src\/|helpers\.|\.js/g, '')] = file;
});
});
const banner = `/*!
* Chart.js v${pkg.version}
@@ -19,11 +29,14 @@ const banner = `/*!
module.exports = [
// UMD builds
// dist/Chart.min.js
// dist/Chart.js
// dist/chart.min.js
// dist/chart.js
{
input,
plugins: [
inject({
ResizeObserver: 'resize-observer-polyfill'
}),
json(),
resolve(),
babel(),
@@ -33,7 +46,7 @@ module.exports = [
],
output: {
name: 'Chart',
file: 'dist/Chart.js',
file: 'dist/chart.js',
banner,
format: 'umd',
indent: false,
@@ -42,6 +55,9 @@ module.exports = [
{
input,
plugins: [
inject({
ResizeObserver: 'resize-observer-polyfill'
}),
json(),
resolve(),
babel(),
@@ -53,50 +69,30 @@ module.exports = [
],
output: {
name: 'Chart',
file: 'dist/Chart.min.js',
file: 'dist/chart.min.js',
format: 'umd',
indent: false,
},
},
// ES6 builds
// dist/Chart.esm.min.js
// dist/Chart.esm.js
// dist/chart.esm.js
// helpers/*.js
{
input,
input: inputESM,
plugins: [
json(),
resolve(),
babel({envName: 'es6'}),
cleanup({
sourcemap: true
})
],
output: {
name: 'Chart',
file: 'dist/Chart.esm.js',
dir: './',
chunkFileNames: 'helpers/chunks/[name].js',
banner,
format: 'esm',
indent: false,
},
},
{
input,
plugins: [
json(),
resolve(),
babel({envName: 'es6'}),
terser({
output: {
preamble: banner
}
})
],
output: {
name: 'Chart',
file: 'dist/Chart.esm.min.js',
format: 'esm',
indent: false,
},
},
}
];

2
samples/advanced/line-gradient.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<title>Linear Gradient</title>
<script src="../../dist/Chart.js"></script>
<script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

2
samples/advanced/progress-bar.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<title> Animation Callbacks </title>
<script src="../../dist/Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

2
samples/advanced/radial-gradient.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<title>Radial Gradient</title>
<script src="../../dist/Chart.js"></script>
<script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

2
samples/animations/delay.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Stacked Bar Chart</title>
<script src="../../dist/Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

2
samples/animations/drop.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{

21
samples/animations/loop.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
@@ -62,17 +62,16 @@
}]
},
options: {
animation: (context) => {
if (context.active) {
return {
radius: {
duration: 400,
loop: true
}
};
animation: (context) => Object.assign({},
Chart.defaults.animation,
{
radius: {
duration: 400,
easing: 'linear',
loop: context.active
}
}
return Chart.defaults.animation;
},
),
elements: {
point: {
hoverRadius: 6

2
samples/charts/area/line-boundaries.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<script src="../../../dist/Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>

2
samples/charts/area/line-datasets.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > datasets | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<script src="../../../dist/Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>

2
samples/charts/area/line-stacked.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../../dist/Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

2
samples/charts/area/radar.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > radar | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<script src="../../../dist/Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>

2
samples/charts/bar/float.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Bar Chart</title>
<script src="../../../dist/Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

5
samples/charts/bar/horizontal.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Horizontal Bar Chart</title>
<script src="../../../dist/Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
@@ -62,9 +62,10 @@
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
type: 'horizontalBar',
type: 'bar',
data: horizontalBarChartData,
options: {
indexAxis: 'y',
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {

2
samples/charts/bar/multi-axis.html
View File

@@ -3,7 +3,7 @@
<head>
<title>Bar Chart Multi Axis</title>
<script src="../../../dist/Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

Some files were not shown because too many files have changed in this diff Show More