//Number - Spacing between data sets within X values
datasetSpacing: 1,
- }
+ },
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].backgroundColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
// Find Active Elements
this.active = function() {
- switch (this.options.hoverMode) {
+ switch (this.options.hover.mode) {
case 'single':
return this.getElementAtEvent(e);
case 'label':
// Remove styling for last active (even if it may still be active)
if (this.lastActive.length) {
- switch (this.options.hoverMode) {
+ switch (this.options.hover.mode) {
case 'single':
this.lastActive[0].backgroundColor = this.data.datasets[this.lastActive[0]._datasetIndex].backgroundColor;
this.lastActive[0].borderColor = this.data.datasets[this.lastActive[0]._datasetIndex].borderColor;
}
// Built in hover styling
- if (this.active.length && this.options.hoverMode) {
- switch (this.options.hoverMode) {
+ if (this.active.length && this.options.hover.mode) {
+ switch (this.options.hover.mode) {
case 'single':
this.active[0].backgroundColor = this.data.datasets[this.active[0]._datasetIndex].hoverBackgroundColor || helpers.color(this.active[0].backgroundColor).saturate(0.8).darken(0.2).rgbString();
this.active[0].borderColor = this.data.datasets[this.active[0]._datasetIndex].hoverBorderColor || helpers.color(this.active[0].borderColor).saturate(0.8).darken(0.2).rgbString();
// Built in Tooltips
- if (this.options.showTooltips) {
+ if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();
hover: {
// String || boolean
- mode: 'single', // 'label', 'dataset', 'false'
+ mode: 'label', // 'label', 'dataset', 'false'
//Function(event, activeElements) - Custom hover handler
onHover: null,
var options = this._options;
extend(this, {
opacity: 0,
- xPadding: options.tooltipXPadding,
- yPadding: options.tooltipYPadding,
- xOffset: options.tooltipXOffset,
- backgroundColor: options.tooltipBackgroundColor,
- textColor: options.tooltipFontColor,
- _fontFamily: options.tooltipFontFamily,
- _fontStyle: options.tooltipFontStyle,
- fontSize: options.tooltipFontSize,
- titleTextColor: options.tooltipTitleFontColor,
- _titleFontFamily: options.tooltipTitleFontFamily,
- _titleFontStyle: options.tooltipTitleFontStyle,
- titleFontSize: options.tooltipTitleFontSize,
- caretHeight: options.tooltipCaretSize,
- cornerRadius: options.tooltipCornerRadius,
- legendColorBackground: options.multiTooltipKeyBackground,
+ xPadding: options.tooltips.xPadding,
+ yPadding: options.tooltips.yPadding,
+ xOffset: options.tooltips.xOffset,
+ backgroundColor: options.tooltips.backgroundColor,
+ textColor: options.tooltips.fontColor,
+ _fontFamily: options.tooltips.fontFamily,
+ _fontStyle: options.tooltips.fontStyle,
+ fontSize: options.tooltips.fontSize,
+ titleTextColor: options.tooltips.titleFontColor,
+ _titleFontFamily: options.tooltips.titleFontFamily,
+ _titleFontStyle: options.tooltips.titleFontStyle,
+ titleFontSize: options.tooltips.titleFontSize,
+ caretHeight: options.tooltips.caretSize,
+ cornerRadius: options.tooltips.cornerRadius,
+ legendColorBackground: options.tooltips.multiKeyBackground,
labels: [],
colors: [],
});
var ctx = this._chart.ctx;
- switch (this._options.hoverMode) {
+ switch (this._options.hover.mode) {
case 'single':
helpers.extend(this, {
- text: template(this._options.tooltipTemplate, this._active[0]),
+ text: template(this._options.tooltips.template, this._active[0]),
});
var tooltipPosition = this._active[0].tooltipPosition();
helpers.extend(this, {
yPositions.push(element._vm.y);
//Include any colour information about the element
- labels.push(helpers.template(this._options.multiTooltipTemplate, element));
+ labels.push(helpers.template(this._options.tooltips.multiTemplate, element));
colors.push({
fill: element._vm.backgroundColor,
stroke: element._vm.borderColor
labels: labels,
title: this._active.length ? this._active[0].label : '',
legendColors: colors,
- legendBackgroundColor: this._options.multiTooltipKeyBackground,
+ legendBackgroundColor: this._options.tooltips.multiKeyBackground,
});
var ctx = this._chart.ctx;
var vm = this._vm;
- switch (this._options.hoverMode) {
+ switch (this._options.hover.mode) {
case 'single':
ctx.font = fontString(vm.fontSize, vm._fontStyle, vm._fontFamily);
});
//Set up tooltip events on the chart
- if (this.options.showTooltips) {
+ if (this.options.tooltips.enabled) {
helpers.bindEvents(this, this.options.events, this.onHover);
}
}
// Built in hover styling
- if (this.active.length && this.options.hoverMode) {
+ if (this.active.length && this.options.hover.mode) {
this.active[0].backgroundColor = this.data.data[this.active[0]._index].hoverBackgroundColor || helpers.color(this.data.data[this.active[0]._index].backgroundColor).saturate(0.5).darken(0.35).rgbString();
}
// Built in Tooltips
- if (this.options.showTooltips) {
+ if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();
//Boolean - Whether to stack the lines essentially creating a stacked area chart.
stacked: false,
- //Number - Tension of the bezier curve between points
- tension: 0.4,
-
- //Number - Radius of each point dot in pixels
- pointRadius: 3,
- //Number - Pixel width of point dot border
- pointBorderWidth: 1,
- //Number - Pixel width of point on hover
- pointHoverRadius: 5,
- //Number - Pixel width of point dot border on hover
- pointHoverBorderWidth: 2,
- pointBackgroundColor: Chart.defaults.global.defaultColor,
- pointBorderColor: Chart.defaults.global.defaultColor,
-
- //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
- pointHitRadius: 6,
+ points: {
+ // Number - Radius of each point dot in pixels
+ radius: 3,
+
+ // Number - Pixel width of point dot border
+ borderWidth: 1,
+
+ // Number - Pixel width of point on hover
+ hoverRadius: 5,
+
+ // Number - Pixel width of point dot border on hover
+ hoverBorderWidth: 2,
+
+ // Color
+ backgroundColor: Chart.defaults.global.defaultColor,
+
+ // Color
+ borderColor: Chart.defaults.global.defaultColor,
+
+ //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
+ hitRadius: 6,
+ },
+
+ lines: {
+ //Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension
+ tension: 0.4,
+ },
//Number - Pixel width of dataset border
borderWidth: 2,
scaleZero: yScale.getPixelForValue(0),
// Appearance
- tension: dataset.tension || this.options.tension,
+ tension: dataset.tension || this.options.lines.tension,
backgroundColor: dataset.backgroundColor || this.options.backgroundColor,
borderWidth: dataset.borderWidth || this.options.borderWidth,
borderColor: dataset.borderColor || this.options.borderColor,
tension: this.data.datasets[datasetIndex].metaDataset.tension,
// Appearnce
- radius: this.data.datasets[datasetIndex].pointRadius || this.options.pointRadius,
- backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.pointBackgroundColor,
- borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointBorderWidth,
+ radius: this.data.datasets[datasetIndex].pointRadius || this.options.points.radius,
+ backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.points.backgroundColor,
+ borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointsborderWidth,
// Tooltip
- hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.pointHitRadius,
+ hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.points.hitRadius,
});
}, this);
// Find Active Elements
this.active = function() {
- switch (this.options.hoverMode) {
+ switch (this.options.hover.mode) {
case 'single':
return this.getElementAtEvent(e);
case 'label':
var dataset;
// Remove styling for last active (even if it may still be active)
if (this.lastActive.length) {
- switch (this.options.hoverMode) {
+ switch (this.options.hover.mode) {
case 'single':
dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
}
// Built in hover styling
- if (this.active.length && this.options.hoverMode) {
- switch (this.options.hoverMode) {
+ if (this.active.length && this.options.hover.mode) {
+ switch (this.options.hover.mode) {
case 'single':
dataset = this.data.datasets[this.active[0]._datasetIndex];
// Built in Tooltips
- if (this.options.showTooltips) {
+ if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();
},this);
//Set up tooltip events on the chart
- if (this.options.showTooltips){
+ if (this.options.tooltips.enabled){
helpers.bindEvents(this, this.options.events, function(evt){
var activeSegments = (evt.type !== 'mouseout') ? this.getSegmentsAtEvent(evt) : [];
helpers.each(this.segments,function(segment){
helpers = Chart.helpers;
var defaultConfig = {
- hoverMode: 'single',
+ hover: {
+ mode: 'single',
+ },
+
scales: {
xAxes: [{
scaleType: "linear", // scatter should not use a dataset axis
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
- tooltipTemplate: "(<%= dataX %>, <%= dataY %>)",
- multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)",
+ tooltips: {
+ template: "(<%= dataX %>, <%= dataY %>)",
+ multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)",
+ },
};
// Find Active Elements
this.active = function() {
- switch (this.options.hoverMode) {
+ switch (this.options.hover.mode) {
case 'single':
return this.getElementAtEvent(e);
case 'label':
// Remove styling for last active (even if it may still be active)
if (this.lastActive.length) {
- switch (this.options.hoverMode) {
+ switch (this.options.hover.mode) {
case 'single':
this.lastActive[0].backgroundColor = this.data.datasets[this.lastActive[0]._datasetIndex].pointBackgroundColor;
this.lastActive[0].borderColor = this.data.datasets[this.lastActive[0]._datasetIndex].pointBorderColor;
}
// Built in hover styling
- if (this.active.length && this.options.hoverMode) {
- switch (this.options.hoverMode) {
+ if (this.active.length && this.options.hover.mode) {
+ switch (this.options.hover.mode) {
case 'single':
this.active[0].backgroundColor = this.data.datasets[this.active[0]._datasetIndex].hoverBackgroundColor || helpers.color(this.active[0].backgroundColor).saturate(0.5).darken(0.35).rgbString();
this.active[0].borderColor = this.data.datasets[this.active[0]._datasetIndex].hoverBorderColor || helpers.color(this.active[0].borderColor).saturate(0.5).darken(0.35).rgbString();
}
// Built in Tooltips
- if (this.options.showTooltips) {
+ if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();