first commit
This commit is contained in:
58
WebRoot/node_modules/chart.js/docs/axes/README.md
generated
vendored
Normal file
58
WebRoot/node_modules/chart.js/docs/axes/README.md
generated
vendored
Normal file
@ -0,0 +1,58 @@
|
||||
# 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 know as ['cartesian axes'](./cartesian/README.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).
|
||||
|
||||
Scales in Chart.js >V2.0 are significantly more powerful, but also different than those of v1.0.
|
||||
* Multiple X & Y axes are supported.
|
||||
* A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
|
||||
* Scale titles are supported
|
||||
* New scale types can be extended without writing an entirely new chart type
|
||||
|
||||
# Common Configuration
|
||||
|
||||
The following properties are common to all axes provided by Chart.js
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `display` | `Boolean` | `true` | If set to `false` the axis is hidden from view. Overrides *gridLines.display*, *scaleLabel.display*, and *ticks.display*.
|
||||
| `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks)
|
||||
| `weight` | `Number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
|
||||
|
||||
## Callbacks
|
||||
There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process.
|
||||
|
||||
| Name | Arguments | Description
|
||||
| ---- | --------- | -----------
|
||||
| `beforeUpdate` | `axis` | Callback called before the update process starts.
|
||||
| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set.
|
||||
| `afterSetDimensions` | `axis` | Callback that runs after dimensions are set.
|
||||
| `beforeDataLimits` | `axis` | Callback that runs before data limits are determined.
|
||||
| `afterDataLimits` | `axis` | Callback that runs after data limits are determined.
|
||||
| `beforeBuildTicks` | `axis` | Callback that runs before ticks are created.
|
||||
| `afterBuildTicks` | `axis` | Callback that runs after ticks are created. Useful for filtering ticks.
|
||||
| `beforeTickToLabelConversion` | `axis` | Callback that runs before ticks are converted into strings.
|
||||
| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
|
||||
| `beforeCalculateTickRotation` | `axis` | Callback that runs before tick rotation is determined.
|
||||
| `afterCalculateTickRotation` | `axis` | Callback that runs after tick rotation is determined.
|
||||
| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
|
||||
| `afterFit` | `axis` | Callback that runs after the scale fits to the canvas.
|
||||
| `afterUpdate` | `axis` | Callback that runs at the end of the update process.
|
||||
|
||||
## 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.
|
||||
|
||||
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', {
|
||||
ticks: {
|
||||
min: 0
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Creating New Axes
|
||||
To create a new axis, see the [developer docs](../developers/axes.md).
|
||||
105
WebRoot/node_modules/chart.js/docs/axes/cartesian/README.md
generated
vendored
Normal file
105
WebRoot/node_modules/chart.js/docs/axes/cartesian/README.md
generated
vendored
Normal file
@ -0,0 +1,105 @@
|
||||
# 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.
|
||||
|
||||
* [linear](./linear.md#linear-cartesian-axis)
|
||||
* [logarithmic](./logarithmic.md#logarithmic-cartesian-axis)
|
||||
* [category](./category.md#category-cartesian-axis)
|
||||
* [time](./time.md#time-cartesian-axis)
|
||||
|
||||
# Common Configuration
|
||||
|
||||
All of the included cartesian axes support a number of common options.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `type` | `String` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
|
||||
| `position` | `String` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'`
|
||||
| `offset` | `Boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` in the bar chart by default.
|
||||
| `id` | `String` | | The ID is used to link datasets and scale axes together. [more...](#axis-id)
|
||||
| `gridLines` | `Object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration)
|
||||
| `scaleLabel` | `Object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration)
|
||||
| `ticks` | `Object` | | Tick configuration. [more...](#tick-configuration)
|
||||
|
||||
## Tick Configuration
|
||||
The following options are common to all cartesian axes but do not apply to other axes.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `autoSkip` | `Boolean` | `true` | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what
|
||||
| `autoSkipPadding` | `Number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled. *Note: Only applicable to horizontal scales.*
|
||||
| `labelOffset` | `Number` | `0` | Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas*
|
||||
| `maxRotation` | `Number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
|
||||
| `minRotation` | `Number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.*
|
||||
| `mirror` | `Boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
|
||||
| `padding` | `Number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
|
||||
|
||||
## Axis ID
|
||||
The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used.
|
||||
|
||||
```javascript
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
// This dataset appears on the first axis
|
||||
yAxisID: 'first-y-axis'
|
||||
}, {
|
||||
// This dataset appears on the second axis
|
||||
yAxisID: 'second-y-axis'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
id: 'first-y-axis',
|
||||
type: 'linear'
|
||||
}, {
|
||||
id: 'second-y-axis',
|
||||
type: 'linear'
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
# Creating Multiple Axes
|
||||
|
||||
With cartesian axes, it is possible to create multiple X and Y axes. To do so, you can add multiple configuration objects to the `xAxes` and `yAxes` properties. When adding new axes, it is important to ensure that you specify the type of the new axes as default types are **not** used in this case.
|
||||
|
||||
In the example below, we are creating two Y axes. We then use the `yAxisID` property to map the datasets to their correct axes.
|
||||
|
||||
```javascript
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [20, 50, 100, 75, 25, 0],
|
||||
label: 'Left dataset',
|
||||
|
||||
// This binds the dataset to the left y axis
|
||||
yAxisID: 'left-y-axis'
|
||||
}, {
|
||||
data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
|
||||
label: 'Right dataset',
|
||||
|
||||
// This binds the dataset to the right y axis
|
||||
yAxisID: 'right-y-axis',
|
||||
}],
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
id: 'left-y-axis',
|
||||
type: 'linear',
|
||||
position: 'left'
|
||||
}, {
|
||||
id: 'right-y-axis',
|
||||
type: 'linear',
|
||||
position: 'right'
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
69
WebRoot/node_modules/chart.js/docs/axes/cartesian/category.md
generated
vendored
Normal file
69
WebRoot/node_modules/chart.js/docs/axes/cartesian/category.md
generated
vendored
Normal file
@ -0,0 +1,69 @@
|
||||
# Category Cartesian 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.
|
||||
|
||||
Specifying any of the settings above defines the x axis as `type: category` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.
|
||||
|
||||
## Category Axis Definition
|
||||
|
||||
Globally:
|
||||
|
||||
```javascript
|
||||
let chart = new Chart(ctx, {
|
||||
type: ...
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
|
||||
datasets: ...
|
||||
},
|
||||
});
|
||||
```
|
||||
As part of axis definition:
|
||||
|
||||
```javascript
|
||||
let chart = new Chart(ctx, {
|
||||
type: ...
|
||||
data: ...
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'category',
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Tick 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).
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `labels` | `Array[String]` | - | An array of labels to display.
|
||||
| `min` | `String` | | The minimum item to display. [more...](#min-max-configuration)
|
||||
| `max` | `String` | | The maximum item to display. [more...](#min-max-configuration)
|
||||
|
||||
## Min Max Configuration
|
||||
For both the `min` and `max` properties, the value must be in the `labels` array. In the example below, the x axis would only display "March" through "June".
|
||||
|
||||
```javascript
|
||||
let chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [10, 20, 30, 40, 50, 60]
|
||||
}],
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
min: 'March'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
74
WebRoot/node_modules/chart.js/docs/axes/cartesian/linear.md
generated
vendored
Normal file
74
WebRoot/node_modules/chart.js/docs/axes/cartesian/linear.md
generated
vendored
Normal file
@ -0,0 +1,74 @@
|
||||
# Linear Cartesian 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.
|
||||
|
||||
## 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).
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `beginAtZero` | `Boolean` | | if true, scale will include 0 if it is not already included.
|
||||
| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
|
||||
| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
|
||||
| `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show.
|
||||
| `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size)
|
||||
| `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
|
||||
| `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
|
||||
|
||||
## Axis Range Settings
|
||||
|
||||
Given the number of axis range settings, it is important to understand how they all interact with each other.
|
||||
|
||||
The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
|
||||
|
||||
```javascript
|
||||
let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
|
||||
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
|
||||
```
|
||||
|
||||
In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the `suggestedMin` setting, it is ignored.
|
||||
|
||||
```javascript
|
||||
let chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'First dataset',
|
||||
data: [0, 20, 40, 50]
|
||||
}],
|
||||
labels: ['January', 'February', 'March', 'April']
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMin: 50,
|
||||
suggestedMax: 100
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
|
||||
|
||||
## Step Size
|
||||
If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
|
||||
|
||||
This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
|
||||
|
||||
```javascript
|
||||
let options = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
max: 5,
|
||||
min: 0,
|
||||
stepSize: 0.5
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
```
|
||||
12
WebRoot/node_modules/chart.js/docs/axes/cartesian/logarithmic.md
generated
vendored
Normal file
12
WebRoot/node_modules/chart.js/docs/axes/cartesian/logarithmic.md
generated
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
# 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 following options are provided by the logarithmic scale. They are all located in the `ticks` sub options. These options extend the [common tick configuration](README.md#tick-configuration).
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data.
|
||||
| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data.
|
||||
152
WebRoot/node_modules/chart.js/docs/axes/cartesian/time.md
generated
vendored
Normal file
152
WebRoot/node_modules/chart.js/docs/axes/cartesian/time.md
generated
vendored
Normal file
@ -0,0 +1,152 @@
|
||||
# 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.
|
||||
|
||||
## Data Sets
|
||||
|
||||
### Input Data
|
||||
|
||||
The x-axis data points may additionally be specified via the `t` attribute when using the time scale.
|
||||
|
||||
data: [{
|
||||
x: new Date(),
|
||||
y: 1
|
||||
}, {
|
||||
t: new Date(),
|
||||
y: 10
|
||||
}]
|
||||
|
||||
|
||||
### Date Formats
|
||||
|
||||
When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See [Moment.js docs](http://momentjs.com/docs/#/parsing/) for details.
|
||||
|
||||
## 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).
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `distribution` | `String` | `linear` | How data is plotted. [more...](#scale-distribution)
|
||||
| `bounds` | `String` | `data` | Determines the scale bounds. [more...](#scale-bounds)
|
||||
| `ticks.source` | `String` | `auto` | How ticks are generated. [more...](#ticks-source)
|
||||
| `time.displayFormats` | `Object` | | Sets how different time units are displayed. [more...](#display-formats)
|
||||
| `time.isoWeekday` | `Boolean` | `false` | If true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday.
|
||||
| `time.max` | [Time](#date-formats) | | If defined, this will override the data maximum
|
||||
| `time.min` | [Time](#date-formats) | | If defined, this will override the data minimum
|
||||
| `time.parser` | `String/Function` | | Custom parser for dates. [more...](#parser)
|
||||
| `time.round` | `String` | `false` | If defined, dates will be rounded to the start of this unit. See [Time Units](#time-units) below for the allowed units.
|
||||
| `time.tooltipFormat` | `String` | | The moment js format string to use for the tooltip.
|
||||
| `time.unit` | `String` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details.
|
||||
| `time.stepSize` | `Number` | `1` | The number of units between grid lines.
|
||||
| `time.minUnit` | `String` | `'millisecond'` | The minimum display format to be used for a time unit.
|
||||
|
||||
### Time Units
|
||||
|
||||
The following time measurements are supported. The names can be passed as strings to the `time.unit` config option to force a certain unit.
|
||||
|
||||
* millisecond
|
||||
* second
|
||||
* minute
|
||||
* hour
|
||||
* day
|
||||
* week
|
||||
* month
|
||||
* quarter
|
||||
* year
|
||||
|
||||
For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
|
||||
|
||||
```javascript
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
time: {
|
||||
unit: 'month'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 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](http://momentjs.com/docs/#/displaying/format/) for the allowable format strings.
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
```javascript
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
quarter: 'MMM YYYY'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 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: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
distribution: 'series'
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Scale Bounds
|
||||
|
||||
The `bounds` property controls the scale boundary strategy (bypassed by min/max time options)
|
||||
|
||||
* `'data'`: make sure data are fully visible, labels outside are removed
|
||||
* `'ticks'`: make sure ticks are fully visible, data outside are truncated
|
||||
|
||||
### Ticks Source
|
||||
|
||||
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)
|
||||
* `'labels'`: generates ticks from user given `data.labels` values ONLY
|
||||
|
||||
### Parser
|
||||
If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date.
|
||||
|
||||
If this is a function, it must return a moment.js object given the appropriate data value.
|
||||
44
WebRoot/node_modules/chart.js/docs/axes/labelling.md
generated
vendored
Normal file
44
WebRoot/node_modules/chart.js/docs/axes/labelling.md
generated
vendored
Normal file
@ -0,0 +1,44 @@
|
||||
# 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.
|
||||
|
||||
## Scale Title Configuration
|
||||
|
||||
The scale label configuration is nested under the scale configuration in the `scaleLabel` key. It defines options for the scale title. Note that this only applies to cartesian axes.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `display` | `Boolean` | `false` | If true, display the axis title.
|
||||
| `labelString` | `String` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
|
||||
| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height))
|
||||
| `fontColor` | `Color` | `'#666'` | Font color for scale title.
|
||||
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the scale title, follows CSS font-family options.
|
||||
| `fontSize` | `Number` | `12` | Font size for scale title.
|
||||
| `fontStyle` | `String` | `'normal'` | Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
|
||||
| `padding` | `Number/Object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
|
||||
|
||||
## Creating Custom Tick Formats
|
||||
|
||||
It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to override the `ticks.callback` method in the axis configuration.
|
||||
In the following example, every label of the Y axis would be displayed with a dollar sign at the front..
|
||||
|
||||
If the callback returns `null` or `undefined` the associated grid line will be hidden.
|
||||
|
||||
```javascript
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
// Include a dollar sign in the ticks
|
||||
callback: function(value, index, values) {
|
||||
return '$' + value;
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
5
WebRoot/node_modules/chart.js/docs/axes/radial/README.md
generated
vendored
Normal file
5
WebRoot/node_modules/chart.js/docs/axes/radial/README.md
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
# 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)
|
||||
110
WebRoot/node_modules/chart.js/docs/axes/radial/linear.md
generated
vendored
Normal file
110
WebRoot/node_modules/chart.js/docs/axes/radial/linear.md
generated
vendored
Normal file
@ -0,0 +1,110 @@
|
||||
# Linear Radial Axis
|
||||
|
||||
The linear scale is use 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.
|
||||
|
||||
## Configuration Options
|
||||
|
||||
The axis has configuration properties for ticks, angle lines (line that appear in a radar chart outward from the center), pointLabels (labels around the edge in a radar chart). The following sections define each of the properties in those sections.
|
||||
|
||||
| Name | Type | Description
|
||||
| ---- | ---- | -----------
|
||||
| `angleLines` | `Object` | Angle line configuration. [more...](#angle-line-options)
|
||||
| `gridLines` | `Object` | Grid line configuration. [more...](../styling.md#grid-line-configuration)
|
||||
| `pointLabels` | `Object` | Point label configuration. [more...](#point-label-options)
|
||||
| `ticks` | `Object` | Tick configuration. [more...](#tick-options)
|
||||
|
||||
## 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.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops
|
||||
| `backdropPaddingX` | `Number` | `2` | Horizontal padding of label backdrop.
|
||||
| `backdropPaddingY` | `Number` | `2` | Vertical padding of label backdrop.
|
||||
| `beginAtZero` | `Boolean` | `false` | if true, scale will include 0 if it is not already included.
|
||||
| `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
|
||||
| `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
|
||||
| `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show.
|
||||
| `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size)
|
||||
| `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
|
||||
| `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
|
||||
| `showLabelBackdrop` | `Boolean` | `true` | If true, draw a background behind the tick labels
|
||||
|
||||
## Axis Range Settings
|
||||
|
||||
Given the number of axis range settings, it is important to understand how they all interact with each other.
|
||||
|
||||
The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
|
||||
|
||||
```javascript
|
||||
let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
|
||||
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
|
||||
```
|
||||
|
||||
In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the `suggestedMin` setting, it is ignored.
|
||||
|
||||
```javascript
|
||||
let chart = new Chart(ctx, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'First dataset',
|
||||
data: [0, 20, 40, 50]
|
||||
}],
|
||||
labels: ['January', 'February', 'March', 'April']
|
||||
},
|
||||
options: {
|
||||
scale: {
|
||||
ticks: {
|
||||
suggestedMin: 50,
|
||||
suggestedMax: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
|
||||
|
||||
## Step Size
|
||||
If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
|
||||
|
||||
This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
|
||||
|
||||
```javascript
|
||||
let options = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
max: 5,
|
||||
min: 0,
|
||||
stepSize: 0.5
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Angle Line 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. Note that these options only apply if `angleLines.display` is true.
|
||||
|
||||
| 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
|
||||
|
||||
## 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. Note that these options only apply if `pointLabels.display` is true.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
|
||||
| `fontColor` | `Color/Color[]` | `'#666'` | Font color for point labels.
|
||||
| `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.
|
||||
61
WebRoot/node_modules/chart.js/docs/axes/styling.md
generated
vendored
Normal file
61
WebRoot/node_modules/chart.js/docs/axes/styling.md
generated
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
# 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.
|
||||
| `color` | `Color/Color[]` | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
|
||||
| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
|
||||
| `borderDashOffset` | `Number` | `0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
|
||||
| `lineWidth` | `Number/Number[]` | `1` | Stroke width of grid lines.
|
||||
| `drawBorder` | `Boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
|
||||
| `drawOnChartArea` | `Boolean` | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
|
||||
| `drawTicks` | `Boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
|
||||
| `tickMarkLength` | `Number` | `10` | Length in pixels that the grid lines will draw into the axis area.
|
||||
| `zeroLineWidth` | `Number` | `1` | Stroke width of the grid line for the first index (index 0).
|
||||
| `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
|
||||
| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
|
||||
| `zeroLineBorderDashOffset` | `Number` | `0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
|
||||
| `offsetGridLines` | `Boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` in the bar chart by default.
|
||||
|
||||
## Tick Configuration
|
||||
The tick configuration is nested under the scale configuration in the `ticks` key. It defines options for the tick marks that are generated by the axis.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
|
||||
| `display` | `Boolean` | `true` | If true, show tick marks
|
||||
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
|
||||
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
|
||||
| `fontSize` | `Number` | `12` | Font size for the tick labels.
|
||||
| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
|
||||
| `reverse` | `Boolean` | `false` | Reverses order of tick labels.
|
||||
| `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above.
|
||||
| `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above.
|
||||
|
||||
## Minor Tick Configuration
|
||||
The minorTick configuration is nested under the ticks configuration in the `minor` key. It defines options for the minor tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
|
||||
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
|
||||
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
|
||||
| `fontSize` | `Number` | `12` | Font size for the tick labels.
|
||||
| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
|
||||
|
||||
## Major Tick Configuration
|
||||
The majorTick configuration is nested under the ticks configuration in the `major` key. It defines options for the major tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| -----| ---- | --------| -----------
|
||||
| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
|
||||
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
|
||||
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
|
||||
| `fontSize` | `Number` | `12` | Font size for the tick labels.
|
||||
| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
|
||||
Reference in New Issue
Block a user