I was able to add an offset to the X Labels but I would like to add an offset to all the points in the dataset. Is it possible?
This is the code I'm using:
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: [{
gridLines: {
offsetGridLines: true,
display: false,
borderDash: [6, 2],
tickMarkLength:5
},
ticks: {
fontSize: 8,
labelOffset: 10,
maxRotation: 0
}}],
yAxes: [{
gridLines: {
display:false
},
ticks: {
beginAtZero: true,
max: 200,
min: 0,
stepSize: 20,
fontSize: 8
}
}]
},
legend: {
display: false
},
responsive: false,
maintainAspectRatio: true
}
});
I would like to apply that offset to all the points, in the image I just added an arrow to the JAN/DEC but I would like to apply it to all of them.
I tried adding a null data, the problem is that I don't want to show the first dashed grid.
Any ideas? Thanks in advance.
You can achieve this using Chart.js plugins. They let you handle specific events triggered during the chart creation (beforeInit
, afterUpdate
, afterDraw
...) and are also easy to implement :
Chart.pluginService.register({
afterUpdate: function(chart) {
// This will be triggered after every update of the chart
}
});
Now you just have to loop through your dataset data model (the property used to draw charts) and add the offset you want :
Chart.pluginService.register({
afterUpdate: function(chart) {
// We get the dataset and set the offset here
var dataset = chart.config.data.datasets[0];
var offset = 20;
// For every data in the dataset ...
for (var i = 0; i < dataset._meta[0].data.length; i++) {
// We get the model linked to this data
var model = dataset._meta[0].data[i]._model;
// And add the offset to the `x` property
model.x += offset;
// .. and also to these two properties
// to make the bezier curve fits the new graph
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
}
});
You can see your example working on this jsFiddle and here is its result :