| [`pointStyle`](#point-styling) | <code>string|Image</code> | Yes | Yes | `'circle'`
| [`showLine`](#line-styling) | `boolean` | - | - | `undefined`
| [`spanGaps`](#line-styling) | <code>boolean|number</code> | - | - | `undefined`
-| [`steppedLine`](#stepped-line) | <code>boolean|string</code> | - | - | `false`
+| [`stepped`](#stepped) | <code>boolean|string</code> | - | - | `false`
| [`xAxisID`](#general) | `string` | - | - | first x axis
| [`yAxisID`](#general) | `string` | - | - | first y axis
If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
-### Stepped Line
+### Stepped
-The following values are supported for `steppedLine`.
+The following values are supported for `stepped`.
* `false`: No Step Interpolation (default)
* `true`: Step-before Interpolation (eq. `'before'`)
* `'after'`: Step-after Interpolation
* `'middle'`: Step-middle Interpolation
-If the `steppedLine` value is set to anything other than false, `lineTension` will be ignored.
+If the `stepped` value is set to anything other than false, `lineTension` will be ignored.
## Configuration Options
```
## Point Configuration
+
Point elements are used to represent the points in a line, radar or bubble chart.
Global point options: `Chart.defaults.elements.point`.
### Point Styles
The following values are supported:
+
- `'circle'`
- `'cross'`
- `'crossRot'`
If the value is an image, that image is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage).
## Line Configuration
+
Line elements are used to represent the line in a line chart.
Global line options: `Chart.defaults.elements.line`.
| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
## Rectangle Configuration
+
Rectangle elements are used to represent the bars in a bar chart.
Global rectangle options: `Chart.defaults.elements.rectangle`.
| `borderSkipped` | `string` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`.
## Arc Configuration
+
Arcs are used in the polar area, doughnut and pie charts.
Global arc options: `Chart.defaults.elements.arc`.
### Automatic data decimation during draw
-Line element will automatically decimate data, when the following conditions are met: `tension` is `0`, `steppedLine` is `false` (default) and `borderDash` is `[]` (default).`
+Line element will automatically decimate data, when the following conditions are met: `tension` is `0`, `stepped` is `false` (default) and `borderDash` is `[]` (default).`
This improves rendering speed by skipping drawing of invisible line segments.
```javascript
line: {
tension: 0, // disables bezier curves
fill: false,
- steppedLine: false,
+ stepped: false,
borderDash: []
}
}
* `scales.[x/y]Axes.time.format` was renamed to `scales[id].time.parser`
* `scales.[x/y]Axes.time.max` was renamed to `scales[id].max`
* `scales.[x/y]Axes.time.min` was renamed to `scales[id].min`
+* The dataset option `steppedLine` was removed. Use `stepped`
* The dataset option `tension` was removed. Use `lineTension`
* To override the platform class used in a chart instance, pass `platform: PlatformClass` in the config object. Note that the class should be passed, not an instance of the class.
data: {
labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
datasets: [{
- label: 'steppedLine: ' + details.steppedLine,
- steppedLine: details.steppedLine,
+ label: 'stepped: ' + details.stepped,
+ stepped: details.stepped,
data: data,
borderColor: details.color,
fill: false,
randomScalingFactor()
];
- var steppedLineSettings = [{
- steppedLine: false,
+ var steppedSettings = [{
+ stepped: false,
label: 'No Step Interpolation',
color: window.chartColors.red
}, {
- steppedLine: true,
+ stepped: true,
label: 'Step Before Interpolation',
color: window.chartColors.green
}, {
- steppedLine: 'before',
+ stepped: 'before',
label: 'Step Before Interpolation',
color: window.chartColors.green
}, {
- steppedLine: 'after',
+ stepped: 'after',
label: 'Step After Interpolation',
color: window.chartColors.purple
}, {
- steppedLine: 'middle',
+ stepped: 'middle',
label: 'Step Middle Interpolation',
color: window.chartColors.blue
}];
- steppedLineSettings.forEach(function(details) {
+ steppedSettings.forEach(function(details) {
var div = document.createElement('div');
div.classList.add('chart-container');
// This option gives lines the ability to span gaps
values.spanGaps = valueOrDefault(config.spanGaps, options.spanGaps);
values.tension = valueOrDefault(config.lineTension, lineOptions.tension);
- values.steppedLine = resolve([config.steppedLine, lineOptions.stepped]);
+ values.stepped = resolve([config.stepped, lineOptions.stepped]);
return values;
}
}
function getLineMethod(options) {
- if (options.steppedLine) {
+ if (options.stepped) {
return _steppedLineTo;
}
ctx.moveTo(point.x, point.y);
move = false;
} else {
- lineMethod(ctx, prev, point, reverse, options.steppedLine);
+ lineMethod(ctx, prev, point, reverse, options.stepped);
}
prev = point;
if (loop) {
point = points[(start + (reverse ? ilen : 0)) % count];
- lineMethod(ctx, prev, point, reverse, options.steppedLine);
+ lineMethod(ctx, prev, point, reverse, options.stepped);
}
return !!loop;
function _getSegmentMethod(line) {
const opts = line.options;
const borderDash = opts.borderDash && opts.borderDash.length;
- const useFastPath = !line._loop && !opts.tension && !opts.steppedLine && !borderDash;
+ const useFastPath = !line._loop && !opts.tension && !opts.stepped && !borderDash;
return useFastPath ? fastPathSegment : pathSegment;
}
* @private
*/
function _getInterpolationMethod(options) {
- if (options.steppedLine) {
+ if (options.stepped) {
return _steppedInterpolation;
}
return;
}
const options = me.options;
- if (options.tension && !options.steppedLine) {
+ if (options.tension && !options.stepped) {
const loop = options.spanGaps ? me._loop : me._fullLoop;
_updateBezierControlPoints(me._points, options, chartArea, loop);
}
continue;
}
const t = Math.abs((value - p1[property]) / (p2[property] - p1[property]));
- const interpolated = _interpolate(p1, p2, t, options.steppedLine);
+ const interpolated = _interpolate(p1, p2, t, options.stepped);
interpolated[property] = point[property];
result.push(interpolated);
}
borderColor: 'red',
fill: false,
lineTension: 0,
- steppedLine: 'after'
+ stepped: 'after'
}
]
},
borderColor: 'red',
fill: false,
lineTension: 0,
- steppedLine: 'before'
+ stepped: 'before'
}
]
},
borderColor: 'red',
fill: false,
lineTension: 0,
- steppedLine: true
+ stepped: true
}
]
},
borderColor: 'red',
fill: false,
lineTension: 0,
- steppedLine: 'middle'
+ stepped: 'middle'
}
]
},
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(255, 0, 0, 0.25)",
- "steppedLine": true,
+ "stepped": true,
"data": [null, null, 0, -1, 0, 1, 0, -1, 0],
"fill": 1
}, {
"backgroundColor": "rgba(0, 255, 0, 0.25)",
- "steppedLine": "after",
+ "stepped": "after",
"data": [1, 0, null, 1, 0, null, -1, 0, 1],
"fill": "+1"
}, {
"backgroundColor": "rgba(0, 0, 255, 0.25)",
- "steppedLine": "before",
+ "stepped": "before",
"data": [0, 2, 0, -2, 0, 2, 0],
"fill": 3
}, {
"backgroundColor": "rgba(255, 0, 255, 0.25)",
- "steppedLine": "middle",
+ "stepped": "middle",
"data": [2, 0, -2, 0, 2, 0, -2, 0, 2],
"fill": "-2"
}, {
"backgroundColor": "rgba(255, 255, 0, 0.25)",
- "steppedLine": false,
+ "stepped": false,
"data": [3, 1, -1, -3, -1, 1, 3, 1, -1],
"fill": "-1"
}]