feat(Subchart): add subchart x axis tick format option

allows for a different format to be used for subchart x axis
defaults to using same format as x axis if not specified

src/ChartInternal/Axis/Axis.ts

@@ -272,7 +272,7 @@ class Axis {
 		let tickFormat;
 
 		if (isX) {
-			tickFormat = $$.format.xAxisTick;
+			tickFormat = (id === "subX") ? $$.format.subXAxisTick : $$.format.xAxisTick;
 		} else {
 			const fn = config[`axis_${id}_tick_format`];
 
@@ -384,10 +384,13 @@ class Axis {
 		return axis;
 	}
 
-	getXAxisTickFormat(): Function {
+	getXAxisTickFormat(forSubchart? : boolean): Function {
 		const $$ = this.owner;
 		const {config, format} = $$;
-		const tickFormat = config.axis_x_tick_format;
+		// enable different tick format for x and subX - subX format defaults to x format if not defined
+		const tickFormat = forSubchart ?
+			config.subchart_axis_x_tick_format || config.axis_x_tick_format :
+			config.axis_x_tick_format;
 		const isTimeSeries = this.isTimeSeries();
 		const isCategorized = this.isCategorized();
 		let currFormat;

src/ChartInternal/internals/scale.ts

@@ -171,6 +171,7 @@ export default {
 			scale.subX = $$.getXScale(min.x, max.x, xSubDomain, d => (d % 1 ? 0 : axis.subX.tickOffset()));
 
 			format.xAxisTick = axis.getXAxisTickFormat();
+			format.subXAxisTick = axis.getXAxisTickFormat(true);
 
 			axis.setAxis("x", scale.x, config.axis_x_tick_outer, isInit);
 

src/config/Options/interaction/subchart.ts

@@ -19,6 +19,7 @@ export default {
 	 * @property {boolean} [subchart.showHandle=false] Show sub chart's handle.
 	 * @property {boolean} [subchart.axis.x.show=true] Show or hide x axis.
 	 * @property {boolean} [subchart.axis.x.tick.show=true] Show or hide x axis tick line.
+	 * @property {Function|string} [subchart.axis.x.tick.format] Use custom format for x axis ticks - see [axis.x.tick.format](#.axis․x․tick․format) for details.
 	 * @property {boolean} [subchart.axis.x.tick.text.show=true] Show or hide x axis tick text.
 	 * @property {Array} [subchart.init.range] Set initial selection domain range.
 	 * @property {number} [subchart.size.height] Change the height of the subchart.
@@ -41,6 +42,7 @@ export default {
 	 *      	  show: true,
 	 *      	    tick: {
 	 *      	      show: true,
+	 *      	      format: (x) => d3Format(".1f")(x)
 	 *      	      text: {
 	 *      	        show: false
 	 *      	      }
@@ -63,6 +65,7 @@ export default {
 	subchart_size_height: 60,
 	subchart_axis_x_show: true,
 	subchart_axis_x_tick_show: true,
+	subchart_axis_x_tick_format: <Function|string|undefined> undefined,
 	subchart_axis_x_tick_text_show: true,
 	subchart_init_range: <undefined|[number, number]> undefined,
 	subchart_onbrush: () => {}

test/interactions/subchart-spec.ts

@@ -134,6 +134,74 @@ describe("SUBCHART", () => {
 		});
 	});
 
+	describe("subchart x axis tick format", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04", "2020-01-05", "2020-01-06"],
+						["data1", 30, 200, 100, 400, 150, 250],
+					],
+					type: "line"
+				},
+				axis: {
+					x: {
+						type: "timeseries",
+						tick: {
+							format: "%m-%d"
+						},
+						padding: 100
+					}
+				},
+				subchart: {
+					show: true,
+					axis: {
+						x: {
+							tick: {}
+						}
+					}
+				}
+			}
+		});
+
+		let expected = {
+			x: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06"],
+			subX: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06"]
+		};
+
+		const checkTickValues = () => {
+			["subX", "x"].forEach(v => {
+				chart.internal.$el.axis[v]
+					.selectAll(".tick text").each(function (d, j) {
+					expect(this.textContent).to.be.equal(expected[v][j]);
+				});
+			});
+		};
+
+		it("should format subX ticks with x format", () => {
+			checkTickValues();
+		});
+
+		it("set subchart x axis tick format date", () => {
+			args.subchart.axis.x.tick.format = "%Y-%m-%d";
+		});
+
+		it("should format subX ticks with subX date format", () => {
+			expected.subX = ["2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04", "2020-01-05", "2020-01-06"];
+			checkTickValues();
+		});
+
+		it("set subchart x axis tick format function", () => {
+			args.subchart.axis.x.tick.format = (x) => x.getDate();
+		});
+
+		it("should format subX ticks with subX function", () => {
+			expected.subX = ["1", "2", "3", "4", "5", "6"];
+			checkTickValues();
+		});
+	});
+
 	describe("subchart selection", () => {
 		before(() => {
 			args = {