}
var rectangleElementOptions = this.chart.options.elements.rectangle;
- var custom = rectangle.custom;
+ var custom = rectangle.custom || {};
var dataset = this.getDataset();
helpers.extend(rectangle, {
// Appearance
base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
width: this.calculateBarWidth(numBars),
- backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
- borderSkipped: custom && custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
- borderColor: custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
- borderWidth: custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
+ borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
+ borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
}
});
rectangle.pivot();
var dataset = this.chart.data.datasets[rectangle._datasetIndex];
var index = rectangle._index;
- var custom = rectangle.custom;
+ var custom = rectangle.custom || {};
var model = rectangle._model;
- model.backgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
- model.borderColor = custom && custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
- model.borderWidth = custom && custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
+ model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
+ model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
+ model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
},
removeHoverStyle: function(rectangle) {
var dataset = this.chart.data.datasets[rectangle._datasetIndex];
var index = rectangle._index;
- var custom = rectangle.custom;
+ var custom = rectangle.custom || {};
var model = rectangle._model;
var rectangleElementOptions = this.chart.options.elements.rectangle;
- model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
- model.borderColor = custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
- model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
+ model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
+ model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
+ model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
}
});
xScalePoint = xScale.getPixelForValue(0);
}
- var custom = rectangle.custom;
+ var custom = rectangle.custom || {};
var dataset = this.getDataset();
var rectangleElementOptions = this.chart.options.elements.rectangle;
helpers.extend(rectangle, {
// Appearance
base: reset ? xScalePoint : this.calculateBarBase(this.index, index),
height: this.calculateBarHeight(numBars),
- backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
- borderSkipped: custom && custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
- borderColor: custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
- borderWidth: custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
+ borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
+ borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
},
draw: function () {
var xScale = this.getScaleForId(meta.xAxisID);
var scaleBase;
+ var custom = point.custom || {};
+ var dataset = this.getDataset();
+ var data = dataset.data[index];
+ var pointElementOptions = this.chart.options.elements.point;
+
if (yScale.min < 0 && yScale.max < 0) {
scaleBase = yScale.getPixelForValue(yScale.max);
} else if (yScale.min > 0 && yScale.max > 0) {
// Desired view properties
_model: {
- x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
- y: reset ? scaleBase : yScale.getPixelForValue(this.getDataset().data[index], index, this.index),
+ x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(data, index, this.index, this.chart.isCombo),
+ y: reset ? scaleBase : yScale.getPixelForValue(data, index, this.index),
// Appearance
- radius: reset ? 0 : point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[index]),
- backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor),
- borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor),
- borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth),
+ radius: reset ? 0 : custom.radius ? custom.radius : this.getRadius(data),
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor),
+ borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, pointElementOptions.borderColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, pointElementOptions.borderWidth),
// Tooltip
- hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+ hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.hitRadius, index, pointElementOptions.hitRadius)
}
});
- point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
+ var model = point._model;
+ model.skip = custom.skip ? custom.skip : (isNaN(model.x) || isNaN(model.y));
point.pivot();
},
// Point
var dataset = this.chart.data.datasets[point._datasetIndex];
var index = point._index;
+ var custom = point.custom || {};
+ var model = point._model;
- point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]);
- point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor));
- point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(point._model.borderColor));
- point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, point._model.borderWidth);
+ model.radius = custom.hoverRadius ? custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]);
+ model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
+ model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
+ model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
},
removeHoverStyle: function(point) {
var dataset = this.chart.data.datasets[point._datasetIndex];
var index = point._index;
-
- point._model.radius = point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[point._index]);
- point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor);
- point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor);
- point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth);
+ var custom = point.custom || {};
+ var model = point._model;
+ var pointElementOptions = this.chart.options.elements.point;
+
+ model.radius = custom.radius ? custom.radius : this.getRadius(dataset.data[point._index]);
+ model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor);
+ model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, pointElementOptions.borderColor);
+ model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, pointElementOptions.borderWidth);
}
});
};
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
- var custom = arc.custom;
+ var custom = arc.custom || {};
var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
var arcOpts = chart.options.elements.arc;
- var fill = custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
- var stroke = custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
- var bw = custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
+ var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
+ var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
+ var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return {
text: label,
availableHeight = chartArea.bottom - chartArea.top - arcOpts.borderWidth,
minSize = Math.min(availableWidth, availableHeight),
offset = {
- x: 0,
+ x: 0,
y: 0
},
meta = _this.getMeta(),
circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : _this.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI)),
innerRadius = reset && animationOpts.animateScale ? 0 : _this.innerRadius,
outerRadius = reset && animationOpts.animateScale ? 0 : _this.outerRadius,
- custom = arc.custom,
+ custom = arc.custom || {},
valueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
helpers.extend(arc, {
});
var model = arc._model;
- model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor);
- model.hoverBackgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor);
- model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth);
- model.borderColor = custom && custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor);
+ model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor);
+ model.hoverBackgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor);
+ model.borderWidth = custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth);
+ model.borderColor = custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor);
// Set correct angles if not resetting
if (!reset || !animationOpts.animateRotate) {
update: function update(reset) {
var meta = this.getMeta();
var line = meta.dataset;
+ var lineElementOptions = this.chart.options.elements.line;
var points = meta.data;
var yScale = this.getScaleForId(meta.yAxisID);
line._children = points;
// Model
+ var dataset = this.getDataset();
+ var custom = line.custom || {};
// Compatibility: If the properties are defined with only the old name, use those values
- if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined))
- {
- this.getDataset().lineTension = this.getDataset().tension;
+ if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
+ dataset.lineTension = dataset.tension;
}
line._model = {
// Appearance
- tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension),
- backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
- borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
- borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
- borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
- borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
- borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
- borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
- fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
+ tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension),
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),
+ borderColor: custom.borderColor ? custom.borderColor : (dataset.borderColor || lineElementOptions.borderColor),
+ borderCapStyle: custom.borderCapStyle ? custom.borderCapStyle : (dataset.borderCapStyle || lineElementOptions.borderCapStyle),
+ borderDash: custom.borderDash ? custom.borderDash : (dataset.borderDash || lineElementOptions.borderDash),
+ borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset),
+ borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle),
+ fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill),
// Scale
scaleTop: yScale.top,
scaleBottom: yScale.bottom,
this.updateElement(point, index, reset);
}, this);
- if (this.chart.options.showLines && this.chart.options.elements.line.tension !== 0)
+ if (this.chart.options.showLines && lineElementOptions.tension !== 0) {
this.updateBezierControlPoints();
+ }
},
getPointBackgroundColor: function(point, index) {
var backgroundColor = this.chart.options.elements.point.backgroundColor;
var dataset = this.getDataset();
+ var custom = point.custom || {};
- if (point.custom && point.custom.backgroundColor) {
- backgroundColor = point.custom.backgroundColor;
+ if (custom.backgroundColor) {
+ backgroundColor = custom.backgroundColor;
} else if (dataset.pointBackgroundColor) {
backgroundColor = helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, backgroundColor);
} else if (dataset.backgroundColor) {
getPointBorderColor: function(point, index) {
var borderColor = this.chart.options.elements.point.borderColor;
var dataset = this.getDataset();
+ var custom = point.custom || {};
- if (point.custom && point.custom.borderColor) {
- borderColor = point.custom.borderColor;
+ if (custom.borderColor) {
+ borderColor = custom.borderColor;
} else if (dataset.pointBorderColor) {
- borderColor = helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, borderColor);
+ borderColor = helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, borderColor);
} else if (dataset.borderColor) {
borderColor = dataset.borderColor;
}
getPointBorderWidth: function(point, index) {
var borderWidth = this.chart.options.elements.point.borderWidth;
var dataset = this.getDataset();
+ var custom = point.custom || {};
- if (point.custom && point.custom.borderWidth !== undefined) {
- borderWidth = point.custom.borderWidth;
- } else if (dataset.pointBorderWidth !== undefined) {
+ if (custom.borderWidth) {
+ borderWidth = custom.borderWidth;
+ } else if (dataset.pointBorderWidth) {
borderWidth = helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, borderWidth);
- } else if (dataset.borderWidth !== undefined) {
+ } else if (dataset.borderWidth) {
borderWidth = dataset.borderWidth;
}
updateElement: function(point, index, reset) {
var meta = this.getMeta();
+ var custom = point.custom || {};
+ var dataset = this.getDataset();
var yScale = this.getScaleForId(meta.yAxisID);
var xScale = this.getScaleForId(meta.xAxisID);
var scaleBase;
// Desired view properties
// Compatibility: If the properties are defined with only the old name, use those values
- if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
+ if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined))
{
- this.getDataset().pointRadius = this.getDataset().radius;
+ dataset.pointRadius = dataset.radius;
}
- if ((this.getDataset().hitRadius !== undefined) && (this.getDataset().pointHitRadius === undefined))
+ if ((dataset.hitRadius !== undefined) && (dataset.pointHitRadius === undefined))
{
- this.getDataset().pointHitRadius = this.getDataset().hitRadius;
+ dataset.pointHitRadius = dataset.hitRadius;
}
point._model = {
- x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
- y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo),
+ x: xScale.getPixelForValue(dataset.data[index], index, this.index, this.chart.isCombo),
+ y: reset ? scaleBase : this.calculatePointY(dataset.data[index], index, this.index, this.chart.isCombo),
// Appearance
- radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
- pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
+ radius: custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.chart.options.elements.point.radius),
+ pointStyle: custom.pointStyle ? custom.pointStyle : helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, this.chart.options.elements.point.pointStyle),
backgroundColor: this.getPointBackgroundColor(point, index),
borderColor: this.getPointBorderColor(point, index),
borderWidth: this.getPointBorderWidth(point, index),
tension: meta.dataset._model ? meta.dataset._model.tension : 0,
// Tooltip
- hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointHitRadius, index, this.chart.options.elements.point.hitRadius)
+ hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.pointHitRadius, index, this.chart.options.elements.point.hitRadius)
};
- point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
+ point._model.skip = custom.skip ? custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
},
calculatePointY: function(value, index, datasetIndex, isCombo) {
// Point
var dataset = this.chart.data.datasets[point._datasetIndex];
var index = point._index;
+ var custom = point.custom || {};
+ var model = point._model;
- point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
- point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor));
- point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor));
- point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth);
+ model.radius = custom.hoverRadius ? custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
+ model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
+ model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(model.borderColor));
+ model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, model.borderWidth);
},
removeHoverStyle: function(point) {
var dataset = this.chart.data.datasets[point._datasetIndex];
var index = point._index;
+ var custom = point.custom || {};
+ var model = point._model;
// Compatibility: If the properties are defined with only the old name, use those values
- if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
+ if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined))
{
- this.getDataset().pointRadius = this.getDataset().radius;
+ dataset.pointRadius = dataset.radius;
}
- point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius);
- point._model.backgroundColor = this.getPointBackgroundColor(point, index);
- point._model.borderColor = this.getPointBorderColor(point, index);
- point._model.borderWidth = this.getPointBorderWidth(point, index);
+ model.radius = custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.chart.options.elements.point.radius);
+ model.backgroundColor = this.getPointBackgroundColor(point, index);
+ model.borderColor = this.getPointBorderColor(point, index);
+ model.borderWidth = this.getPointBorderWidth(point, index);
}
});
};
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
- var custom = arc.custom;
+ var custom = arc.custom || {};
var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
var arcOpts = chart.options.elements.arc;
- var fill = custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
- var stroke = custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
- var bw = custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
+ var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
+ var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
+ var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return {
text: label,
var opts = chart.options;
var animationOpts = opts.animation;
var arcOpts = opts.elements.arc;
- var custom = arc.custom;
+ var custom = arc.custom || {};
var scale = chart.scale;
var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
var labels = chart.data.labels;
startAngle: animationOpts.animateRotate ? Math.PI * -0.5 : startAngle,
endAngle: animationOpts.animateRotate ? Math.PI * -0.5 : endAngle,
- backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
- borderWidth: custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
- borderColor: custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
+ borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
label: getValueAtIndexOrDefault(labels, index, labels[index])
};
startAngle: startAngle,
endAngle: endAngle,
- backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
- borderWidth: custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
- borderColor: custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
+ borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
label: getValueAtIndexOrDefault(labels, index, labels[index])
}
var meta = this.getMeta();
var line = meta.dataset;
var points = meta.data;
+ var custom = line.custom || {};
+ var dataset = this.getDataset();
+ var lineElementOptions = this.chart.options.elements.line;
var scale = this.chart.scale;
var scaleBase;
}
// Compatibility: If the properties are defined with only the old name, use those values
- if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined))
+ if ((dataset.tension !== undefined) && (dataset.lineTension === undefined))
{
- this.getDataset().lineTension = this.getDataset().tension;
+ dataset.lineTension = dataset.tension;
}
helpers.extend(meta.dataset, {
// Model
_model: {
// Appearance
- tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension),
- backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
- borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
- borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
- fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
- borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
- borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
- borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
- borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
+ tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension),
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),
+ borderColor: custom.borderColor ? custom.borderColor : (dataset.borderColor || lineElementOptions.borderColor),
+ fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill),
+ borderCapStyle: custom.borderCapStyle ? custom.borderCapStyle : (dataset.borderCapStyle || lineElementOptions.borderCapStyle),
+ borderDash: custom.borderDash ? custom.borderDash : (dataset.borderDash || lineElementOptions.borderDash),
+ borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset),
+ borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle),
// Scale
scaleTop: scale.top,
this.updateBezierControlPoints();
},
updateElement: function(point, index, reset) {
- var pointPosition = this.chart.scale.getPointPositionForValue(index, this.getDataset().data[index]);
+ var custom = point.custom || {};
+ var dataset = this.getDataset();
+ var scale = this.chart.scale;
+ var pointElementOptions = this.chart.options.elements.point;
+ var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
helpers.extend(point, {
// Utility
_datasetIndex: this.index,
_index: index,
- _scale: this.chart.scale,
+ _scale: scale,
// Desired view properties
_model: {
- x: reset ? this.chart.scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
- y: reset ? this.chart.scale.yCenter : pointPosition.y,
+ x: reset ? scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
+ y: reset ? scale.yCenter : pointPosition.y,
// Appearance
- tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
- radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
- backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
- borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
- borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
- pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
+ tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.tension, this.chart.options.elements.line.tension),
+ radius: custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, pointElementOptions.radius),
+ backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, pointElementOptions.backgroundColor),
+ borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, pointElementOptions.borderColor),
+ borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, pointElementOptions.borderWidth),
+ pointStyle: custom.pointStyle ? custom.pointStyle : helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, pointElementOptions.pointStyle),
// Tooltip
- hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+ hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.hitRadius, index, pointElementOptions.hitRadius)
}
});
- point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
+ point._model.skip = custom.skip ? custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
},
updateBezierControlPoints: function() {
+ var chartArea = this.chart.chartArea;
var meta = this.getMeta();
+
helpers.each(meta.data, function(point, index) {
+ var model = point._model;
var controlPoints = helpers.splineCurve(
helpers.previousItem(meta.data, index, true)._model,
- point._model,
+ model,
helpers.nextItem(meta.data, index, true)._model,
- point._model.tension
+ model.tension
);
// Prevent the bezier going outside of the bounds of the graph
- point._model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, this.chart.chartArea.right), this.chart.chartArea.left);
- point._model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
+ model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, chartArea.right), chartArea.left);
+ model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, chartArea.bottom), chartArea.top);
- point._model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, this.chart.chartArea.right), this.chart.chartArea.left);
- point._model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
+ model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, chartArea.right), chartArea.left);
+ model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, chartArea.bottom), chartArea.top);
// Now pivot the point for animation
point.pivot();
setHoverStyle: function(point) {
// Point
var dataset = this.chart.data.datasets[point._datasetIndex];
+ var custom = point.custom || {};
var index = point._index;
+ var model = point._model;
- point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
- point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor));
- point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor));
- point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth);
+ model.radius = custom.hoverRadius ? custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
+ model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
+ model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(model.borderColor));
+ model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, model.borderWidth);
},
removeHoverStyle: function(point) {
var dataset = this.chart.data.datasets[point._datasetIndex];
+ var custom = point.custom || {};
var index = point._index;
+ var model = point._model;
+ var pointElementOptions = this.chart.options.elements.point;
- point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
- point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor);
- point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor);
- point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth);
+ model.radius = custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.radius, index, pointElementOptions.radius);
+ model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, pointElementOptions.backgroundColor);
+ model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, pointElementOptions.borderColor);
+ model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, pointElementOptions.borderWidth);
}
});
};
removeHoverStyle: function(element, elementOpts) {
var dataset = this.chart.data.datasets[element._datasetIndex],
index = element._index,
- custom = element.custom,
+ custom = element.custom || {},
valueOrDefault = helpers.getValueAtIndexOrDefault,
color = helpers.color,
model = element._model;
- model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : valueOrDefault(dataset.backgroundColor, index, elementOpts.backgroundColor);
- model.borderColor = custom && custom.borderColor ? custom.borderColor : valueOrDefault(dataset.borderColor, index, elementOpts.borderColor);
- model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : valueOrDefault(dataset.borderWidth, index, elementOpts.borderWidth);
+ model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueOrDefault(dataset.backgroundColor, index, elementOpts.backgroundColor);
+ model.borderColor = custom.borderColor ? custom.borderColor : valueOrDefault(dataset.borderColor, index, elementOpts.borderColor);
+ model.borderWidth = custom.borderWidth ? custom.borderWidth : valueOrDefault(dataset.borderWidth, index, elementOpts.borderWidth);
},
setHoverStyle: function(element) {
var dataset = this.chart.data.datasets[element._datasetIndex],
index = element._index,
- custom = element.custom,
+ custom = element.custom || {},
valueOrDefault = helpers.getValueAtIndexOrDefault,
color = helpers.color,
getHoverColor = helpers.getHoverColor,
model = element._model;
- model.backgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueOrDefault(dataset.hoverBackgroundColor, index, getHoverColor(model.backgroundColor));
- model.borderColor = custom && custom.hoverBorderColor ? custom.hoverBorderColor : valueOrDefault(dataset.hoverBorderColor, index, getHoverColor(model.borderColor));
- model.borderWidth = custom && custom.hoverBorderWidth ? custom.hoverBorderWidth : valueOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
+ model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueOrDefault(dataset.hoverBackgroundColor, index, getHoverColor(model.backgroundColor));
+ model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : valueOrDefault(dataset.hoverBorderColor, index, getHoverColor(model.borderColor));
+ model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : valueOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
},
update: noop
});
module.exports = function(Chart) {
var helpers = Chart.helpers;
- var globalDefaults = Chart.defaults.global;
Chart.defaults.scale = {
display: true,
},
calculateTickRotation: function() {
var context = this.ctx;
+ var globalDefaults = Chart.defaults.global;
var optionTicks = this.options.ticks;
//Get the width of each grid by calculating the difference
// Actualy draw the scale on the canvas
// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
draw: function(chartArea) {
- if (this.options.display) {
- var context = this.ctx;
- var optionTicks = this.options.ticks;
- var gridLines = this.options.gridLines;
- var scaleLabel = this.options.scaleLabel;
-
- var setContextLineSettings;
- var isRotated = this.labelRotation !== 0;
- var skipRatio;
- var scaleLabelX;
- var scaleLabelY;
- var useAutoskipper = optionTicks.autoSkip;
-
- // figure out the maximum number of gridlines to show
- var maxTicks;
- if (optionTicks.maxTicksLimit) {
- maxTicks = optionTicks.maxTicksLimit;
- }
+ var options = this.options;
+ if (!options.display) {
+ return;
+ }
- var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor);
- var tickFontSize = helpers.getValueOrDefault(optionTicks.fontSize, globalDefaults.defaultFontSize);
- var tickFontStyle = helpers.getValueOrDefault(optionTicks.fontStyle, globalDefaults.defaultFontStyle);
- var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily);
- var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
- var tl = gridLines.tickMarkLength;
+ var context = this.ctx;
+ var globalDefaults = Chart.defaults.global;
+ var optionTicks = options.ticks;
+ var gridLines = options.gridLines;
+ var scaleLabel = options.scaleLabel;
+
+ var setContextLineSettings;
+ var isRotated = this.labelRotation !== 0;
+ var skipRatio;
+ var scaleLabelX;
+ var scaleLabelY;
+ var useAutoskipper = optionTicks.autoSkip;
+
+ // figure out the maximum number of gridlines to show
+ var maxTicks;
+ if (optionTicks.maxTicksLimit) {
+ maxTicks = optionTicks.maxTicksLimit;
+ }
- var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
- var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize);
- var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabel.fontStyle, globalDefaults.defaultFontStyle);
- var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabel.fontFamily, globalDefaults.defaultFontFamily);
- var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
+ var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor);
+ var tickFontSize = helpers.getValueOrDefault(optionTicks.fontSize, globalDefaults.defaultFontSize);
+ var tickFontStyle = helpers.getValueOrDefault(optionTicks.fontStyle, globalDefaults.defaultFontStyle);
+ var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily);
+ var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+ var tl = gridLines.tickMarkLength;
- var labelRotationRadians = helpers.toRadians(this.labelRotation);
- var cosRotation = Math.cos(labelRotationRadians);
- var sinRotation = Math.sin(labelRotationRadians);
- var longestRotatedLabel = this.longestLabelWidth * cosRotation;
- var rotatedLabelHeight = tickFontSize * sinRotation;
+ var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
+ var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize);
+ var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabel.fontStyle, globalDefaults.defaultFontStyle);
+ var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabel.fontFamily, globalDefaults.defaultFontFamily);
+ var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
- // Make sure we draw text in the correct color and font
- context.fillStyle = tickFontColor;
+ var labelRotationRadians = helpers.toRadians(this.labelRotation);
+ var cosRotation = Math.cos(labelRotationRadians);
+ var sinRotation = Math.sin(labelRotationRadians);
+ var longestRotatedLabel = this.longestLabelWidth * cosRotation;
+ var rotatedLabelHeight = tickFontSize * sinRotation;
- if (this.isHorizontal()) {
- setContextLineSettings = true;
- var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - tl;
- var yTickEnd = this.options.position === "bottom" ? this.top + tl : this.bottom;
- skipRatio = false;
+ // Make sure we draw text in the correct color and font
+ context.fillStyle = tickFontColor;
- if (((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
- skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
- }
+ if (this.isHorizontal()) {
+ setContextLineSettings = true;
+ var yTickStart = options.position === "bottom" ? this.top : this.bottom - tl;
+ var yTickEnd = options.position === "bottom" ? this.top + tl : this.bottom;
+ skipRatio = false;
- // if they defined a max number of optionTicks,
- // increase skipRatio until that number is met
- if (maxTicks && this.ticks.length > maxTicks) {
- while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
- if (!skipRatio) {
- skipRatio = 1;
- }
- skipRatio += 1;
+ if (((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
+ skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
+ }
+
+ // if they defined a max number of optionTicks,
+ // increase skipRatio until that number is met
+ if (maxTicks && this.ticks.length > maxTicks) {
+ while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
+ if (!skipRatio) {
+ skipRatio = 1;
}
+ skipRatio += 1;
}
+ }
- if (!useAutoskipper) {
- skipRatio = false;
- }
+ if (!useAutoskipper) {
+ skipRatio = false;
+ }
- helpers.each(this.ticks, function(label, index) {
- // Blank optionTicks
- var isLastTick = this.ticks.length === index + 1;
+ helpers.each(this.ticks, function (label, index) {
+ // Blank optionTicks
+ var isLastTick = this.ticks.length === index + 1;
- // Since we always show the last tick,we need may need to hide the last shown one before
- var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length);
- if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
- return;
+ // Since we always show the last tick,we need may need to hide the last shown one before
+ var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length);
+ if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
+ return;
+ }
+ var xLineValue = this.getPixelForTick(index); // xvalues for grid lines
+ var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
+
+ if (gridLines.display) {
+ if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
+ // Draw the first index specially
+ context.lineWidth = gridLines.zeroLineWidth;
+ context.strokeStyle = gridLines.zeroLineColor;
+ setContextLineSettings = true; // reset next time
+ } else if (setContextLineSettings) {
+ context.lineWidth = gridLines.lineWidth;
+ context.strokeStyle = gridLines.color;
+ setContextLineSettings = false;
}
- var xLineValue = this.getPixelForTick(index); // xvalues for grid lines
- var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
-
- if (gridLines.display) {
- if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
- // Draw the first index specially
- context.lineWidth = gridLines.zeroLineWidth;
- context.strokeStyle = gridLines.zeroLineColor;
- setContextLineSettings = true; // reset next time
- } else if (setContextLineSettings) {
- context.lineWidth = gridLines.lineWidth;
- context.strokeStyle = gridLines.color;
- setContextLineSettings = false;
- }
-
- xLineValue += helpers.aliasPixel(context.lineWidth);
- // Draw the label area
- context.beginPath();
+ xLineValue += helpers.aliasPixel(context.lineWidth);
- if (gridLines.drawTicks) {
- context.moveTo(xLineValue, yTickStart);
- context.lineTo(xLineValue, yTickEnd);
- }
+ // Draw the label area
+ context.beginPath();
- // Draw the chart area
- if (gridLines.drawOnChartArea) {
- context.moveTo(xLineValue, chartArea.top);
- context.lineTo(xLineValue, chartArea.bottom);
- }
-
- // Need to stroke in the loop because we are potentially changing line widths & colours
- context.stroke();
+ if (gridLines.drawTicks) {
+ context.moveTo(xLineValue, yTickStart);
+ context.lineTo(xLineValue, yTickEnd);
}
- if (optionTicks.display) {
- context.save();
- context.translate(xLabelValue + optionTicks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl);
- context.rotate(labelRotationRadians * -1);
- context.font = tickLabelFont;
- context.textAlign = (isRotated) ? "right" : "center";
- context.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top";
- context.fillText(label, 0, 0);
- context.restore();
+ // Draw the chart area
+ if (gridLines.drawOnChartArea) {
+ context.moveTo(xLineValue, chartArea.top);
+ context.lineTo(xLineValue, chartArea.bottom);
}
- }, this);
-
- if (scaleLabel.display) {
- // Draw the scale label
- context.textAlign = "center";
- context.textBaseline = 'middle';
- context.fillStyle = scaleLabelFontColor; // render in correct colour
- context.font = scaleLabelFont;
- scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
- scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
+ // Need to stroke in the loop because we are potentially changing line widths & colours
+ context.stroke();
+ }
- context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY);
+ if (optionTicks.display) {
+ context.save();
+ context.translate(xLabelValue + optionTicks.labelOffset, (isRotated) ? this.top + 12 : options.position === "top" ? this.bottom - tl : this.top + tl);
+ context.rotate(labelRotationRadians * -1);
+ context.font = tickLabelFont;
+ context.textAlign = (isRotated) ? "right" : "center";
+ context.textBaseline = (isRotated) ? "middle" : options.position === "top" ? "bottom" : "top";
+ context.fillText(label, 0, 0);
+ context.restore();
}
+ }, this);
- } else {
- setContextLineSettings = true;
- var xTickStart = this.options.position === "right" ? this.left : this.right - 5;
- var xTickEnd = this.options.position === "right" ? this.left + 5 : this.right;
-
- helpers.each(this.ticks, function(label, index) {
- // If the callback returned a null or undefined value, do not draw this line
- if (label === undefined || label === null) {
- return;
- }
+ if (scaleLabel.display) {
+ // Draw the scale label
+ context.textAlign = "center";
+ context.textBaseline = 'middle';
+ context.fillStyle = scaleLabelFontColor; // render in correct colour
+ context.font = scaleLabelFont;
- var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
-
- if (gridLines.display) {
- if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
- // Draw the first index specially
- context.lineWidth = gridLines.zeroLineWidth;
- context.strokeStyle = gridLines.zeroLineColor;
- setContextLineSettings = true; // reset next time
- } else if (setContextLineSettings) {
- context.lineWidth = gridLines.lineWidth;
- context.strokeStyle = gridLines.color;
- setContextLineSettings = false;
- }
+ scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
+ scaleLabelY = options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
- yLineValue += helpers.aliasPixel(context.lineWidth);
+ context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY);
+ }
- // Draw the label area
- context.beginPath();
+ } else {
+ setContextLineSettings = true;
+ var xTickStart = options.position === "right" ? this.left : this.right - 5;
+ var xTickEnd = options.position === "right" ? this.left + 5 : this.right;
+
+ helpers.each(this.ticks, function (label, index) {
+ // If the callback returned a null or undefined value, do not draw this line
+ if (label === undefined || label === null) {
+ return;
+ }
- if (gridLines.drawTicks) {
- context.moveTo(xTickStart, yLineValue);
- context.lineTo(xTickEnd, yLineValue);
- }
+ var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
+
+ if (gridLines.display) {
+ if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
+ // Draw the first index specially
+ context.lineWidth = gridLines.zeroLineWidth;
+ context.strokeStyle = gridLines.zeroLineColor;
+ setContextLineSettings = true; // reset next time
+ } else if (setContextLineSettings) {
+ context.lineWidth = gridLines.lineWidth;
+ context.strokeStyle = gridLines.color;
+ setContextLineSettings = false;
+ }
- // Draw the chart area
- if (gridLines.drawOnChartArea) {
- context.moveTo(chartArea.left, yLineValue);
- context.lineTo(chartArea.right, yLineValue);
- }
+ yLineValue += helpers.aliasPixel(context.lineWidth);
+
+ // Draw the label area
+ context.beginPath();
- // Need to stroke in the loop because we are potentially changing line widths & colours
- context.stroke();
+ if (gridLines.drawTicks) {
+ context.moveTo(xTickStart, yLineValue);
+ context.lineTo(xTickEnd, yLineValue);
}
- if (optionTicks.display) {
- var xLabelValue;
- var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
+ // Draw the chart area
+ if (gridLines.drawOnChartArea) {
+ context.moveTo(chartArea.left, yLineValue);
+ context.lineTo(chartArea.right, yLineValue);
+ }
+
+ // Need to stroke in the loop because we are potentially changing line widths & colours
+ context.stroke();
+ }
+
+ if (optionTicks.display) {
+ var xLabelValue;
+ var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
- context.save();
+ context.save();
- if (this.options.position === "left") {
- if (optionTicks.mirror) {
- xLabelValue = this.right + optionTicks.padding;
- context.textAlign = "left";
- } else {
- xLabelValue = this.right - optionTicks.padding;
- context.textAlign = "right";
- }
+ if (options.position === "left") {
+ if (optionTicks.mirror) {
+ xLabelValue = this.right + optionTicks.padding;
+ context.textAlign = "left";
} else {
- // right side
- if (optionTicks.mirror) {
- xLabelValue = this.left - optionTicks.padding;
- context.textAlign = "right";
- } else {
- xLabelValue = this.left + optionTicks.padding;
- context.textAlign = "left";
- }
+ xLabelValue = this.right - optionTicks.padding;
+ context.textAlign = "right";
+ }
+ } else {
+ // right side
+ if (optionTicks.mirror) {
+ xLabelValue = this.left - optionTicks.padding;
+ context.textAlign = "right";
+ } else {
+ xLabelValue = this.left + optionTicks.padding;
+ context.textAlign = "left";
}
-
- context.translate(xLabelValue, yLabelValue + optionTicks.labelOffset);
- context.rotate(labelRotationRadians * -1);
- context.font = tickLabelFont;
- context.textBaseline = "middle";
- context.fillText(label, 0, 0);
- context.restore();
}
- }, this);
-
- if (scaleLabel.display) {
- // Draw the scale label
- scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2);
- scaleLabelY = this.top + ((this.bottom - this.top) / 2);
- var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
- context.save();
- context.translate(scaleLabelX, scaleLabelY);
- context.rotate(rotation);
- context.textAlign = "center";
- context.fillStyle =scaleLabelFontColor; // render in correct colour
- context.font = scaleLabelFont;
- context.textBaseline = 'middle';
- context.fillText(scaleLabel.labelString, 0, 0);
+ context.translate(xLabelValue, yLabelValue + optionTicks.labelOffset);
+ context.rotate(labelRotationRadians * -1);
+ context.font = tickLabelFont;
+ context.textBaseline = "middle";
+ context.fillText(label, 0, 0);
context.restore();
}
+ }, this);
+
+ if (scaleLabel.display) {
+ // Draw the scale label
+ scaleLabelX = options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2);
+ scaleLabelY = this.top + ((this.bottom - this.top) / 2);
+ var rotation = options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
+
+ context.save();
+ context.translate(scaleLabelX, scaleLabelY);
+ context.rotate(rotation);
+ context.textAlign = "center";
+ context.fillStyle = scaleLabelFontColor; // render in correct colour
+ context.font = scaleLabelFont;
+ context.textBaseline = 'middle';
+ context.fillText(scaleLabel.labelString, 0, 0);
+ context.restore();
}
+ }
- // Draw the line at the edge of the axis
- context.lineWidth = gridLines.lineWidth;
- context.strokeStyle = gridLines.color;
- var x1 = this.left,
- x2 = this.right,
- y1 = this.top,
- y2 = this.bottom;
-
- var aliasPixel = helpers.aliasPixel(context.lineWidth);
- if (this.isHorizontal()) {
- y1 = y2 = this.options.position === 'top' ? this.bottom : this.top;
- y1 += aliasPixel;
- y2 += aliasPixel;
- } else {
- x1 = x2 = this.options.position === 'left' ? this.right : this.left;
- x1 += aliasPixel;
- x2 += aliasPixel;
- }
+ // Draw the line at the edge of the axis
+ context.lineWidth = gridLines.lineWidth;
+ context.strokeStyle = gridLines.color;
+ var x1 = this.left,
+ x2 = this.right,
+ y1 = this.top,
+ y2 = this.bottom;
- context.beginPath();
- context.moveTo(x1, y1);
- context.lineTo(x2, y2);
- context.stroke();
+ var aliasPixel = helpers.aliasPixel(context.lineWidth);
+ if (this.isHorizontal()) {
+ y1 = y2 = options.position === 'top' ? this.bottom : this.top;
+ y1 += aliasPixel;
+ y2 += aliasPixel;
+ } else {
+ x1 = x2 = options.position === 'left' ? this.right : this.left;
+ x1 += aliasPixel;
+ x2 += aliasPixel;
}
+
+ context.beginPath();
+ context.moveTo(x1, y1);
+ context.lineTo(x2, y2);
+ context.stroke();
}
});
};
projects / thirdparty / Chart.js.git / commitdiff
