Chart.js #7854

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<canvas id="myChart" width="350" height="250"></canvas>

CSS

body {
  background: #333;
}
canvas {
  margin: 2rem 0 5rem;
  background: #fff;
}

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');

/*
Chart.scaleService.getScaleConstructor('category').prototype.getLabelForIndex = function(index, datasetIndex) {
		var me = this;
		var chart = me.chart;
		var dataset = chart.data.datasets[datasetIndex];
		var data = dataset.data[index];

		if (chart.getDatasetMeta(datasetIndex).controller._getValueScaleId() === me.id) {
			return me.getRightValue(data);
		}

		if (me.isHorizontal()) {
			if (data.x !== undefined) {
				return data.x;
			}
		} else if (data.y !== undefined) {
			return data.y;
		}

		return me._getLabels()[index];
};
*/
Chart.scaleService.getScaleConstructor('category').prototype.getLabelForIndex = function(index, datasetIndex) {
		return this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
};


var myChart = new Chart(ctx, {
			type: 'line',
			data: {
				datasets: [{
					label: 'Test',
					data: [{x: 'February', y: 11}, {x: 'March', y: 10}]
				},
        {
        	label: 'Test2',
					data: [{x: 'January', y: 11}, {x: 'February', y: 12}]
        }
        ],
				labels: ['January', 'February', 'March']
			},
			options: {
				tooltips: {
					mode: 'x'
				}
			}
		});