samples/advanced/derived-axis-type.html

<!doctype html>
<html>

<head>
	<title>Logarithmic Line Chart</title>
	<script src="../../dist/chart.min.js"></script>
	<script src="../utils.js"></script>
	<style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
</head>

<body>
	<div style="width:75%;">
		<canvas id="canvas"></canvas>
	</div>
	<script>
	var randomScalingFactor = function() {
		return Math.pow(2, Math.ceil(Math.random() * 10));
	};

	class Log2Axis extends Chart.Scale {
		constructor(cfg) {
			super(cfg);
			this._startValue = undefined;
			this._valueRange = 0;
		}

		parse(raw, index) {
			const value = Chart.registry.getScale('linear').prototype.parse.apply(this, [raw, index]);
			return isFinite(value) && value > 0 ? value : null;
		}

		determineDataLimits() {
			const {min, max} = this.getMinMax(true);
			this.min = isFinite(min) ? Math.max(0, min) : null;
			this.max = isFinite(max) ? Math.max(0, max) : null;
		}

		buildTicks() {
			const ticks = [];

			let power = Math.floor(Math.log2(this.min));
			let maxPower = Math.ceil(Math.log2(this.max));
			while (power <= maxPower) {
				ticks.push({value: Math.pow(2, power)});
				power += 1;
			}

			this.min = ticks[0].value;
			this.max = ticks[ticks.length - 1].value;
			return ticks;
		}

		/**
		 * @protected
		 */
		configure() {
			const start = this.min;

			super.configure();

			this._startValue = Math.log2(start);
			this._valueRange = Math.log2(this.max) - Math.log2(start);
		}

		getPixelForValue(value) {
			if (value === undefined || value === 0) {
				value = this.min;
			}

			return this.getPixelForDecimal(value === this.min ? 0 : (Math.log2(value) - this._startValue) / this._valueRange);
		}

		getValueForPixel(pixel) {
			const decimal = this.getDecimalForPixel(pixel);
			return Math.pow(2, this._startValue + decimal * this._valueRange);
		}
	}

	Log2Axis.id = 'log2';
	Log2Axis.defaults = {};
	Chart.register(Log2Axis);

	var config = {
		type: 'line',
		data: {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				label: 'My First dataset',
				backgroundColor: window.chartColors.red,
				borderColor: window.chartColors.red,
				fill: false,
				data: [
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor()
				],
			}]
		},
		options: {
			responsive: true,
			plugins: {
				title: {
					display: true,
					text: 'Derived Axis Type - Log2'
				}
			},
			scales: {
				x: {
					display: true,
				},
				y: {
					display: true,
					type: 'log2',
				}
			}
		}
	};

	window.onload = function() {
		var ctx = document.getElementById('canvas').getContext('2d');
		window.myLine = new Chart(ctx, config);
	};
	</script>
</body>

</html>