JavaScript
var ctx = document.getElementById("canvas");
Chart.pluginService.register({
afterUpdate: function(chart) {
var dataset = chart.config.data.datasets[0];
var offset = 20;
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
},
afterDatasetsDraw: function(chart) {
var ctx = chart.chart.ctx;
var xAxe = chart.config.options.scales.xAxes[0];
var xScale = chart.scales[xAxe.id];
var yAxe = chart.config.options.scales.yAxes[0];
var yScale = chart.scales[yAxe.id];
ctx.strokeStyle = "rgb(120, 120, 120)";
ctx.beginPath();
ctx.moveTo(xScale.left + 0.5, yScale.bottom);
ctx.lineTo(xScale.left + 0.5, yScale.top);
ctx.stroke();
}
});
var myChart = new Chart.Line(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize : 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}]
},
options: {
scales: {
xAxes:...