Added majorTick configuration via options.

Author: andrew.hurskiy

docs/axes/styling.md

@@ -35,3 +35,14 @@ The tick configuration is nested under the scale configuration in the `ticks` ke
 | `fontSize` | `Number` | `12` | Font size for the tick labels.
 | `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
 | `reverse` | `Boolean` | `false` | Reverses order of tick labels.
+
+## Major Tick Configuration
+The majorTick configuration is nested under the scale configuration in the `majorTicks` key. It defines options for the major tick marks that are generated by the axis. Omitted options are onherited from `ticks` configuration.
+
+| Name | Type | Default | Description
+| -----| ---- | --------| -----------
+| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
+| `fontColor` | Color | `'#666'` | Font color for tick labels.
+| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
+| `fontSize` | `Number` | `12` | Font size for the tick labels.
+| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).

src/core/core.scale.js

@@ -487,6 +487,7 @@ module.exports = function(Chart) {
 			var context = me.ctx;
 			var globalDefaults = Chart.defaults.global;
 			var optionTicks = options.ticks;
+			var optionMajorTicks = options.majorTicks ? options.majorTicks : optionTicks;
 			var gridLines = options.gridLines;
 			var scaleLabel = options.scaleLabel;
 
@@ -503,7 +504,8 @@ module.exports = function(Chart) {
 
 			var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor);
 			var tickFont = parseFontOptions(optionTicks);
-			var majorTickFont = helpers.fontString(tickFont.size, 'bold', tickFont.family);
+			var majorTickFontColor = helpers.getValueOrDefault(optionMajorTicks.fontColor, globalDefaults.defaultFontColor);
+			var majorTickFont = parseFontOptions(optionMajorTicks);
 
 			var tl = gridLines.drawTicks ? gridLines.tickMarkLength : 0;
 
@@ -514,9 +516,6 @@ module.exports = function(Chart) {
 			var cosRotation = Math.cos(labelRotationRadians);
 			var longestRotatedLabel = me.longestLabelWidth * cosRotation;
 
-			// Make sure we draw text in the correct color and font
-			context.fillStyle = tickFontColor;
-
 			var itemsToDraw = [];
 
 			if (isHorizontal) {
@@ -681,10 +680,12 @@ module.exports = function(Chart) {
 				}
 
 				if (optionTicks.display) {
+					// Make sure we draw text in the correct color and font
 					context.save();
 					context.translate(itemToDraw.labelX, itemToDraw.labelY);
 					context.rotate(itemToDraw.rotation);
-					context.font = itemToDraw.major ? majorTickFont : tickFont.font;
+					context.font = itemToDraw.major ? majorTickFont.font : tickFont.font;
+					context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor;
 					context.textBaseline = itemToDraw.textBaseline;
 					context.textAlign = itemToDraw.textAlign;
 

src/scales/scale.time.js

@@ -36,6 +36,19 @@ module.exports = function(Chart) {
 		},
 		ticks: {
 			autoSkip: false
+		},
+		majorTicks: {
+			beginAtZero: false,
+			minRotation: 0,
+			maxRotation: 50,
+			mirror: false,
+			padding: 0,
+			reverse: false,
+			display: true,
+			autoSkip: true,
+			autoSkipPadding: 0,
+			labelOffset: 0,
+			callback: Chart.Ticks.formatters.values
 		}
 	};
 
@@ -45,8 +58,17 @@ module.exports = function(Chart) {
 				throw new Error('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com');
 			}
 
+			this.mergeTicksOptions();
+
 			Chart.Scale.prototype.initialize.call(this);
 		},
+		mergeTicksOptions: function() {
+			for (var key in this.options.ticks) {
+				if (typeof this.options.majorTicks[key] === 'undefined') {
+					this.options.majorTicks[key] = this.options.ticks[key];
+				}
+			}
+		},
 		determineDataLimits: function() {
 			var me = this;
 			var timeOpts = me.options.time;
@@ -186,16 +208,18 @@ module.exports = function(Chart) {
 			var tickClone = tick.clone();
 			var tickTimestamp = tick.valueOf();
 			var major = false;
+			var tickOpts;
 			if (this.majorUnit && this.majorDisplayFormat && tickTimestamp === tickClone.startOf(this.majorUnit).valueOf()) {
 				// format as senior unit
 				formattedTick = tick.format(this.majorDisplayFormat);
+				tickOpts = this.options.majorTicks;
 				major = true;
 			} else {
 				// format as base unit
 				formattedTick = tick.format(this.displayFormat);
+				tickOpts = this.options.ticks;
 			}
 
-			var tickOpts = this.options.ticks;
 			var callback = helpers.getValueOrDefault(tickOpts.callback, tickOpts.userCallback);
 
 			if (callback) {

test/specs/scale.time.tests.js

@@ -91,6 +91,19 @@ describe('Time scale tests', function() {
 				autoSkipPadding: 0,
 				labelOffset: 0
 			},
+			majorTicks: {
+				beginAtZero: false,
+				minRotation: 0,
+				maxRotation: 50,
+				mirror: false,
+				padding: 0,
+				reverse: false,
+				display: true,
+				callback: defaultConfig.majorTicks.callback, // make this nicer, then check explicitly below,
+				autoSkip: true,
+				autoSkipPadding: 0,
+				labelOffset: 0
+			},
 			time: {
 				parser: false,
 				format: false,