Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-11 10:46:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add back line fill option. This is set on a per dataset basis, but there is an override in the config. Demo this in the line sample.

Browse Source
This commit is contained in:
Evert Timberg
2015-05-31 10:24:53 -04:00
parent 8a550852da
commit e48c7f168b
3 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
samples/line.html
View File

@@ -26,7 +26,8 @@
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false
}, {
label: "My Second dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

9
src/Chart.Core.js
View File

@@ -99,6 +99,8 @@
backgroundColor: defaultColor,
borderWidth: 3,
borderColor: defaultColor,
fill: true, // do we fill in the area between the line and the x axis
// Hover
hitRadius: 6,
hoverBorderWidth: 2,
@@ -1271,10 +1273,11 @@
}
}
if (this._children.length > 0) {
// If we had points and want to fill this line, do so.
if (this._children.length > 0 && vm.fill) {
//Round off the line by going to the base of the chart, back to the start, then fill.
ctx.lineTo(this._children[this._children.length - 1].x, vm.scaleZero);
ctx.lineTo(this._children[0].x, vm.scaleZero);
ctx.lineTo(this._children[this._children.length - 1]._view.x, vm.scaleZero);
ctx.lineTo(this._children[0]._view.x, vm.scaleZero);
ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
ctx.closePath();
ctx.fill();

2
src/Chart.Line.js
View File

@@ -170,6 +170,8 @@
backgroundColor: dataset.backgroundColor || this.options.elements.line.backgroundColor,
borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth,
borderColor: dataset.borderColor || this.options.elements.line.borderColor,
fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default
// Scale
scaleTop: yScale.top,
scaleBottom: yScale.bottom,