options: {
scales: {
yAxes: [{
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}]
}
}
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.
| `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
```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).
options: {
scales: {
xAxes: [{
- ticks: {
- min: 'March'
- }
+ min: 'March'
}]
}
}
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
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.
options: {
scales: {
yAxes: [{
- ticks: {
- suggestedMin: 50,
- suggestedMax: 100
- }
+ 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`.
let options = {
scales: {
yAxes: [{
+ max: 5,
+ min: 0,
ticks: {
- max: 5,
- min: 0,
stepSize: 0.5
}
}]
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
},
options: {
scale: {
- ticks: {
- suggestedMin: 50,
- suggestedMax: 100
- }
+ suggestedMin: 50,
+ suggestedMax: 100
}
}
});
```javascript
let options = {
scale: {
+ max: 5,
+ min: 0,
ticks: {
- max: 5,
- min: 0,
stepSize: 0.5
}
}
"options": {
"scales": {
"yAxes": [{
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
{% endchartjs %}
## Example Usage
+
```javascript
var myBarChart = new Chart(ctx, {
type: 'bar',
"options": {
"scales": {
"xAxes": [{
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
{% endchartjs %}
## Example
+
```javascript
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
```
### 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`.
"options": {
"scales": {
"yAxes": [{
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
angleLines: {
display: false
},
- ticks: {
- suggestedMin: 50,
- suggestedMax: 100
- }
+ suggestedMin: 50,
+ suggestedMax: 100
}
};
```
options: {
scales: {
yAxes: [{
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}]
}
}
* `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
display: true,
labelString: 'Value'
},
- ticks: {
- suggestedMin: -10,
- suggestedMax: 200,
- }
+ suggestedMin: -10,
+ suggestedMax: 200,
}]
}
}
text: 'Chart.js Radar Chart'
},
scale: {
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
}
};
}],
yAxes: [{
gridLines: gridlines,
+ min: 0,
+ max: 100,
ticks: {
- min: 0,
- max: 100,
stepSize: 10
}
}]
drawBorder: false,
color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
},
+ min: 0,
+ max: 100,
ticks: {
- min: 0,
- max: 100,
stepSize: 10
}
}]
},
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
}]
}
}
},
scales: {
yAxes: [{
- ticks: {
- min: 10,
- max: 50
- }
+ min: 10,
+ max: 50
}]
}
}
display: true,
labelString: 'Value'
},
+ min: 0,
+ max: 100,
ticks: {
- min: 0,
- max: 100,
-
// forces step size to be 5 units
stepSize: 5
}
display: true,
labelString: 'Request State'
},
- ticks: {
- reverse: true
- }
+ reverse: true
}]
}
}
angleLines: {
display: false
},
+ beginAtZero: true,
gridLines: {
circular: true
},
pointLabels: {
display: false
- },
- ticks: {
- beginAtZero: true
}
},
}
// parse min/max value, so we can properly determine min/max for other scales
- scale._userMin = scale._parse(scale.options.ticks.min);
- scale._userMax = scale._parse(scale.options.ticks.max);
+ scale._userMin = scale._parse(scale.options.min);
+ scale._userMax = scale._parse(scale.options.max);
// TODO(SB): I think we should be able to remove this custom case (options.scale)
// and consider it as a regular scale part of the "scales"" map only! This would
function scaleClip(scale, allowedOverflow) {
- var tickOpts = scale && scale.options.ticks || {};
- var reverse = tickOpts.reverse;
- var min = tickOpts.min === undefined ? allowedOverflow : 0;
- var max = tickOpts.max === undefined ? allowedOverflow : 0;
+ var opts = scale && scale.options || {};
+ var reverse = opts.reverse;
+ var min = opts.min === undefined ? allowedOverflow : 0;
+ var max = opts.max === undefined ? allowedOverflow : 0;
return {
start: reverse ? max : min,
end: reverse ? min : max
display: true,
position: 'left',
offset: false,
+ reverse: false,
+ beginAtZero: false,
// grid line settings
gridLines: {
// label settings
ticks: {
- beginAtZero: false,
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 0,
- reverse: false,
display: true,
autoSkip: true,
autoSkipPadding: 0,
*/
_configure() {
var me = this;
- var reversePixels = me.options.ticks.reverse;
+ var reversePixels = me.options.reverse;
var startPixel, endPixel;
if (me.isHorizontal()) {
var scaleLabelAlign = scaleLabel.align;
var position = options.position;
var rotation = 0;
- var isReverse = me.options.ticks.reverse;
+ var isReverse = me.options.reverse;
var scaleLabelX, scaleLabelY, textAlign;
if (me.isHorizontal()) {
return null;
}
- start = options.ticks.reverse ? scale.max : scale.min;
- end = options.ticks.reverse ? scale.min : scale.max;
+ start = options.reverse ? scale.max : scale.min;
+ end = options.reverse ? scale.min : scale.max;
center = scale.getPointPositionForValue(0, start);
for (i = 0; i < length; ++i) {
point = fill === 'start' || fill === 'end'
me.min = 0;
}
- // Common base implementation to handle ticks.min, ticks.max, ticks.beginAtZero
+ // Common base implementation to handle min, max, beginAtZero
me.handleTickRangeOptions();
},
handleTickRangeOptions: function() {
var me = this;
var opts = me.options;
- var tickOpts = opts.ticks;
// If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
// do nothing since that would make the chart weird. If the user really wants a weird chart
// axis, they can manually override it
- if (tickOpts.beginAtZero) {
+ if (opts.beginAtZero) {
var minSign = helpers.sign(me.min);
var maxSign = helpers.sign(me.max);
}
}
- var setMin = tickOpts.min !== undefined || tickOpts.suggestedMin !== undefined;
- var setMax = tickOpts.max !== undefined || tickOpts.suggestedMax !== undefined;
+ var setMin = opts.min !== undefined || opts.suggestedMin !== undefined;
+ var setMax = opts.max !== undefined || opts.suggestedMax !== undefined;
- if (tickOpts.min !== undefined) {
- me.min = tickOpts.min;
- } else if (tickOpts.suggestedMin !== undefined) {
+ if (opts.min !== undefined) {
+ me.min = opts.min;
+ } else if (opts.suggestedMin !== undefined) {
if (me.min === null) {
- me.min = tickOpts.suggestedMin;
+ me.min = opts.suggestedMin;
} else {
- me.min = Math.min(me.min, tickOpts.suggestedMin);
+ me.min = Math.min(me.min, opts.suggestedMin);
}
}
- if (tickOpts.max !== undefined) {
- me.max = tickOpts.max;
- } else if (tickOpts.suggestedMax !== undefined) {
+ if (opts.max !== undefined) {
+ me.max = opts.max;
+ } else if (opts.suggestedMax !== undefined) {
if (me.max === null) {
- me.max = tickOpts.suggestedMax;
+ me.max = opts.suggestedMax;
} else {
- me.max = Math.max(me.max, tickOpts.suggestedMax);
+ me.max = Math.max(me.max, opts.suggestedMax);
}
}
// We set the min or the max but not both.
// So ensure that our range is good
// Inverted or 0 length range can happen when
- // ticks.min is set, and no datasets are visible
+ // min is set, and no datasets are visible
if (me.min >= me.max) {
if (setMin) {
me.max = me.min + 1;
if (me.min === me.max) {
me.max++;
- if (!tickOpts.beginAtZero) {
+ if (!opts.beginAtZero) {
me.min--;
}
}
var numericGeneratorOptions = {
maxTicks: maxTicks,
- min: tickOpts.min,
- max: tickOpts.max,
+ min: opts.min,
+ max: opts.max,
precision: tickOpts.precision,
stepSize: helpers.valueOrDefault(tickOpts.fixedStepSize, tickOpts.stepSize)
};
// range of the scale
helpers._setMinAndMaxByKey(ticks, me, 'value');
- if (tickOpts.reverse) {
+ if (opts.reverse) {
ticks.reverse();
me.start = me.max;
buildTicks: function() {
var me = this;
- var tickOpts = me.options.ticks;
+ var opts = me.options;
var reverse = !me.isHorizontal();
var generationOptions = {
// range of the scale
helpers._setMinAndMaxByKey(ticks, me, 'value');
- if (tickOpts.reverse) {
+ if (opts.reverse) {
reverse = !reverse;
me.start = me.max;
me.end = me.min;
me.min = helpers.isFinite(min) && !isNaN(min) ? min : 0;
me.max = helpers.isFinite(max) && !isNaN(max) ? max : 0;
- // Common base implementation to handle ticks.min, ticks.max, ticks.beginAtZero
+ // Common base implementation to handle min, max, beginAtZero
me.handleTickRangeOptions();
},
// Take into account half font size + the yPadding of the top value
var scalingFactor = me.drawingArea / (me.max - me.min);
- if (me.options.ticks.reverse) {
+ if (me.options.reverse) {
return (me.max - value) * scalingFactor;
}
return (value - me.min) * scalingFactor;
ctx.textBaseline = 'middle';
helpers.each(me.ticks, function(tick, index) {
- if (index === 0 && !tickOpts.reverse) {
+ if (index === 0 && !opts.reverse) {
return;
}
me._table = buildLookupTable(getTimestampsForTable(me), min, max, distribution);
me._offsets = computeOffsets(me._table, ticks, min, max, options);
- if (tickOpts.reverse) {
+ if (options.reverse) {
ticks.reverse();
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
"time": {
"parser": "YYYY"
},
+ "reverse": true,
"ticks": {
- "source": "labels",
- "reverse": true
+ "source": "labels"
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
"yAxes": [{
"display": false,
"stacked": true,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
"time": {
"parser": "YYYY"
},
+ "reverse": true,
"ticks": {
- "source": "labels",
- "reverse": true
+ "source": "labels"
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
"time": {
"parser": "YYYY"
},
+ "min": "2013",
"ticks": {
- "source": "labels",
- "min": "2013"
+ "source": "labels"
}
}],
"yAxes": [{
"display": false,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
"yAxes": [{
"display": false,
"stacked": true,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
},
scales: {
xAxes: [{display: false}],
- yAxes: [{display: false, ticks: {min: -10, max: 10}}]
+ yAxes: [{display: false, min: -10, max: 10}]
}
}
},
"scales": {
"xAxes": [{
"display": false,
- "ticks": {
- "min": -8,
- "max": 12
- }
+ "min": -8,
+ "max": 12
}],
"yAxes": [{
"display": false
"yAxes": [{
"display": false,
"stacked": true,
- "ticks": {
- "min": -8,
- "max": 12
- }
+ "min": -8,
+ "max": 12
}]
}
}
"xAxes": [{
"display": false,
"stacked": true,
- "ticks": {
- "min": -8,
- "max": 12
- }
+ "min": -8,
+ "max": 12
}],
"yAxes": [{
"display": false,
"scales": {
"xAxes": [{
"display": false,
- "ticks": {
- "min": -8,
- "max": 12
- }
+ "min": -8,
+ "max": 12
}],
"yAxes": [{
"display": false
"yAxes": [{
"display": false,
"stacked": true,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
"yAxes": [{
"display": false,
"stacked": true,
- "ticks": {
- "beginAtZero": true
- }
+ "beginAtZero": true
}]
}
}
scales: {
xAxes: [{ticks: {display: false}}],
yAxes: [{
+ min: 8,
+ max: 25,
+ beginAtZero: true,
ticks: {
- display: false,
- min: 8,
- max: 25,
- beginAtZero: true
+ display: false
}
}]
}
"xAxes": [{"display": false}],
"yAxes": [{
"display": false,
- "ticks": {
- "min": 0,
- "max": 4
- }
+ "min": 0,
+ "max": 4
}]
},
"elements": {
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
"title": false,
"scales": {
"xAxes": [{
+ "max": 3,
"ticks": {
- "max": 3,
"display": false
}
}],
"title": false,
"scales": {
"xAxes": [{
+ "min": -2,
"ticks": {
- "min": -2,
"display": false
}
}],
"title": false,
"scales": {
"xAxes": [{
+ "min": -2,
+ "max": 3,
"ticks": {
- "min": -2,
- "max": 3,
"display": false
}
}],
"scales": {
"xAxes": [{"ticks": {"display": false}}],
"yAxes": [{
+ "max": 6,
"ticks": {
- "max": 6,
"display": false
}
}]
"scales": {
"xAxes": [{"ticks": {"display": false}}],
"yAxes": [{
+ "min": 2,
"ticks": {
- "min": 2,
"display": false
}
}]
"scales": {
"xAxes": [{"ticks": {"display": false}}],
"yAxes": [{
+ "min": 2,
+ "max": 6,
"ticks": {
- "min": 2,
- "max": 6,
"display": false
}
}]
"title": false,
"scales": {
"xAxes": [{
+ "min": -2,
+ "max": 2,
"ticks": {
- "min": -2,
- "max": 2,
"display": false
}
}],
"yAxes": [{
+ "min": -2,
+ "max": 2,
"ticks": {
- "min": -2,
- "max": 2,
"display": false
}
}]
"xAxes": [{"display": false}],
"yAxes": [{
"display": false,
- "ticks": {
- "min": 0,
- "max": 4
- }
+ "min": 0,
+ "max": 4
}]
},
"elements": {
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
yAxes: [
{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
]
}
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
}
},
},
scale: {
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -1
- }
+ min: -1
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -1
- }
+ min: -1
}
}
},
},
scale: {
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
}
},
},
scale: {
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
"title": false,
"scale": {
"display": false,
- "ticks": {
- "min": 0,
- "max": 3
- }
+ "min": 0,
+ "max": 3
},
"elements": {
"line": {
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
},
scale: {
display: false,
- ticks: {
- min: -15
- }
+ min: -15
}
}
},
"position": "left",
"id": "y-axis-1",
"type": "linear",
+ "min": -100,
+ "max": 100,
"ticks": {
- "display": false,
- "min": -100,
- "max": 100
+ "display": false
},
"gridLines":{
"drawOnChartArea": false,
"type": "linear",
"id": "y-axis-2",
"position": "right",
+ "min": 0,
+ "max": 50,
"ticks": {
- "display": false,
- "min": 0,
- "max": 50
+ "display": false
},
"gridLines":{
"drawOnChartArea": false,
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
legend: false,
title: false,
scales: {
- xAxes: [{type: 'linear', display: false, ticks: {min: 0, max: 20}}],
- yAxes: [{display: false, ticks: {min: -15, max: 15}}]
+ xAxes: [{type: 'linear', display: false, min: 0, max: 20}],
+ yAxes: [{display: false, min: -15, max: 15}]
}
}
},
type: 'linear',
display: false,
stacked: true,
- ticks: {
- min: 50,
- max: 100
- }
+ min: 50,
+ max: 100
}]
}
}
options: {
scales: {
xAxes: [{
- ticks: {
- min: 'March',
- max: 'May',
- },
+ min: 'March',
+ max: 'May',
}]
}
}
options: {
scales: {
xAxes: [{
- ticks: {
- min: 'March',
- max: 'May',
- }
+ min: 'March',
+ max: 'May',
}],
yAxes: [{
stacked: true
options: {
scales: {
yAxes: [{
- ticks: {
- min: 'March',
- max: 'May',
- },
+ min: 'March',
+ max: 'May',
}]
}
}
stacked: true
}],
yAxes: [{
- ticks: {
- min: 'March',
- max: 'May',
- }
+ min: 'March',
+ max: 'May',
}]
}
}
}],
yAxes: [{
display: false,
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}]
}
}
responsive: false,
scales: {
yAxes: [{
- ticks: {
- min: 0,
- max: 10
- }
+ min: 0,
+ max: 10
}]
}
};
chart.update();
var yScale = chart.scales['y-axis-0'];
- expect(yScale.options.ticks.min).toBe(0);
- expect(yScale.options.ticks.max).toBe(10);
+ expect(yScale.options.min).toBe(0);
+ expect(yScale.options.max).toBe(10);
});
it ('should update scales options', function() {
}
});
- chart.options.scales.yAxes[0].ticks.min = 0;
- chart.options.scales.yAxes[0].ticks.max = 10;
+ chart.options.scales.yAxes[0].min = 0;
+ chart.options.scales.yAxes[0].max = 10;
chart.update();
var yScale = chart.scales['y-axis-0'];
- expect(yScale.options.ticks.min).toBe(0);
- expect(yScale.options.ticks.max).toBe(10);
+ expect(yScale.options.min).toBe(0);
+ expect(yScale.options.max).toBe(10);
});
it ('should update scales options from new object', function() {
var newScalesConfig = {
yAxes: [{
- ticks: {
- min: 0,
- max: 10
- }
+ min: 0,
+ max: 10
}]
};
chart.options.scales = newScalesConfig;
chart.update();
var yScale = chart.scales['y-axis-0'];
- expect(yScale.options.ticks.min).toBe(0);
- expect(yScale.options.ticks.max).toBe(10);
+ expect(yScale.options.min).toBe(0);
+ expect(yScale.options.max).toBe(10);
});
it ('should assign unique scale IDs', function() {
scales: {
yAxes: [{
id: 'yAxis0',
- ticks: {
- min: 0,
- max: 10
- }
+ min: 0,
+ max: 10
}]
}
}
var newScalesConfig = {
yAxes: [{
- ticks: {
- min: 0,
- max: 10
- }
+ min: 0,
+ max: 10
}]
};
chart.options.scales = newScalesConfig;
var yScale = chart.scales.yAxis0;
expect(yScale).toBeUndefined();
var newyScale = chart.scales['y-axis-0'];
- expect(newyScale.options.ticks.min).toBe(0);
- expect(newyScale.options.ticks.max).toBe(10);
+ expect(newyScale.options.min).toBe(0);
+ expect(newyScale.options.max).toBe(10);
});
it ('should update tooltip options', function() {
xAxes: [{
id: 'x',
type: 'linear',
- ticks: {
- min: -20,
- max: 20
- }
+ min: -20,
+ max: 20
}],
yAxes: [{
id: 'y',
xAxes: [{
type: 'logarithmic',
position: 'bottom',
+ min: 0.1,
+ max: 1,
ticks: {
- min: 0.1,
- max: 1,
callback: function(value) {
return value.toString();
}
}],
yAxes: [{
type: 'logarithmic',
+ min: 0.1,
+ max: 1,
ticks: {
- min: 0.1,
- max: 1,
callback: function(value) {
return value.toString();
}
var defaultConfig = Chart.scaleService.getScaleDefaults('category');
expect(defaultConfig).toEqual({
display: true,
+ reverse: false,
+ beginAtZero: false,
gridLines: {
color: 'rgba(0,0,0,0.1)',
offset: false,
scaleLabel: Chart.defaults.scale.scaleLabel,
ticks: {
- beginAtZero: false,
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 0,
- reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
autoSkip: true,
id: 'xScale0',
type: 'category',
position: 'bottom',
- ticks: {
- min: 'tick2',
- max: 'tick4'
- }
+ min: 'tick2',
+ max: 'tick4'
}],
yAxes: [{
id: 'yScale0',
id: 'yScale0',
type: 'category',
position: 'left',
- ticks: {
- min: '2',
- max: '4'
- }
+ min: '2',
+ max: '4'
}]
}
}
var defaultConfig = Chart.scaleService.getScaleDefaults('linear');
expect(defaultConfig).toEqual({
display: true,
-
gridLines: {
color: 'rgba(0,0,0,0.1)',
drawBorder: true,
},
position: 'left',
offset: false,
+ reverse: false,
+ beginAtZero: false,
scaleLabel: Chart.defaults.scale.scaleLabel,
ticks: {
- beginAtZero: false,
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 0,
- reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this work nicer, then check below
autoSkip: true,
yAxes: [{
id: 'yScale0',
type: 'linear',
- ticks: {
- suggestedMin: -10,
- suggestedMax: 15
- }
+ suggestedMin: -10,
+ suggestedMax: 15
}]
}
}
yAxes: [{
id: 'yScale0',
type: 'linear',
- ticks: {
- beginAtZero: true
- }
+ beginAtZero: true
}]
}
}
yAxes: [{
id: 'yScale0',
type: 'linear',
- ticks: {
- suggestedMax: 10,
- suggestedMin: -10
- }
+ suggestedMax: 10,
+ suggestedMin: -10
}]
}
}
yAxes: [{
id: 'yScale0',
type: 'linear',
- ticks: {
- max: 1010,
- min: -1010
- }
+ max: 1010,
+ min: -1010
}]
}
}
yAxes: [{
id: 'yScale0',
type: 'linear',
+ min: 1,
+ max: 11,
ticks: {
- min: 1,
- max: 11,
stepSize: 2
}
}]
expect(chart.scales.yScale0).not.toEqual(undefined); // must construct
expect(getLabels(chart.scales.yScale0)).toEqual(['50', '45', '40', '35', '30', '25', '20']);
- chart.scales.yScale0.options.ticks.beginAtZero = true;
+ chart.scales.yScale0.options.beginAtZero = true;
chart.update();
expect(getLabels(chart.scales.yScale0)).toEqual(['50', '45', '40', '35', '30', '25', '20', '15', '10', '5', '0']);
chart.update();
expect(getLabels(chart.scales.yScale0)).toEqual(['0', '-5', '-10', '-15', '-20', '-25', '-30', '-35', '-40', '-45', '-50']);
- chart.scales.yScale0.options.ticks.beginAtZero = false;
+ chart.scales.yScale0.options.beginAtZero = false;
chart.update();
expect(getLabels(chart.scales.yScale0)).toEqual(['-20', '-25', '-30', '-35', '-40', '-45', '-50']);
});
yAxes: [{
id: 'yScale0',
type: 'linear',
- ticks: {
- reverse: true
- }
+ reverse: true
}]
}
}
expect(getLabels(chart.scales.yScale)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5']);
- chart.options.scales.yAxes[0].ticks.min = 0.3;
- chart.options.scales.yAxes[0].ticks.max = 2.8;
+ chart.options.scales.yAxes[0].min = 0.3;
+ chart.options.scales.yAxes[0].max = 2.8;
chart.update();
expect(getLabels(chart.scales.yScale)).toEqual(['2.8', '2.5', '2.0', '1.5', '1.0', '0.5', '0.3']);
options: {
scales: {
xAxes: [{
- ticks: {
- min: 20
- }
+ min: 20
}]
}
}
options: {
scales: {
xAxes: [{
- ticks: {
- min: 0,
- max: 3000
- }
+ min: 0,
+ max: 3000
}]
}
}
options: {
scales: {
xAxes: [{
- ticks: {
- min: -3000,
- max: 0
- }
+ min: -3000,
+ max: 0
}]
}
}
expect(scale.getValueForPixel(end)).toBeCloseTo(max, 4);
expect(scale.getValueForPixel(start)).toBeCloseTo(min, 4);
- scale.options.ticks.reverse = true;
+ scale.options.reverse = true;
chart.update();
start = chart.chartArea.left;
expect(scale.getValueForPixel(end)).toBeCloseTo(max, 4);
expect(scale.getValueForPixel(start)).toBeCloseTo(min, 4);
- scale.options.ticks.reverse = true;
+ scale.options.reverse = true;
chart.update();
start = chart.chartArea.bottom;
},
position: 'left',
offset: false,
+ reverse: false,
+ beginAtZero: false,
scaleLabel: Chart.defaults.scale.scaleLabel,
ticks: {
- beginAtZero: false,
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 0,
- reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
autoSkip: true,
yAxes: [{
id: 'yScale',
type: 'logarithmic',
+ min: 10,
+ max: 1010,
ticks: {
- min: 10,
- max: 1010,
callback: function(value) {
return value;
}
yAxes: [{
id: 'yScale',
type: 'logarithmic',
+ min: -10,
+ max: -1010,
ticks: {
- min: -10,
- max: -1010,
callback: function(value) {
return value;
}
yAxes: [{
id: 'yScale',
type: 'logarithmic',
+ min: 'zero',
+ max: null,
ticks: {
- min: 'zero',
- max: null,
callback: function(value) {
return value;
}
yAxes: [{
id: 'yScale',
type: 'logarithmic',
+ reverse: true,
ticks: {
- reverse: true,
callback: function(value) {
return value;
}
yAxes: [{
id: 'yScale',
type: 'logarithmic',
+ reverse: true,
ticks: {
- reverse: true,
callback: function(value) {
return value;
}
axis: 'y',
scale: {
yAxes: [{
- ticks: {
- min: 0
- }
+ min: 0
}]
},
firstTick: 0,
- describe: 'all stacks are defined and ticks.min: 0'
+ describe: 'all stacks are defined and min: 0'
},
{
axis: 'y',
data: dataWithEmptyStacks,
scale: {
yAxes: [{
- ticks: {
- min: 0
- }
+ min: 0
}]
},
firstTick: 0,
- describe: 'not stacks are defined and ticks.min: 0'
+ describe: 'not stacks are defined and min: 0'
},
{
axis: 'x',
axis: 'x',
scale: {
xAxes: [{
- ticks: {
- min: 0
- }
+ min: 0
}]
},
firstTick: 0,
- describe: 'all stacks are defined and ticks.min: 0'
+ describe: 'all stacks are defined and min: 0'
},
{
axis: 'x',
data: dataWithEmptyStacks,
scale: {
xAxes: [{
- ticks: {
- min: 0
- }
+ min: 0
}]
},
firstTick: 0,
- describe: 'not all stacks are defined and ticks.min: 0'
+ describe: 'not all stacks are defined and min: 0'
},
];
config.forEach(function(setup) {
expect(scale.getValueForPixel(start)).toBeCloseTo(firstTick, 4);
expect(scale.getValueForPixel(end)).toBeCloseTo(lastTick, 4);
- chart.scales[axisID].options.ticks.reverse = true; // Reverse mode
+ chart.scales[axisID].options.reverse = true; // Reverse mode
chart.update();
// chartArea might have been resized in update
dataset: [],
firstTick: 1, // value of the first tick
lastTick: 10, // value of the last tick
- describe: 'empty dataset, without ticks.min/max'
+ describe: 'empty dataset, without min/max'
},
{
dataset: [],
scale: {stacked: true},
firstTick: 1,
lastTick: 10,
- describe: 'empty dataset, without ticks.min/max, with stacked: true'
+ describe: 'empty dataset, without min/max, with stacked: true'
},
{
data: {
type: 'bar',
firstTick: 1,
lastTick: 10,
- describe: 'empty dataset with stack option, without ticks.min/max'
+ describe: 'empty dataset with stack option, without min/max'
},
{
data: {
type: 'horizontalBar',
firstTick: 1,
lastTick: 10,
- describe: 'empty dataset with stack option, without ticks.min/max'
+ describe: 'empty dataset with stack option, without min/max'
},
{
dataset: [],
- scale: {ticks: {min: 1}},
+ scale: {min: 1},
firstTick: 1,
lastTick: 10,
- describe: 'empty dataset, ticks.min: 1, without ticks.max'
+ describe: 'empty dataset, min: 1, without max'
},
{
dataset: [],
- scale: {ticks: {max: 80}},
+ scale: {max: 80},
firstTick: 1,
lastTick: 80,
- describe: 'empty dataset, ticks.max: 80, without ticks.min'
+ describe: 'empty dataset, max: 80, without min'
},
{
dataset: [],
- scale: {ticks: {max: 0.8}},
+ scale: {max: 0.8},
firstTick: 0.01,
lastTick: 0.8,
- describe: 'empty dataset, ticks.max: 0.8, without ticks.min'
+ describe: 'empty dataset, max: 0.8, without min'
},
{
dataset: [{x: 10, y: 10}, {x: 5, y: 5}, {x: 1, y: 1}, {x: 25, y: 25}, {x: 78, y: 78}],
expect(scale.getValueForPixel(start)).toBeCloseTo(firstTick, 4);
expect(scale.getValueForPixel(end)).toBeCloseTo(lastTick, 4);
- chart.scales[axisID].options.ticks.reverse = true; // Reverse mode
+ chart.scales[axisID].options.reverse = true; // Reverse mode
chart.update();
// chartArea might have been resized in update
var config = [
{
dataset: [],
- scale: {ticks: {min: 0}},
+ scale: {min: 0},
firstTick: 1, // value of the first tick
lastTick: 10, // value of the last tick
- describe: 'empty dataset, ticks.min: 0, without ticks.max'
+ describe: 'empty dataset, min: 0, without max'
},
{
dataset: [],
- scale: {ticks: {min: 0, max: 80}},
+ scale: {min: 0, max: 80},
firstTick: 1,
lastTick: 80,
- describe: 'empty dataset, ticks.min: 0, ticks.max: 80'
+ describe: 'empty dataset, min: 0, max: 80'
},
{
dataset: [],
- scale: {ticks: {min: 0, max: 0.8}},
+ scale: {min: 0, max: 0.8},
firstTick: 0.1,
lastTick: 0.8,
- describe: 'empty dataset, ticks.min: 0, ticks.max: 0.8'
+ describe: 'empty dataset, min: 0, max: 0.8'
},
{
dataset: [{x: 0, y: 0}, {x: 10, y: 10}, {x: 1.2, y: 1.2}, {x: 25, y: 25}, {x: 78, y: 78}],
},
{
dataset: [{x: 10, y: 10}, {x: 1.2, y: 1.2}, {x: 25, y: 25}, {x: 78, y: 78}],
- scale: {ticks: {min: 0}},
+ scale: {min: 0},
firstTick: 1,
lastTick: 80,
- describe: 'dataset min point {x: 1.2, y: 1.2}, max point {x:78, y:78}, ticks.min: 0'
+ describe: 'dataset min point {x: 1.2, y: 1.2}, max point {x:78, y:78}, min: 0'
},
{
dataset: [{x: 10, y: 10}, {x: 6.3, y: 6.3}, {x: 25, y: 25}, {x: 78, y: 78}],
- scale: {ticks: {min: 0}},
+ scale: {min: 0},
firstTick: 6,
lastTick: 80,
- describe: 'dataset min point {x: 6.3, y: 6.3}, max point {x:78, y:78}, ticks.min: 0'
+ describe: 'dataset min point {x: 6.3, y: 6.3}, max point {x:78, y:78}, min: 0'
},
];
config.forEach(function(setup) {
expect(scale.getValueForPixel(end)).toBeCloseTo(lastTick, 4);
expect(scale.getValueForPixel(start + sign * fontSize)).toBeCloseTo(firstTick, 4);
- chart.scales[axisID].options.ticks.reverse = true; // Reverse mode
+ chart.scales[axisID].options.reverse = true; // Reverse mode
chart.update();
// chartArea might have been resized in update
},
position: 'chartArea',
offset: false,
+ reverse: false,
+ beginAtZero: false,
scaleLabel: Chart.defaults.scale.scaleLabel,
ticks: {
backdropColor: 'rgba(255,255,255,0.75)',
backdropPaddingY: 2,
backdropPaddingX: 2,
- beginAtZero: false,
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 0,
- reverse: false,
showLabelBackdrop: true,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
},
options: {
scale: {
- ticks: {
- suggestedMin: -10,
- suggestedMax: 10
- }
+ suggestedMin: -10,
+ suggestedMax: 10
}
}
});
},
options: {
scale: {
- ticks: {
- min: -1010,
- max: 1010
- }
+ min: -1010,
+ max: 1010
}
}
});
},
options: {
scale: {
- ticks: {
- beginAtZero: false
- }
+ beginAtZero: false
}
}
});
expect(getLabels(chart.scale)).toEqual(['20', '25', '30', '35', '40', '45', '50']);
- chart.scale.options.ticks.beginAtZero = true;
+ chart.scale.options.beginAtZero = true;
chart.update();
expect(getLabels(chart.scale)).toEqual(['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50']);
expect(getLabels(chart.scale)).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20', '-15', '-10', '-5', '0']);
- chart.scale.options.ticks.beginAtZero = false;
+ chart.scale.options.beginAtZero = false;
chart.update();
expect(getLabels(chart.scale)).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20']);
},
options: {
scale: {
- ticks: {
- reverse: true
- }
+ reverse: true
}
}
});
expect(getLabels(chart.scale)).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
- chart.options.scale.ticks.min = 0.3;
- chart.options.scale.ticks.max = 2.8;
+ chart.options.scale.min = 0.3;
+ chart.options.scale.max = 2.8;
chart.update();
expect(getLabels(chart.scale)).toEqual(['0.3', '0.5', '1.0', '1.5', '2.0', '2.5', '2.8']);
expect(position.x).toBeCloseToPixel(270);
expect(position.y).toBeCloseToPixel(278);
- chart.scale.options.ticks.reverse = true;
+ chart.scale.options.reverse = true;
chart.update();
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(227);
},
position: 'bottom',
offset: false,
+ reverse: false,
+ beginAtZero: false,
scaleLabel: Chart.defaults.scale.scaleLabel,
bounds: 'data',
distribution: 'linear',
adapters: {},
ticks: {
- beginAtZero: false,
minRotation: 0,
maxRotation: 50,
mirror: false,
source: 'auto',
padding: 0,
- reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below,
autoSkip: false,
});
it('should use the min option when less than first label for building ticks', function() {
- config.ticks.min = '2014-12-29T04:00:00';
+ config.min = '2014-12-29T04:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[0]).toEqual('Jan 1');
});
it('should use the min option when greater than first label for building ticks', function() {
- config.ticks.min = '2015-01-02T04:00:00';
+ config.min = '2015-01-02T04:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[0]).toEqual('Jan 2');
});
it('should use the max option when greater than last label for building ticks', function() {
- config.ticks.max = '2015-01-05T06:00:00';
+ config.max = '2015-01-05T06:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[labels.length - 1]).toEqual('Jan 3');
});
it('should use the max option when less than last label for building ticks', function() {
- config.ticks.max = '2015-01-02T23:00:00';
+ config.max = '2015-01-02T23:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[labels.length - 1]).toEqual('Jan 2');
});
it('should use the min option when less than first label for building ticks', function() {
- config.ticks.min = '2014-12-29T04:00:00';
+ config.min = '2014-12-29T04:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[0]).toEqual('Jan 1');
});
it('should use the min option when greater than first label for building ticks', function() {
- config.ticks.min = '2015-01-02T04:00:00';
+ config.min = '2015-01-02T04:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[0]).toEqual('Jan 2');
});
it('should use the max option when greater than last label for building ticks', function() {
- config.ticks.max = '2015-01-05T06:00:00';
+ config.max = '2015-01-05T06:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[labels.length - 1]).toEqual('Jan 3');
});
it('should use the max option when less than last label for building ticks', function() {
- config.ticks.max = '2015-01-02T23:00:00';
+ config.max = '2015-01-02T23:00:00';
var labels = getLabels(createScale(mockData, config));
expect(labels[labels.length - 1]).toEqual('Jan 2');
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2051';
+ options.min = '2012';
+ options.max = '2051';
chart.update();
expect(scale.min).toEqual(+moment('2012', 'YYYY'));
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2017';
- options.ticks.max = '2042';
+ options.min = '2017';
+ options.max = '2042';
chart.update();
expect(scale.min).toEqual(+moment('2017', 'YYYY'));
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2051';
+ options.min = '2012';
+ options.max = '2051';
chart.update();
expect(scale.min).toEqual(+moment('2012', 'YYYY'));
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2017';
- options.ticks.max = '2043';
+ options.min = '2017';
+ options.max = '2043';
chart.update();
expect(scale.min).toEqual(+moment('2017', 'YYYY'));
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
+ options.min = '2012';
chart.update();
var start = scale.left;
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.max = '2050';
+ options.max = '2050';
chart.update();
var start = scale.left;
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2050';
+ options.min = '2012';
+ options.max = '2050';
chart.update();
var start = scale.left;
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2050';
+ options.min = '2012';
+ options.max = '2050';
chart.update();
var start = scale.left;
});
});
- describe('when ticks.min and/or ticks.max are defined', function() {
+ describe('when min and/or max are defined', function() {
['auto', 'data', 'labels'].forEach(function(source) {
['data', 'ticks'].forEach(function(bounds) {
describe('and ticks.source is "' + source + '" and bounds "' + bounds + '"', function() {
var min = '02/19 07:00';
var max = '02/24 08:00';
- options.ticks.min = min;
- options.ticks.max = max;
+ options.min = min;
+ options.max = max;
chart.update();
expect(scale.min).toEqual(+moment(min, 'MM/DD HH:mm'));
var min = '02/21 07:00';
var max = '02/22 20:00';
- options.ticks.min = min;
- options.ticks.max = max;
+ options.min = min;
+ options.max = max;
chart.update();
expect(scale.min).toEqual(+moment(min, 'MM/DD HH:mm'));
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2051';
+ options.min = '2012';
+ options.max = '2051';
chart.update();
expect(scale.getPixelForValue('2012')).toBeCloseToPixel(scale.left);
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2051';
+ options.min = '2012';
+ options.max = '2051';
options.offset = true;
chart.update();
});
});
- describe('when ticks.reverse', function() {
+ describe('when reverse', function() {
describe('is "true"', function() {
beforeEach(function() {
this.chart = window.acquireChart({
xAxes: [{
id: 'x',
type: 'time',
+ reverse: true,
time: {
parser: 'YYYY',
},
ticks: {
source: 'labels',
- reverse: true
}
}],
yAxes: [{
});
});
- describe('when ticks.reverse is "true" and distribution', function() {
+ describe('when reverse is "true" and distribution', function() {
describe('is "series"', function() {
beforeEach(function() {
this.chart = window.acquireChart({
parser: 'YYYY'
},
distribution: 'series',
+ reverse: true,
ticks: {
- source: 'labels',
- reverse: true
+ source: 'labels'
}
}],
yAxes: [{
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
+ options.min = '2012';
chart.update();
var start = scale.left;
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.max = '2050';
+ options.max = '2050';
chart.update();
var start = scale.left;
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2050';
+ options.min = '2012';
+ options.max = '2050';
chart.update();
var start = scale.left;
parser: 'YYYY'
},
distribution: 'linear',
+ reverse: true,
ticks: {
- source: 'labels',
- reverse: true
+ source: 'labels'
}
}],
yAxes: [{
var scale = chart.scales.x;
var options = chart.options.scales.xAxes[0];
- options.ticks.min = '2012';
- options.ticks.max = '2050';
+ options.min = '2012';
+ options.max = '2050';
chart.update();
var start = scale.left;
projects / thirdparty / Chart.js.git / commitdiff
