You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/axes/README.md
+4-3Lines changed: 4 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,6 +5,7 @@ Axes are an integral part of a chart. They are used to determine how data maps t
5
5
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).
6
6
7
7
Scales in Chart.js >v2.0 are significantly more powerful, but also different than those of v1.0.
8
+
8
9
* Multiple X & Y axes are supported.
9
10
* A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
10
11
* Scale titles are supported.
@@ -21,6 +22,7 @@ The following properties are common to all axes provided by Chart.js.
21
22
| `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
22
23
23
24
### Callbacks
25
+
24
26
There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process.
25
27
26
28
| Name | Arguments | Description
@@ -48,11 +50,10 @@ For example, to set the minimum value of 0 for all linear scales, you would do t
Copy file name to clipboardExpand all lines: docs/axes/cartesian/linear.md
+15-11Lines changed: 15 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,18 +2,23 @@
2
2
3
3
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.
4
4
5
+
## Configuration Options
6
+
7
+
| Name | Type | Description
8
+
| ---- | ---- | -----------
9
+
| `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
10
+
| `suggestedMax` | `number` | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
11
+
| `suggestedMin` | `number` | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
12
+
5
13
## Tick Configuration Options
6
14
7
15
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).
8
16
9
17
| Name | Type | Default | Description
10
18
| ---- | ---- | ------- | -----------
11
-
| `beginAtZero` | `boolean` | | if true, scale will include 0 if it is not already included.
12
19
| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
13
20
| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
14
21
| `stepSize` | `number` | | User defined fixed step size for the scale. [more...](#step-size)
15
-
| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
16
-
| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
17
22
18
23
## Axis Range Settings
19
24
@@ -22,8 +27,8 @@ Given the number of axis range settings, it is important to understand how they
22
27
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.
23
28
24
29
```javascript
25
-
let minDataValue =Math.min(mostNegativeValue, options.ticks.suggestedMin);
26
-
let maxDataValue =Math.max(mostPositiveValue, options.ticks.suggestedMax);
30
+
let minDataValue =Math.min(mostNegativeValue, options.suggestedMin);
31
+
let maxDataValue =Math.max(mostPositiveValue, options.suggestedMax);
27
32
```
28
33
29
34
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.
@@ -41,10 +46,8 @@ let chart = new Chart(ctx, {
41
46
options: {
42
47
scales: {
43
48
yAxes: [{
44
-
ticks: {
45
-
suggestedMin:50,
46
-
suggestedMax:100
47
-
}
49
+
suggestedMin:50,
50
+
suggestedMax:100
48
51
}]
49
52
}
50
53
}
@@ -54,6 +57,7 @@ let chart = new Chart(ctx, {
54
57
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.
55
58
56
59
## Step Size
60
+
57
61
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.
58
62
59
63
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`.
@@ -62,9 +66,9 @@ This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5
Copy file name to clipboardExpand all lines: docs/axes/radial/linear.md
+16-17Lines changed: 16 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,29 +8,30 @@ The following additional configuration options are provided by the radial linear
8
8
9
9
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.
10
10
11
-
| Name | Type | Description
12
-
| ---- | ---- | -----------
13
-
| `angleLines` | `object` | Angle line configuration. [more...](#angle-line-options)
14
-
| `gridLines` | `object` | Grid line configuration. [more...](../styling.md#grid-line-configuration)
15
-
| `pointLabels` | `object` | Point label configuration. [more...](#point-label-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.
20
26
21
27
| Name | Type | Default | Description
22
28
| ---- | ---- | ------- | -----------
23
29
| `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
Copy file name to clipboardExpand all lines: docs/charts/bar.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,16 +42,15 @@ A bar chart provides a way of showing data values represented as vertical bars.
42
42
"options": {
43
43
"scales": {
44
44
"yAxes": [{
45
-
"ticks": {
46
-
"beginAtZero": true
47
-
}
45
+
"beginAtZero": true
48
46
}]
49
47
}
50
48
}
51
49
}
52
50
{% endchartjs %}
53
51
54
52
## Example Usage
53
+
55
54
```javascript
56
55
var myBarChart =newChart(ctx, {
57
56
type:'bar',
@@ -302,16 +301,15 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
302
301
"options": {
303
302
"scales": {
304
303
"xAxes": [{
305
-
"ticks": {
306
-
"beginAtZero": true
307
-
}
304
+
"beginAtZero": true
308
305
}]
309
306
}
310
307
}
311
308
}
312
309
{% endchartjs %}
313
310
314
311
## Example
312
+
315
313
```javascript
316
314
var myBarChart =newChart(ctx, {
317
315
type:'horizontalBar',
@@ -321,6 +319,7 @@ var myBarChart = new Chart(ctx, {
321
319
```
322
320
323
321
### Config Options
322
+
324
323
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.
325
324
326
325
The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.
0 commit comments