chart.js 2.1
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
JavaScript
var d1 = new Date("1945-01-01T00:00:00");
var d2 = new Date("2000-01-01T00:00:00");
var d3 = new Date("2010-01-01T00:00:00");
var datmin = new Date("1940-01-01T00:00:00");
var datmax = Date.now();
var config = {
type: 'line',
data: {
labels: [d1, d2, d3],
datasets: [{
label: "Evolution sur la commune",
data: [200, 100, 90],
backgroundColor: 'rgba(116, 196, 118, 0.2)',
borderColor: 'rgba(116, 196, 118, 1)',
borderWidth: 2
},
{
label: "Moyenne des communes",
data: [250, 110, 100],
backgroundColor: 'rgba(200, 200, 200, 0.2)',
borderColor: 'rgba(200, 200, 200, 1)',
borderWidth: 2
}]
},
options: {
showAllTooltips : true,
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'year',
unitStepSize: 10,
min: datmin,
max: datmax,
displayFormats: {'day':'YYYY', 'year': 'YYYY'}
}
}],
yAxes: [{
display: true,
ticks: {
callback: function(label, index, labels) {
return label +' m/ha';},
max: 300,
min: 0,
stepSize: 100
}
}]
},
tooltips: {
callbacks: {
label : function (tooltipItems, data) {
return tooltipItems.yLabel + ' m/ha';
},
title : function (tooltipItem, data) {
console.log(data);
return tooltipItem[0]["xLabel"].getFullYear();
}
}},
},
};
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
...