data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
- lineTension: 0.1
+ tension: 0.1
}]
},
options: {
| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
| [`label`](#general) | `string` | - | - | `''`
-| [`lineTension`](#line-styling) | `number` | - | - | `0`
+| [`tension`](#line-styling) | `number` | - | - | `0`
| [`order`](#general) | `number` | - | - | `0`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | The line width (in pixels).
| `fill` | How to fill the area under the line. See [area charts](area.md).
-| `lineTension` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
+| `tension` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
| `showLine` | If false, the line is not drawn for this dataset.
| `spanGaps` | If true, lines will be drawn between points with no or null data. If false, points with `NaN` data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.
* `'after'`: Step-after Interpolation
* `'middle'`: Step-middle Interpolation
-If the `stepped` value is set to anything other than false, `lineTension` will be ignored.
+If the `stepped` value is set to anything other than false, `tension` will be ignored.
## Configuration Options
| [`fill`](#line-styling) | <code>boolean|string</code> | Yes | - | `true`
| [`label`](#general) | `string` | - | - | `''`
| [`order`](#general) | `number` | - | - | `0`
-| [`lineTension`](#line-styling) | `number` | - | - | `0`
+| [`tension`](#line-styling) | `number` | - | - | `0`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1`
| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | The line width (in pixels).
| `fill` | How to fill the area under the line. See [area charts](area.md).
-| `lineTension` | Bezier curve tension of the line. Set to 0 to draw straight lines.
+| `tension` | Bezier curve tension of the line. Set to 0 to draw straight lines.
| `spanGaps` | If true, lines will be drawn between points with no or null data. If false, points with `NaN` data will create a break in the line.
If the value is `undefined`, `spanGaps` fallback to the associated [chart configuration options](#configuration-options). The rest of the values fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options.
* `scales.[x/y]Axes.time.min` was renamed to `scales[id].min`
* `scales.[x/y]Axes.zeroLine*` options of axes were removed. Use scriptable scale options instead.
* The dataset option `steppedLine` was removed. Use `stepped`
-* The dataset option `tension` was removed. Use `lineTension`
* The chart option `showLines` was renamed to `showLine` to match the dataset option.
* Dataset options are now configured as `options[type].datasets` rather than `options.datasets[type]`
* 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.
borderColor: window.chartColors.green,
backgroundColor: 'rgba(0, 0, 0, 0)',
fill: false,
- lineTension: 0
+ tension: 0
}]
},
options: {
type: 'line',
pointRadius: 0,
fill: false,
- lineTension: 0,
+ tension: 0,
borderWidth: 2
}]
},
// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
// This option gives lines the ability to span gaps
values.spanGaps = valueOrDefault(config.spanGaps, options.spanGaps);
- values.tension = valueOrDefault(config.lineTension, lineOptions.tension);
+ values.tension = valueOrDefault(config.tension, lineOptions.tension);
values.stepped = resolve([config.stepped, lineOptions.stepped]);
if (!showLine) {
const showLine = valueOrDefault(config.showLine, options.showLine);
values.spanGaps = valueOrDefault(config.spanGaps, options.spanGaps);
- values.tension = valueOrDefault(config.lineTension, options.elements.line.tension);
+ values.tension = valueOrDefault(config.tension, options.elements.line.tension);
if (!showLine) {
values.borderWidth = 0;
data: [{x: 0, y: NaN}, {x: NaN, y: 0}, {x: NaN, y: -10}, {x: 19, y: NaN}],
borderColor: 'red',
fill: true,
- lineTension: 0
+ tension: 0
}
]
},
borderColor: 'red',
fill: true,
spanGaps: true,
- lineTension: 0
+ tension: 0
}
]
},
data: [{x: NaN, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: true,
- lineTension: 0
+ tension: 0
}
]
},
borderColor: 'red',
fill: true,
spanGaps: true,
- lineTension: 0
+ tension: 0
}
]
},
data: [{x: 0, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: NaN, y: -5}],
borderColor: 'red',
fill: true,
- lineTension: 0
+ tension: 0
}
]
},
borderColor: 'red',
fill: true,
spanGaps: true,
- lineTension: 0
+ tension: 0
}
]
},
data: [{x: 0, y: 10}, {x: 5, y: 0}, {x: NaN, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: true,
- lineTension: 0
+ tension: 0
}
]
},
data: [{x: 1, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: false,
- lineTension: 0,
+ tension: 0,
stepped: 'after'
}
]
data: [{x: 1, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: false,
- lineTension: 0,
+ tension: 0,
stepped: 'before'
}
]
data: [{x: 1, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: false,
- lineTension: 0,
+ tension: 0,
stepped: true
}
]
data: [{x: 1, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: false,
- lineTension: 0,
+ tension: 0,
stepped: 'middle'
}
]
data: [{x: 1, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: false,
- lineTension: 1
+ tension: 1
}
]
},
data: [{x: 1, y: 10}, {x: 5, y: 0}, {x: 15, y: -10}, {x: 19, y: -5}],
borderColor: 'red',
fill: false,
- lineTension: 0
+ tension: 0
}
]
},
title: false,
line: {
datasets: {
- lineTension: 0.4,
+ tension: 0.4,
borderWidth: 1,
pointRadius: 1.5,
}
type: 'line',
pointRadius: 0,
fill: false,
- lineTension: 0,
+ tension: 0,
borderWidth: 2
}]
},
Chart.helpers.merge(Chart.defaults.controllers.line.datasets, {
spanGaps: true,
- lineTension: 0.231,
+ tension: 0.231,
backgroundColor: '#add',
borderWidth: '#daa',
borderColor: '#dad',
Chart.helpers.merge(Chart.defaults.controllers.line.datasets, {
spanGaps: true,
- lineTension: 0.231
+ tension: 0.231
});
var chart = window.acquireChart({
options: {
line: {
datasets: {
- lineTension: 0.345,
+ tension: 0.345,
backgroundColor: '#add'
}
}
line: {
datasets: {
spanGaps: true,
- lineTension: 0.231,
+ tension: 0.231,
backgroundColor: '#add',
borderWidth: '#daa',
borderColor: '#dad',
data: [0, 0],
label: 'dataset1',
spanGaps: true,
- lineTension: 0.231,
+ tension: 0.231,
backgroundColor: '#add',
borderWidth: '#daa',
borderColor: '#dad',
});
// Use dataset level styles for lines & points
- chart.data.datasets[0].lineTension = 0;
+ chart.data.datasets[0].tension = 0;
chart.data.datasets[0].backgroundColor = 'rgb(98, 98, 98)';
chart.data.datasets[0].borderColor = 'rgb(8, 8, 8)';
chart.data.datasets[0].borderWidth = 0.55;