mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
176 lines
5.0 KiB
Markdown
176 lines
5.0 KiB
Markdown
# Options
|
|
|
|
## Option resolution
|
|
|
|
Options are resolved from top to bottom, using a context dependent route.
|
|
|
|
### Chart level options
|
|
|
|
* options
|
|
* overrides[`config.type`]
|
|
* defaults
|
|
|
|
### Dataset level options
|
|
|
|
`dataset.type` defaults to `config.type`, if not specified.
|
|
|
|
* dataset
|
|
* options.datasets[`dataset.type`]
|
|
* options
|
|
* overrides[`config.type`].datasets[`dataset.type`]
|
|
* defaults.datasets[`dataset.type`]
|
|
* defaults
|
|
|
|
### Dataset animation options
|
|
|
|
* dataset.animation
|
|
* options.datasets[`dataset.type`].animation
|
|
* options.animation
|
|
* overrides[`config.type`].datasets[`dataset.type`].animation
|
|
* defaults.datasets[`dataset.type`].animation
|
|
* defaults.animation
|
|
|
|
### Dataset element level options
|
|
|
|
Each scope is looked up with `elementType` prefix in the option name first, then wihtout the prefix. For example, `radius` for `point` element is looked up using `pointRadius` and if that does not hit, then `radius`.
|
|
|
|
* dataset
|
|
* options.datasets[`dataset.type`]
|
|
* options.datasets[`dataset.type`].elements[`elementType`]
|
|
* options.elements[`elementType`]
|
|
* options
|
|
* overrides[`config.type`].datasets[`dataset.type`]
|
|
* overrides[`config.type`].datasets[`dataset.type`].elements[`elementType`]
|
|
* defaults.datasets[`dataset.type`]
|
|
* defaults.datasets[`dataset.type`].elements[`elementType`]
|
|
* defaults.elements[`elementType`]
|
|
* defaults
|
|
|
|
### Scale options
|
|
|
|
* options.scales
|
|
* overrides[`config.type`].scales
|
|
* defaults.scales
|
|
* defaults.scale
|
|
|
|
### Plugin options
|
|
|
|
A plugin can provide `additionalOptionScopes` array of paths to additionally look for its options in. For root scope, use empty string: `''`. Most core plugins also take options from root scope.
|
|
|
|
* options.plugins[`plugin.id`]
|
|
* (options.[`...plugin.additionalOptionScopes`])
|
|
* overrides[`config.type`].plugins[`plugin.id`]
|
|
* defaults.plugins[`plugin.id`]
|
|
* (defaults.[`...plugin.additionalOptionScopes`])
|
|
|
|
## Scriptable Options
|
|
|
|
Scriptable options also accept a function which is called for each of the underlying data values and that takes the unique argument `context` representing contextual information (see [option context](options.md#option-context)).
|
|
A resolver is passed as second parameter, that can be used to access other options in the same context.
|
|
|
|
:::tip
|
|
|
|
The `context` argument should be validated in the scriptable function, because the function can be invoked in different contexts. The `type` field is a good candidate for this validation.
|
|
|
|
:::
|
|
|
|
Example:
|
|
|
|
```javascript
|
|
color: function(context) {
|
|
var index = context.dataIndex;
|
|
var value = context.dataset.data[index];
|
|
return value < 0 ? 'red' : // draw negative values in red
|
|
index % 2 ? 'blue' : // else, alternate values in blue and green
|
|
'green';
|
|
},
|
|
borderColor: function(context, options) {
|
|
var color = options.color; // resolve the value of another scriptable option: 'red', 'blue' or 'green'
|
|
return Chart.helpers.color(color).lighten(0.2);
|
|
}
|
|
```
|
|
|
|
## Indexable Options
|
|
|
|
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:
|
|
|
|
```javascript
|
|
color: [
|
|
'red', // color for data at index 0
|
|
'blue', // color for data at index 1
|
|
'green', // color for data at index 2
|
|
'black', // color for data at index 3
|
|
//...
|
|
]
|
|
```
|
|
|
|
## Option Context
|
|
|
|
The option context is used to give contextual information when resolving options and currently only applies to [scriptable options](#scriptable-options).
|
|
The object is preserved, so it can be used to store and pass information between calls.
|
|
|
|
There are multiple levels of context objects:
|
|
|
|
* `chart`
|
|
* `dataset`
|
|
* `data`
|
|
* `scale`
|
|
* `tick`
|
|
* `tooltip`
|
|
|
|
Each level inherits its parent(s) and any contextual information stored in the parent is available through the child.
|
|
|
|
The context object contains the following properties:
|
|
|
|
### chart
|
|
|
|
* `chart`: the associated chart
|
|
* `type`: `'chart'`
|
|
|
|
### dataset
|
|
|
|
In addition to [chart](#chart)
|
|
|
|
* `active`: true if element is active (hovered)
|
|
* `dataset`: dataset at index `datasetIndex`
|
|
* `datasetIndex`: index of the current dataset
|
|
* `index`: same as `datasetIndex`
|
|
* `mode`: the update mode
|
|
* `type`: `'dataset'`
|
|
|
|
### data
|
|
|
|
In addition to [dataset](#dataset)
|
|
|
|
* `active`: true if element is active (hovered)
|
|
* `dataIndex`: index of the current data
|
|
* `parsed`: the parsed data values for the given `dataIndex` and `datasetIndex`
|
|
* `raw`: the raw data values for the given `dataIndex` and `datasetIndex`
|
|
* `element`: the element (point, arc, bar, etc.) for this data
|
|
* `index`: same as `dataIndex`
|
|
* `type`: `'data'`
|
|
|
|
### scale
|
|
|
|
In addition to [chart](#chart)
|
|
|
|
* `scale`: the associated scale
|
|
* `type`: `'scale'`
|
|
|
|
### tick
|
|
|
|
In addition to [scale](#scale)
|
|
|
|
* `tick`: the associated tick object
|
|
* `index`: tick index
|
|
* `type`: `'tick'`
|
|
|
|
### tooltip
|
|
|
|
In addition to [chart](#chart)
|
|
|
|
* `tooltip`: the tooltip object
|
|
* `tooltipItems`: the items the tooltip is displaying
|