Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ var myChart = new Chart(ctx, {
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
beginAtZero: true
}]
}
}
Expand Down
7 changes: 4 additions & 3 deletions docs/axes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Axes are an integral part of a chart. They are used to determine how data maps t
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.
Expand All @@ -21,6 +22,7 @@ The following properties are common to all axes provided by Chart.js.
| `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
Expand Down Expand Up @@ -48,11 +50,10 @@ For example, to set the minimum value of 0 for all linear scales, you would do t

```javascript
Chart.scaleService.updateScaleDefaults('linear', {
ticks: {
min: 0
}
min: 0
});
```

## Creating New Axes

To create a new axis, see the [developer docs](../developers/axes.md).
4 changes: 1 addition & 3 deletions docs/axes/cartesian/category.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@ let chart = new Chart(ctx, {
options: {
scales: {
xAxes: [{
ticks: {
min: 'March'
}
min: 'March'
}]
}
}
Expand Down
26 changes: 15 additions & 11 deletions docs/axes/cartesian/linear.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,23 @@

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

| Name | Type | Description
| ---- | ---- | -----------
| `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
| `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)

## 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.
| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
| `stepSize` | `number` | | User defined fixed step size for the scale. [more...](#step-size)
| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)

## Axis Range Settings

Expand All @@ -22,8 +27,8 @@ Given the number of axis range settings, it is important to understand how they
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);
let minDataValue = Math.min(mostNegativeValue, options.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.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.
Expand All @@ -41,10 +46,8 @@ let chart = new Chart(ctx, {
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 50,
suggestedMax: 100
}
suggestedMin: 50,
suggestedMax: 100
}]
}
}
Expand All @@ -54,6 +57,7 @@ let chart = new Chart(ctx, {
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`.
Expand All @@ -62,9 +66,9 @@ This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5
let options = {
scales: {
yAxes: [{
max: 5,
min: 0,
ticks: {
max: 5,
min: 0,
stepSize: 0.5
}
}]
Expand Down
33 changes: 16 additions & 17 deletions docs/axes/radial/linear.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,30 @@ The following additional configuration options are provided by the radial linear

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)
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `angleLines` | `object` | | Angle line configuration. [more...](#angle-line-options)
| `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
| `gridLines` | `object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration)
| `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)
| `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options)
| `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)
| `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.
| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
| `stepSize` | `number` | | User defined fixed step size for the scale. [more...](#step-size)
| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
| `showLabelBackdrop` | `boolean` | `true` | If true, draw a background behind the tick labels.

## Axis Range Settings
Expand Down Expand Up @@ -58,10 +59,8 @@ let chart = new Chart(ctx, {
},
options: {
scale: {
ticks: {
suggestedMin: 50,
suggestedMax: 100
}
suggestedMin: 50,
suggestedMax: 100
}
}
});
Expand All @@ -77,9 +76,9 @@ This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5
```javascript
let options = {
scale: {
max: 5,
min: 0,
ticks: {
max: 5,
min: 0,
stepSize: 0.5
}
}
Expand Down
11 changes: 5 additions & 6 deletions docs/charts/bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,15 @@ A bar chart provides a way of showing data values represented as vertical bars.
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
"beginAtZero": true
}]
}
}
}
{% endchartjs %}

## Example Usage

```javascript
var myBarChart = new Chart(ctx, {
type: 'bar',
Expand Down Expand Up @@ -302,16 +301,15 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
"options": {
"scales": {
"xAxes": [{
"ticks": {
"beginAtZero": true
}
"beginAtZero": true
}]
}
}
}
{% endchartjs %}

## Example

```javascript
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
Expand All @@ -321,6 +319,7 @@ var myBarChart = new Chart(ctx, {
```

### Config Options

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`.
4 changes: 1 addition & 3 deletions docs/charts/mixed.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,7 @@ At this point we have a chart rendering how we'd like. It's important to note th
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
"beginAtZero": true
}]
}
}
Expand Down
6 changes: 2 additions & 4 deletions docs/charts/radar.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,10 +172,8 @@ options = {
angleLines: {
display: false
},
ticks: {
suggestedMin: 50,
suggestedMax: 100
}
suggestedMin: 50,
suggestedMax: 100
}
};
```
Expand Down
4 changes: 1 addition & 3 deletions docs/getting-started/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,7 @@ var myChart = new Chart(ctx, {
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
beginAtZero: true
}]
}
}
Expand Down
10 changes: 8 additions & 2 deletions docs/getting-started/v3-migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,15 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.
* `scales.[x/y]Axes.categoryPercentage` was moved to dataset option `categoryPercentage`
* `scales.[x/y]Axes.minBarLength` was moved to dataset option `minBarLength`
* `scales.[x/y]Axes.maxBarThickness` was moved to dataset option `maxBarThickness`
* `scales.[x/y]Axes.ticks.beginAtZero` was renamed to `scales.[x/y]Axes.beginAtZero`
* `scales.[x/y]Axes.ticks.max` was renamed to `scales.[x/y]Axes.max`
* `scales.[x/y]Axes.ticks.min` was renamed to `scales.[x/y]Axes.min`
* `scales.[x/y]Axes.ticks.reverse` was renamed to `scales.[x/y]Axes.reverse`
* `scales.[x/y]Axes.ticks.suggestedMax` was renamed to `scales.[x/y]Axes.suggestedMax`
* `scales.[x/y]Axes.ticks.suggestedMin` was renamed to `scales.[x/y]Axes.suggestedMin`
* `scales.[x/y]Axes.time.format` was renamed to `scales.[x/y]Axes.time.parser`
* `scales.[x/y]Axes.time.min` was renamed to `scales.[x/y]Axes.ticks.min`
* `scales.[x/y]Axes.time.max` was renamed to `scales.[x/y]Axes.ticks.max`
* `scales.[x/y]Axes.time.max` was renamed to `scales.[x/y]Axes.max`
* `scales.[x/y]Axes.time.min` was renamed to `scales.[x/y]Axes.min`

## Developer migration

Expand Down
6 changes: 2 additions & 4 deletions samples/charts/line/interpolation-modes.html
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,8 @@
display: true,
labelString: 'Value'
},
ticks: {
suggestedMin: -10,
suggestedMax: 200,
}
suggestedMin: -10,
suggestedMax: 200,
}]
}
}
Expand Down
4 changes: 1 addition & 3 deletions samples/charts/radar.html
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,7 @@
text: 'Chart.js Radar Chart'
},
scale: {
ticks: {
beginAtZero: true
}
beginAtZero: true
}
}
};
Expand Down
4 changes: 2 additions & 2 deletions samples/scales/gridlines-display.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@
}],
yAxes: [{
gridLines: gridlines,
min: 0,
max: 100,
ticks: {
min: 0,
max: 100,
stepSize: 10
}
}]
Expand Down
4 changes: 2 additions & 2 deletions samples/scales/gridlines-style.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@
drawBorder: false,
color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
},
min: 0,
max: 100,
ticks: {
min: 0,
max: 100,
stepSize: 10
}
}]
Expand Down
10 changes: 4 additions & 6 deletions samples/scales/linear/min-max-suggested.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,11 @@
},
scales: {
yAxes: [{
ticks: {
// the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
suggestedMin: 10,
// the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
suggestedMin: 10,

// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
suggestedMax: 50
}
// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
suggestedMax: 50
}]
}
}
Expand Down
6 changes: 2 additions & 4 deletions samples/scales/linear/min-max.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,8 @@
},
scales: {
yAxes: [{
ticks: {
min: 10,
max: 50
}
min: 10,
max: 50
}]
}
}
Expand Down
5 changes: 2 additions & 3 deletions samples/scales/linear/step-size.html
Original file line number Diff line number Diff line change
Expand Up @@ -94,10 +94,9 @@
display: true,
labelString: 'Value'
},
min: 0,
max: 100,
ticks: {
min: 0,
max: 100,

// forces step size to be 5 units
stepSize: 5
}
Expand Down
4 changes: 1 addition & 3 deletions samples/scales/non-numeric-y.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,7 @@
display: true,
labelString: 'Request State'
},
ticks: {
reverse: true
}
reverse: true
}]
}
}
Expand Down
Loading