---
title: Getting started
-anchor: getting-started
+anchor: scales
---
###Scales
Scales in v2.0 of Chart.js are significantly more powerful, but also different than those of v1.0.
- Multiple x & y axes are now supported.
-- A built-in label auto-skip feature now detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
+- A built-in label auto-skip feature now detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
- Scale labels
Every scale extends a core scale class with the following options:
-```javascript
-Chart.defaults.scale = {
- display: true,
-
- // grid line settings
- gridLines: {
- show: true,
- color: "rgba(0, 0, 0, 0.1)",
- lineWidth: 1,
- drawOnChartArea: true,
- drawTicks: true,
- zeroLineWidth: 1,
- zeroLineColor: "rgba(0,0,0,0.25)",
- offsetGridLines: false,
- },
-
- // scale label
- scaleLabel: {
- fontColor: '#666',
- fontFamily: 'Helvetica Neue',
- fontSize: 12,
- fontStyle: 'normal',
-
- // actual label
- labelString: '',
-
- // display property
- show: false,
- },
-
- // label settings
- ticks: {
- beginAtZero: false,
- fontSize: 12,
- fontStyle: "normal",
- fontColor: "#666",
- fontFamily: "Helvetica Neue",
- maxTicksLimit: 11,
- maxRotation: 90,
- minRotation: 20,
- mirror: false,
- padding: 10,
- reverse: false,
- show: true,
- template: "<%=value%>",
- userCallback: false,
- },
-};
-```
+Name | Type | Default | Description
+--- |:---:| --- | ---
+display | Boolean | true | If true, show the scale.
+gridLines | Array | |
+*gridLines*.show | Boolean | true | If true, show the grid lines.
+*gridLines*.color | Color | "rgba(0, 0, 0, 0.1)" | Color of the grid lines.
+*gridLines*.lineWidth | Number | 1 | Width of the grid lines in number of pixels.
+*gridLines*.drawOnChartArea | Boolean | true | If true draw lines on the chart area, if false...
+*gridLines*.drawTicks | Boolean | true | If true draw ticks in the axis area, if false...
+*gridLines*.zeroLineWidth | Number | 1 | Width of the grid line for the first index (index 0).
+*gridLines*.zeroLineColor | Color | "rgba(0, 0, 0, 0.25)" | Color of the grid line for the first index (index 0).
+*gridLines*.offsetGridLines | Boolean | false | If true, offset labels from grid lines.
+scaleLabel | Array | | Label for the axis.
+*scaleLabel*.show | Boolean | false | Whether the label is displayed.
+*scaleLabel*.labelString | String | "" | The text for the label.
+*scaleLabel*.fontColor | Color | "#666" |
+*scaleLabel*.fontFamily| String | "Helvetica Neue" |
+*scaleLabel*.fontSize | Number | 12 |
+*scaleLabel*.fontStyle | String | "normal" |
+ticks | Array | | Settings for the ticks along the axis.
+*ticks*.beginAtZero | Boolean | false | If true the scale will be begin at 0, if false the ticks will begin at your smallest data value.
+*ticks*.fontSize | Number | 12 |
+*ticks*.fontStyle | String | "normal" |
+*ticks*.fontColor | Color | "#666" |
+*ticks*.fontFamily | String | "Helvetica Neue" |
+*ticks*.maxRotation | Number | 90 |
+*ticks*.minRotation | Number | 20 |
+*ticks*.mirror | Boolean | false |
+*ticks*.padding | Number | 10 |
+*ticks*.reverse | Boolean | false |
+*ticks*.show | Boolean | true |
+*ticks*.callback | Function | `function(value) { return '' + value; } ` |
The `userCallback` method may be used for advanced tick customization. The following callback would display every label in scientific notation
```javascript
// string/callback - By default, date objects are expected. You may use a pattern string from http://momentjs.com/docs/#/parsing/string-format/ to parse a time string format, or use a callback function that is passed the label, and must return a moment() instance.
format: false,
// string - By default, unit will automatically be detected. Override with 'week', 'month', 'year', etc. (see supported time measurements)
- unit: false,
+ unit: false,
// string - By default, no rounding is applied. To round, set to a supported time unit eg. 'week', 'month', 'year', etc.
- round: false,
+ round: false,
// string - By default, is set to the detected (or manually overridden) time unit's `display` property (see supported time measurements). To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/
displayFormat: false
},
//Number - The backdrop padding to the side of the label in pixels
backdropPaddingX: 2,
-
+
//Number - Limit the maximum number of ticks
maxTicksLimit: 11,
},
These are the customisation options specific to Bar charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.
-```javascript
-{
- // Boolean - if true, bars stack on top of each other
- stacked: false,
-
- hover: {
- // String - We use a label hover mode since the x axis displays data by the index in the dataset
- mode: "label"
- },
-
- scales: {
- // The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes.
- xAxes: [{
- // String - type of axis to use. Should not be changed from 'dataset'.
- scaleType: "dataset", // scatter should not use a dataset axis
-
- // Boolean - if true, show the scale
- display: true,
-
- // String - position of the scale. possible options are "top" and "bottom" for dataset scales
- position: "bottom",
-
- // String - id of the axis so that data can bind to it
- id: "x-axis-1", // need an ID so datasets can reference the scale
-
- // grid line settings
- gridLines: {
- // Boolean - if true, show the grid lines
- show: true,
-
- // String - color of the grid lines
- color: "rgba(0, 0, 0, 0.05)",
-
- // Number - width of the grid lines
- lineWidth: 1,
-
- // Boolean - if true draw lines on the chart area
- drawOnChartArea: true,
-
- // Boolean - if true draw ticks in the axis area
- drawTicks: true,
-
- // Number - width of the grid line for the first index (index 0)
- zeroLineWidth: 1,
-
- // String - color of the grid line for the first index
- zeroLineColor: "rgba(0,0,0,0.25)",
-
- // Boolean - if true, offset labels from grid lines
- offsetGridLines: false,
- },
-
- // label settings
- labels: {
- // Boolean - if true show labels
- show: true,
-
- // String - template string for labels
- template: "<%=value%>",
-
- // Number - label font size
- fontSize: 12,
-
- // String - label font style
- fontStyle: "normal",
-
- // String - label font color
- fontColor: "#666",
-
- // String - label font family
- fontFamily: "Helvetica Neue",
- },
- }],
- yAxes: [{
- // String - type of axis. 'linear' is the default but extensions may provide other types such as logarithmic
- scaleType: "linear",
-
- // Boolean - if true, show the scale
- display: true,
-
- // String - position of axis. Vertical axes can have either "left" or "right"
- position: "left",
-
- // ID of the axis for data binding
- id: "y-axis-1",
-
- // grid line settings
- gridLines: {
- // Boolean - if true, show the grid lines
- show: true,
-
- // String - color of the grid lines
- color: "rgba(0, 0, 0, 0.05)",
-
- // Number - width of the grid lines
- lineWidth: 1,
-
- // Boolean - if true draw lines on the chart area
- drawOnChartArea: true,
-
- // Boolean - if true draw ticks in the axis area
- drawTicks: true,
-
- // Number - width of the grid line representing a numerical value of 0
- zeroLineWidth: 1,
-
- // String - color of the grid line representing a numerical value of 0
- zeroLineColor: "rgba(0,0,0,0.25)",
- },
-
- // Boolean - if true ensures that the scale always has a 0 point
- beginAtZero: false,
-
- // Object - if specified, allows the user to override the step generation algorithm.
- // Contains the following values
- // start: // number to start at
- // stepWidth: // size of step
- // steps: // number of steps
- override: null,
-
- // label settings
- labels: {
- // Boolean - if true show labels
- show: true,
-
- // String - template string for labels
- template: "<%=value%>",
-
- // Function - if specified this is passed the tick value, index, and the array of all tick values. Returns a string that is used as the label for that value
- userCallback: null,
-
- // Number - label font size
- fontSize: 12,
-
- // String - label font style
- fontStyle: "normal",
-
- // String - label font color
- fontColor: "#666",
-
- // String - label font family
- fontFamily: "Helvetica Neue",
- },
- }],
- },
-};
-```
+The default options for bar chart are defined in `Chart.defaults.Bar`.
+
+Name | Type | Default | Description
+--- |:---:| --- | ---
+stacked | Boolean | false |
+*hover*.mode | String | "label" | Label's hover mode. "label" is used since the x axis displays data by the index in the dataset.
+scales | Array | - | -
+*scales*.xAxes | Array | | The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes.
+*Options for xAxes* | | |
+type | String | "Category" |
+display | Boolean | true | If true, show the scale.
+position | String | "bottom" | Position of the scale. Options are "top" and "bottom" for dataset scales.
+id | String | "x-axis-1" | Id of the axis so that data can bind to it
+categoryPercentage | Number | 0.8 | Specific to bar chart.
+barPercentage | Number | 0.9 |
+gridLines | Array | [See Scales](#scales). |
+*gridLines*.offsetGridLines | Boolean | true |
+scaleLabel | Array | [See Scales](#scales). |
+ticks | Array | [See Scales](#scales). |
+| | |
+*scales*.yAxes | Array | `[{ type: "linear" }]` |
+*Options for xAxes* | | |
+type | String | "linear" |
+display | Boolean | true | If true, show the scale.
+position | String | "left" | Position of the scale. Options are "left" and "right" for dataset scales.
+id | String | "y-axis-1" | Id of the axis so that data can bind to it
+gridLines | Array | [See Scales](#scales) |
+scaleLabel | Array | [See Scales](#scales) |
+ticks | Array | [See Scales](#scales) |
You can override these for your `Chart` instance by passing a second argument into the `Bar` method as an object with the keys you want to override.
For example, we could have a bar chart without a stroke on each bar by doing the following:
```javascript
-new Chart(ctx).Bar({
+new Chart(ctx,{
+ type:"bar",
data: data,
options: {
- barShowStroke: false
+ scales: {
+ xAxes: [{
+ stacked: true,
+ }],
+ yAxes: [{
+ stacked: true
+ }]
+ }
+ }
}
});
// This will create a chart with all of the default options, merged from the global config,
-// and the Bar chart defaults but this particular instance will have `barShowStroke` set to false.
+// and the Bar chart defaults but this particular instance will have `stacked` set to true for
+// both x and y axes.
```
We can also change these defaults values for each Bar type that is created, this object is available at `Chart.defaults.Bar`.
projects / thirdparty / Chart.js.git / commitdiff
