axes working

dist/frappe-charts.esm.js

@@ -148,6 +148,40 @@ function getStringWidth(string, charWidth) {
 	return (string+"").length * charWidth;
 }
 
+const MIN_BAR_PERCENT_HEIGHT = 0.01;
+
+function getXLineProps(totalHeight, mode) {
+	let startAt = totalHeight + 6, height, textStartAt, axisLineClass = '';
+	if(mode === 'span') {		// long spanning lines
+		startAt = -7;
+		height = totalHeight + 15;
+		textStartAt = totalHeight + 25;
+	} else if(mode === 'tick'){	// short label lines
+		startAt = totalHeight;
+		height = 6;
+		textStartAt = 9;
+		axisLineClass = 'x-axis-label';
+	}
+
+	return [startAt, height, textStartAt, axisLineClass];
+}
+
+function getYLineProps(totalWidth, mode, specific=false) {
+	if(specific) {
+		return[totalWidth, totalWidth + 5, 'specific-value', 0];
+	}
+	let width, text_end_at = -9, axisLineClass = '', startAt = 0;
+	if(mode === 'span') {		// long spanning lines
+		width = totalWidth + 6;
+		startAt = -6;
+	} else if(mode === 'tick'){	// short label lines
+		width = -6;
+		axisLineClass = 'y-axis-label';
+	}
+
+	return [width, text_end_at, axisLineClass, startAt];
+}
+
 function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 	let height, y;
 	if (yTop <= zeroLine) {
@@ -156,7 +190,7 @@ function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 
 		// In case of invisible bars
 		if(height === 0) {
-			height = totalHeight * 0.01;
+			height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
 			y -= height;
 		}
 	} else {
@@ -165,7 +199,7 @@ function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 
 		// In case of invisible bars
 		if(height === 0) {
-			height = totalHeight * 0.01;
+			height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
 		}
 	}
 
@@ -183,38 +217,7 @@ function equilizeNoOfElements(array1, array2,
 	return [array1, array2];
 }
 
-function getXLineProps(total_height, mode) {
-	let start_at, height, text_start_at, axis_line_class = '';
-	if(mode === 'span') {		// long spanning lines
-		start_at = -7;
-		height = total_height + 15;
-		text_start_at = total_height + 25;
-	} else if(mode === 'tick'){	// short label lines
-		start_at = total_height;
-		height = 6;
-		text_start_at = 9;
-		axis_line_class = 'x-axis-label';
-	}
-
-	return [start_at, height, text_start_at, axis_line_class];
-}
-
-function getYLineProps(total_width, mode, specific=false) {
-	if(specific) {
-		return[total_width, total_width + 5, 'specific-value', 0];
-	}
-	let width, text_end_at = -9, axis_line_class = '', start_at = 0;
-	if(mode === 'span') {		// long spanning lines
-		width = total_width + 6;
-		start_at = -6;
-	} else if(mode === 'tick'){	// short label lines
-		width = -6;
-		axis_line_class = 'y-axis-label';
-	}
-
-	return [width, text_end_at, axis_line_class, start_at];
-}
-
+const X_AXIS_LINE_CLASS = 'x-value-text';
 function $$2(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
 }
@@ -348,11 +351,11 @@ function makeText(className, x, y, content) {
 	});
 }
 
-function makeXLine(height, textStartAt, point, labelClass, axisLineClass, xPos) {
+function makeXLine(xPos, startAt, height, textStartAt, point, labelClass, axisLineClass) {
 	let line = createSVG('line', {
 		x1: 0,
 		x2: 0,
-		y1: 0,
+		y1: startAt,
 		y2: height
 	});
 
@@ -365,7 +368,7 @@ function makeXLine(height, textStartAt, point, labelClass, axisLineClass, xPos)
 	});
 
 	let xLine = createSVG('g', {
-		className: `tick ${axisLineClass}`,
+		className: `tick ${X_AXIS_LINE_CLASS}`,
 		transform: `translate(${ xPos }, 0)`
 	});
 
@@ -1125,7 +1128,7 @@ class BaseChart {
 		this.bindWindowEvents();
 		this.setupConstants();
 
-		this.setupEmptyValues();
+		// this.setupEmptyValues();
 		// this.setupComponents();
 
 		this.makeContainer();
@@ -1137,7 +1140,8 @@ class BaseChart {
 		// (everything, layers, groups, units)
 		this.setWidth();
 
-		// dependent on width >.<, how can this be decoupled
+		// these both dependent on width >.<, how can this be decoupled
+		this.setupEmptyValues();
 		this.setupComponents();
 
 		this.makeChartArea();
@@ -1377,15 +1381,18 @@ class AxisChart extends BaseChart {
 			make: self.makeYLines,
 			makeArgs: [self.yAxisPositions, self.yAxisLabels,
 				self.width, self.y_axis_mode],
-			store: [], //this.yAxisLines
-			animate: self.animateYLines
+			store: [],
+			animate: self.animateYLines,
+			// indexed: 1
 		};
 		this.xAxis = {
 			layerClass: 'x axis',
 			layer: undefined,
 			make: self.makeXLines,
-			makeArgs: [self.xPositions, self.xAxisLabels],
-			store: [], //this.xAxisLines
+			// Need avg_unit_width here
+			makeArgs: [self.xPositions, self.xAxisLabels,
+				self.height, self.x_axis_mode, 200, self.is_series],
+			store: [],
 			animate: self.animateXLines
 		};
 		this.yMarkerLines = {
@@ -1420,7 +1427,7 @@ class AxisChart extends BaseChart {
 
 		this.components = [
 			this.yAxis,
-			// this.xAxis,
+			this.xAxis,
 			// this.yMarkerLines,
 			// this.xMarkerLines,
 			// this.dataUnits,
@@ -1536,21 +1543,18 @@ class AxisChart extends BaseChart {
 	// 	// this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
 	// }
 
-	makeXLines(positions, values) {
-		let [start_at, height, text_start_at,
-			axis_line_class] = getXLineProps(this.height, this.x_axis_mode);
-		this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`);
+	makeXLines(positions, values, total_height, mode, avg_unit_width, is_series) {
+		let [startAt, height, text_start_at,
+			axis_line_class] = getXLineProps(total_height, mode);
 
 		let char_width = 8;
-		let allowed_space = this.avg_unit_width * 1.5;
+		let allowed_space = avg_unit_width * 1.5;
 		let allowed_letters = allowed_space / 8;
 
-		this.xAxisLines = [];
-		this.x_axis_group.textContent = '';
-		values.map((value, i) => {
+		return values.map((value, i) => {
 			let space_taken = getStringWidth(value, char_width) + 2;
 			if(space_taken > allowed_space) {
-				if(this.is_series) {
+				if(is_series) {
 					// Skip some axis lines if X axis is a series
 					let skips = 1;
 					while((space_taken/skips)*2 > allowed_space) {
@@ -1564,47 +1568,21 @@ class AxisChart extends BaseChart {
 				}
 			}
 
-			let xLine = makeXLine(
+			return makeXLine(
+				positions[i],
+				startAt,
 				height,
 				text_start_at,
 				value,
 				'x-value-text',
-				axis_line_class,
-				positions[i]
+				axis_line_class
 			);
-			this.xAxisLines.push(xLine);
-			this.x_axis_group.appendChild(xLine);
 		});
 	}
 
-	// makeYLines(positions, values) {
-	// 	let [width, text_end_at, axis_line_class,
-	// 		start_at] = getYLineProps(this.width, this.y_axis_mode);
-
-	// 	this.yAxisLines = [];
-	// 	this.y_axis_group.textContent = '';
-	// 	values.map((value, i) => {
-	// 		let yLine = makeYLine(
-	// 			start_at,
-	// 			width,
-	// 			text_end_at,
-	// 			value,
-	// 			'y-value-text',
-	// 			axis_line_class,
-	// 			positions[i],
-	// 			(value === 0 && i !== 0) // Non-first Zero line
-	// 		);
-	// 		this.yAxisLines.push(yLine);
-	// 		this.y_axis_group.appendChild(yLine);
-	// 	});
-	// }
-
 	makeYLines(positions, values, totalWidth, mode) {
 		let [width, text_end_at, axis_line_class,
 			start_at] = getYLineProps(totalWidth, mode);
-
-		// this.yAxisLines = [];
-		// this.y_axis_group.textContent = '';
 		return values.map((value, i) => {
 			return makeYLine(
 				start_at,
@@ -1616,8 +1594,6 @@ class AxisChart extends BaseChart {
 				positions[i],
 				(value === 0 && i !== 0) // Non-first Zero line
 			);
-			// this.yAxisLines.push(yLine);
-			// this.y_axis_group.appendChild(yLine);
 		});
 	}
 
@@ -1986,27 +1962,27 @@ class BarChart extends AxisChart {
 		};
 	}
 
-	make_overlay() {
-		// Just make one out of the first element
-		let index = this.xAxisLabels.length - 1;
-		let unit = this.y[0].svg_units[index];
-		this.updateCurrentDataPoint(index);
+	// make_overlay() {
+	// 	// Just make one out of the first element
+	// 	let index = this.xAxisLabels.length - 1;
+	// 	let unit = this.y[0].svg_units[index];
+	// 	this.updateCurrentDataPoint(index);
 
-		if(this.overlay) {
-			this.overlay.parentNode.removeChild(this.overlay);
-		}
-		this.overlay = unit.cloneNode();
-		this.overlay.style.fill = '#000000';
-		this.overlay.style.opacity = '0.4';
-		this.drawArea.appendChild(this.overlay);
-	}
+	// 	if(this.overlay) {
+	// 		this.overlay.parentNode.removeChild(this.overlay);
+	// 	}
+	// 	this.overlay = unit.cloneNode();
+	// 	this.overlay.style.fill = '#000000';
+	// 	this.overlay.style.opacity = '0.4';
+	// 	this.drawArea.appendChild(this.overlay);
+	// }
 
-	bind_overlay() {
-		// on event, update overlay
-		this.parent.addEventListener('data-select', (e) => {
-			this.update_overlay(e.svg_unit);
-		});
-	}
+	// bind_overlay() {
+	// 	// on event, update overlay
+	// 	this.parent.addEventListener('data-select', (e) => {
+	// 		this.update_overlay(e.svg_unit);
+	// 	});
+	// }
 
 	bind_units(units_array) {
 		units_array.map(unit => {
@@ -2537,7 +2513,7 @@ class Heatmap extends BaseChart {
 		this.distribution_size = 5;
 
 		this.translate_x = 0;
-		this.setup();
+		// this.setup();
 	}
 
 	validate_colors(colors) {
@@ -2762,6 +2738,14 @@ class Heatmap extends BaseChart {
 	}
 }
 
+// if ("development" !== 'production') {
+// 	// Enable LiveReload
+// 	document.write(
+// 		'<script src="http://' + (location.host || 'localhost').split(':')[0] +
+// 		':35729/livereload.js?snipver=1"></' + 'script>'
+// 	);
+// }
+
 const chartTypes = {
 	line: LineChart,
 	bar: BarChart,

rollup.config.js

@@ -18,14 +18,15 @@ export default [
 		input: 'src/js/charts.js',
 		output: [
 			{
-				file: pkg.main,
-				format: 'cjs',
+				file: 'docs/assets/js/frappe-charts.min.js',
+				format: 'iife',
 			},
 			{
-				file: pkg.module,
-				format: 'es',
+				file: pkg.browser,
+				format: 'iife',
 			}
 		],
+		name: 'Chart',
 		plugins: [
 			postcss({
 				preprocessor: (content, id) => new Promise((resolve, reject) => {
@@ -33,7 +34,6 @@ export default [
 					resolve({ code: result.css.toString() })
 				}),
 				extensions: [ '.scss' ],
-				// extract: 'dist/frappe-charts.min.css',
 				plugins: [
 					nested(),
 					cssnext({ warnForDuplicates: false }),
@@ -59,7 +59,11 @@ export default [
 		input: 'src/js/charts.js',
 		output: [
 			{
-				file: pkg.src,
+				file: pkg.main,
+				format: 'cjs',
+			},
+			{
+				file: pkg.module,
 				format: 'es',
 			}
 		],
@@ -70,7 +74,6 @@ export default [
 					resolve({ code: result.css.toString() })
 				}),
 				extensions: [ '.scss' ],
-				extract: 'dist/frappe-charts.min.css',
 				plugins: [
 					nested(),
 					cssnext({ warnForDuplicates: false }),
@@ -82,25 +85,24 @@ export default [
 					'src/scss/**',
 				]
 			}),
+			babel({
+				exclude: 'node_modules/**',
+			}),
 			replace({
 				exclude: 'node_modules/**',
 				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-			})
+			}),
+			uglify()
 		],
 	},
 	{
 		input: 'src/js/charts.js',
 		output: [
 			{
-				file: 'docs/assets/js/frappe-charts.min.js',
-				format: 'iife',
-			},
-			{
-				file: pkg.browser,
-				format: 'iife',
+				file: pkg.src,
+				format: 'es',
 			}
 		],
-		name: 'Chart',
 		plugins: [
 			postcss({
 				preprocessor: (content, id) => new Promise((resolve, reject) => {
@@ -108,6 +110,7 @@ export default [
 					resolve({ code: result.css.toString() })
 				}),
 				extensions: [ '.scss' ],
+				extract: 'dist/frappe-charts.min.css',
 				plugins: [
 					nested(),
 					cssnext({ warnForDuplicates: false }),
@@ -119,14 +122,10 @@ export default [
 					'src/scss/**',
 				]
 			}),
-			babel({
-				exclude: 'node_modules/**',
-			}),
 			replace({
 				exclude: 'node_modules/**',
 				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-			}),
-			uglify()
+			})
 		],
 	}
 ];

src/js/charts/AxisChart.js

@@ -42,15 +42,18 @@ export default class AxisChart extends BaseChart {
 			make: self.makeYLines,
 			makeArgs: [self.yAxisPositions, self.yAxisLabels,
 				self.width, self.y_axis_mode],
-			store: [], //this.yAxisLines
-			animate: self.animateYLines
+			store: [],
+			animate: self.animateYLines,
+			// indexed: 1
 		};
 		this.xAxis = {
 			layerClass: 'x axis',
 			layer: undefined,
 			make: self.makeXLines,
-			makeArgs: [self.xPositions, self.xAxisLabels],
-			store: [], //this.xAxisLines
+			// Need avg_unit_width here
+			makeArgs: [self.xPositions, self.xAxisLabels,
+				self.height, self.x_axis_mode, 200, self.is_series],
+			store: [],
 			animate: self.animateXLines
 		};
 		this.yMarkerLines = {
@@ -85,7 +88,7 @@ export default class AxisChart extends BaseChart {
 
 		this.components = [
 			this.yAxis,
-			// this.xAxis,
+			this.xAxis,
 			// this.yMarkerLines,
 			// this.xMarkerLines,
 			// this.dataUnits,
@@ -201,21 +204,18 @@ export default class AxisChart extends BaseChart {
 	// 	// this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
 	// }
 
-	makeXLines(positions, values) {
-		let [start_at, height, text_start_at,
-			axis_line_class] = getXLineProps(this.height, this.x_axis_mode);
-		this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`);
+	makeXLines(positions, values, total_height, mode, avg_unit_width, is_series) {
+		let [startAt, height, text_start_at,
+			axis_line_class] = getXLineProps(total_height, mode);
 
 		let char_width = 8;
-		let allowed_space = this.avg_unit_width * 1.5;
+		let allowed_space = avg_unit_width * 1.5;
 		let allowed_letters = allowed_space / 8;
 
-		this.xAxisLines = [];
-		this.x_axis_group.textContent = '';
-		values.map((value, i) => {
+		return values.map((value, i) => {
 			let space_taken = getStringWidth(value, char_width) + 2;
 			if(space_taken > allowed_space) {
-				if(this.is_series) {
+				if(is_series) {
 					// Skip some axis lines if X axis is a series
 					let skips = 1;
 					while((space_taken/skips)*2 > allowed_space) {
@@ -229,47 +229,21 @@ export default class AxisChart extends BaseChart {
 				}
 			}
 
-			let xLine = makeXLine(
+			return makeXLine(
+				positions[i],
+				startAt,
 				height,
 				text_start_at,
 				value,
 				'x-value-text',
-				axis_line_class,
-				positions[i]
+				axis_line_class
 			);
-			this.xAxisLines.push(xLine);
-			this.x_axis_group.appendChild(xLine);
 		});
 	}
 
-	// makeYLines(positions, values) {
-	// 	let [width, text_end_at, axis_line_class,
-	// 		start_at] = getYLineProps(this.width, this.y_axis_mode);
-
-	// 	this.yAxisLines = [];
-	// 	this.y_axis_group.textContent = '';
-	// 	values.map((value, i) => {
-	// 		let yLine = makeYLine(
-	// 			start_at,
-	// 			width,
-	// 			text_end_at,
-	// 			value,
-	// 			'y-value-text',
-	// 			axis_line_class,
-	// 			positions[i],
-	// 			(value === 0 && i !== 0) // Non-first Zero line
-	// 		);
-	// 		this.yAxisLines.push(yLine);
-	// 		this.y_axis_group.appendChild(yLine);
-	// 	});
-	// }
-
 	makeYLines(positions, values, totalWidth, mode) {
 		let [width, text_end_at, axis_line_class,
 			start_at] = getYLineProps(totalWidth, mode);
-
-		// this.yAxisLines = [];
-		// this.y_axis_group.textContent = '';
 		return values.map((value, i) => {
 			return makeYLine(
 				start_at,
@@ -281,8 +255,6 @@ export default class AxisChart extends BaseChart {
 				positions[i],
 				(value === 0 && i !== 0) // Non-first Zero line
 			);
-			// this.yAxisLines.push(yLine);
-			// this.y_axis_group.appendChild(yLine);
 		});
 	}
 

src/js/charts/BarChart.js

@@ -21,27 +21,27 @@ export default class BarChart extends AxisChart {
 		};
 	}
 
-	make_overlay() {
-		// Just make one out of the first element
-		let index = this.xAxisLabels.length - 1;
-		let unit = this.y[0].svg_units[index];
-		this.updateCurrentDataPoint(index);
+	// make_overlay() {
+	// 	// Just make one out of the first element
+	// 	let index = this.xAxisLabels.length - 1;
+	// 	let unit = this.y[0].svg_units[index];
+	// 	this.updateCurrentDataPoint(index);
 
-		if(this.overlay) {
-			this.overlay.parentNode.removeChild(this.overlay);
-		}
-		this.overlay = unit.cloneNode();
-		this.overlay.style.fill = '#000000';
-		this.overlay.style.opacity = '0.4';
-		this.drawArea.appendChild(this.overlay);
-	}
+	// 	if(this.overlay) {
+	// 		this.overlay.parentNode.removeChild(this.overlay);
+	// 	}
+	// 	this.overlay = unit.cloneNode();
+	// 	this.overlay.style.fill = '#000000';
+	// 	this.overlay.style.opacity = '0.4';
+	// 	this.drawArea.appendChild(this.overlay);
+	// }
 
-	bind_overlay() {
-		// on event, update overlay
-		this.parent.addEventListener('data-select', (e) => {
-			this.update_overlay(e.svg_unit);
-		});
-	}
+	// bind_overlay() {
+	// 	// on event, update overlay
+	// 	this.parent.addEventListener('data-select', (e) => {
+	// 		this.update_overlay(e.svg_unit);
+	// 	});
+	// }
 
 	bind_units(units_array) {
 		units_array.map(unit => {

src/js/charts/BaseChart.js

@@ -117,7 +117,7 @@ export default class BaseChart {
 		this.bindWindowEvents();
 		this.setupConstants();
 
-		this.setupEmptyValues();
+		// this.setupEmptyValues();
 		// this.setupComponents();
 
 		this.makeContainer();
@@ -129,7 +129,8 @@ export default class BaseChart {
 		// (everything, layers, groups, units)
 		this.setWidth();
 
-		// dependent on width >.<, how can this be decoupled
+		// these both dependent on width >.<, how can this be decoupled
+		this.setupEmptyValues();
 		this.setupComponents();
 
 		this.makeChartArea();

src/js/charts/Heatmap.js

@@ -37,7 +37,7 @@ export default class Heatmap extends BaseChart {
 		this.distribution_size = 5;
 
 		this.translate_x = 0;
-		this.setup();
+		// this.setup();
 	}
 
 	validate_colors(colors) {

src/js/utils/draw-utils.js

@@ -1,5 +1,40 @@
 import { fillArray } from '../utils/helpers';
 
+const AXIS_TICK_LENGTH = 6;
+const MIN_BAR_PERCENT_HEIGHT = 0.01;
+
+export function getXLineProps(totalHeight, mode) {
+	let startAt = totalHeight + 6, height, textStartAt, axisLineClass = '';
+	if(mode === 'span') {		// long spanning lines
+		startAt = -7;
+		height = totalHeight + 15;
+		textStartAt = totalHeight + 25;
+	} else if(mode === 'tick'){	// short label lines
+		startAt = totalHeight;
+		height = 6;
+		textStartAt = 9;
+		axisLineClass = 'x-axis-label';
+	}
+
+	return [startAt, height, textStartAt, axisLineClass];
+}
+
+export function getYLineProps(totalWidth, mode, specific=false) {
+	if(specific) {
+		return[totalWidth, totalWidth + 5, 'specific-value', 0];
+	}
+	let width, text_end_at = -9, axisLineClass = '', startAt = 0;
+	if(mode === 'span') {		// long spanning lines
+		width = totalWidth + 6;
+		startAt = -6;
+	} else if(mode === 'tick'){	// short label lines
+		width = -6;
+		axisLineClass = 'y-axis-label';
+	}
+
+	return [width, text_end_at, axisLineClass, startAt];
+}
+
 export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 	let height, y;
 	if (yTop <= zeroLine) {
@@ -8,7 +43,7 @@ export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 
 		// In case of invisible bars
 		if(height === 0) {
-			height = totalHeight * 0.01;
+			height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
 			y -= height;
 		}
 	} else {
@@ -17,7 +52,7 @@ export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 
 		// In case of invisible bars
 		if(height === 0) {
-			height = totalHeight * 0.01;
+			height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
 		}
 	}
 
@@ -34,35 +69,3 @@ export function equilizeNoOfElements(array1, array2,
 	}
 	return [array1, array2];
 }
-
-export function getXLineProps(total_height, mode) {
-	let start_at, height, text_start_at, axis_line_class = '';
-	if(mode === 'span') {		// long spanning lines
-		start_at = -7;
-		height = total_height + 15;
-		text_start_at = total_height + 25;
-	} else if(mode === 'tick'){	// short label lines
-		start_at = total_height;
-		height = 6;
-		text_start_at = 9;
-		axis_line_class = 'x-axis-label';
-	}
-
-	return [start_at, height, text_start_at, axis_line_class];
-}
-
-export function getYLineProps(total_width, mode, specific=false) {
-	if(specific) {
-		return[total_width, total_width + 5, 'specific-value', 0];
-	}
-	let width, text_end_at = -9, axis_line_class = '', start_at = 0;
-	if(mode === 'span') {		// long spanning lines
-		width = total_width + 6;
-		start_at = -6;
-	} else if(mode === 'tick'){	// short label lines
-		width = -6;
-		axis_line_class = 'y-axis-label';
-	}
-
-	return [width, text_end_at, axis_line_class, start_at];
-}

src/js/utils/draw.js

@@ -1,6 +1,7 @@
 import { getBarHeightAndYAttr } from './draw-utils';
 
-// Constants used
+const X_AXIS_LINE_CLASS = 'x-value-text';
+const Y_AXIS_LINE_CLASS = 'y-value-text';
 
 function $(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
@@ -135,11 +136,11 @@ export function makeText(className, x, y, content) {
 	});
 }
 
-export function makeXLine(height, textStartAt, point, labelClass, axisLineClass, xPos) {
+export function makeXLine(xPos, startAt, height, textStartAt, point, labelClass, axisLineClass) {
 	let line = createSVG('line', {
 		x1: 0,
 		x2: 0,
-		y1: 0,
+		y1: startAt,
 		y2: height
 	});
 
@@ -152,7 +153,7 @@ export function makeXLine(height, textStartAt, point, labelClass, axisLineClass,
 	});
 
 	let xLine = createSVG('g', {
-		className: `tick ${axisLineClass}`,
+		className: `tick ${X_AXIS_LINE_CLASS}`,
 		transform: `translate(${ xPos }, 0)`
 	});