We Keep Coding

Chart.js : How I change the x axes ticks labels alignment in any sizes?

How can I move my labels on my x axes in between another x axes label. Nothing seems to work and I was unable to find anything on the docs. Is there a workaround? I'm using line chart time series.
https://www.chartjs.org/samples/latest/scales/time/financial.html
Currently, with the code I have its generating the figure below:
var cfg = {
elements:{
point: {
radius: 4
}
},
data: {
datasets: [
{
label: 'vsy',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
data: firstData,
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
},
{
label: 'de vsy',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
data: dataMaker(15),
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
}
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
offset: true,
time: {
unit: 'month',
displayFormats: {
month: 'MMM'
}
},
ticks: {
autoSkip: true,
autoSkipPadding: 75,
sampleSize: 100
},
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
}
}
};
This is what I have now:
I want the labels on the x-axis to be on center instead of below the y axis grid line.
Thanks to uminder, with his comment it solves the issue but now I have a conflicting tooltip which lie on a same grid. When I hover to april line first point it shows me mar 30 which lies just above it and vice versa.
I fixed it by changing the mode to nearest but why is it activating the another point?

The option you're looking for is offsetGridLines.
If true, grid lines will be shifted to be between labels.
xAxes: [{
...
gridLines: {
offsetGridLines: true
}
In most cases, this produces the expected result. Unfortunately it doesn't work for time axes as documented in Chart.js issue #403. Thanks to Antti Hukkanen, there exists a workaround.
Please have a look at below runnable code snippet to see how it works.
function generateData() {
var unit = 'day';
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function randomPoint(date, lastClose) {
var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
return {
t: date.valueOf(),
y: close
};
}
var date = moment().subtract(1, 'years');
var now = moment();
var data = [];
for (; data.length < 600 && date.isBefore(now); date = date.clone().add(1, unit).startOf(unit)) {
data.push(randomPoint(date, data.length > 0 ? data[data.length - 1].y : 30));
}
return data;
}
var TimeCenterScale = Chart.scaleService.getScaleConstructor('time').extend({
getPixelForTick: function(index) {
var ticks = this.getTicks();
if (index < 0 || index >= ticks.length) {
return null;
}
// Get the pixel value for the current tick.
var px = this.getPixelForOffset(ticks[index].value);
// Get the next tick's pixel value.
var nextPx = this.right;
var nextTick = ticks[index + 1];
if (nextTick) {
nextPx = this.getPixelForOffset(nextTick.value);
}
// Align the labels in the middle of the current and next tick.
return px + (nextPx - px) / 2;
},
});
// Register the scale type
var defaults = Chart.scaleService.getScaleDefaults('time');
Chart.scaleService.registerScaleType('timecenter', TimeCenterScale, defaults);
var cfg = {
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
backgroundColor: 'red',
borderColor: 'red',
data: generateData(),
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}]
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'timecenter',
time: {
unit: 'month',
stepSize: 1,
displayFormats: {
month: 'MMM'
}
},
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index'
}
}
};
var chart = new Chart('chart1', cfg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart1" height="90"></canvas>

For chartJs v3 you can use offset property:
scales: {
x: {
grid: {
offset: true
}
},
...
}

Update ChartJs chart using $scope in AngularJS

I'm having some issues when trying to update a chart's data using $scope.
I know there's a function to update charts myChart.update(); but I can't get to update the char when I put it in a $scope.
The following code gets the chart's data and then tries to update the chart. The problem comes at $scope.lineChart.update();. It looks like chartjs can't detect any changes.
The following code is executed after triggering a select, so the chart has an initial data and the following code just tries to update it.
This does not work: $scope.lineChart.update();
$scope.getLineChartMaxData().then(function () {
$scope.getLineChartMinData().then(function () {
$scope.lineChart.update();
});
});
The chart function:
$scope.fillLineChart = function () {
console.log("FILLING LINE CHART");
const brandProduct = 'rgba(0,181,233,0.5)'
const brandService = 'rgba(0,173,95,0.5)'
var data1 = $scope.lineChartMaxWeekData;
var data2 = $scope.lineChartMinWeekData;
var maxValue1 = Math.max.apply(null, data1)
var maxValue2 = Math.max.apply(null, data2)
var minValue1 = Math.min.apply(null, data1)
var minValue2 = Math.min.apply(null, data2)
var maxValue;
var minValue;
if (maxValue1 >= maxValue2) {
maxValue = maxValue1;
} else {
maxValue = maxValue2;
}
if (minValue1 >= minValue2) {
minValue = minValue2;
} else {
minValue = minValue1;
}
$scope.minValue = minValue;
$scope.maxValue = maxValue;
var ctx = document.getElementById("recent-rep-chart");
if (ctx) {
ctx.height = 250;
$scope.lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: $scope.lineChartMaxWeekLabels,
datasets: [{
label: 'Valor',
backgroundColor: brandService,
borderColor: 'transparent',
pointHoverBackgroundColor: '#fff',
borderWidth: 0,
data: data1
},
{
label: 'My Second dataset',
backgroundColor: brandProduct,
borderColor: 'transparent',
pointHoverBackgroundColor: '#fff',
borderWidth: 0,
data: data2
}
]
},
options: {
maintainAspectRatio: true,
legend: {
display: false
},
responsive: true,
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: true,
color: '#f2f2f2'
},
ticks: {
fontFamily: "Poppins",
fontSize: 12
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
stepSize: 50,
max: maxValue,
fontFamily: "Poppins",
fontSize: 12
},
gridLines: {
display: true,
color: '#f2f2f2'
}
}]
},
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
}
}
});
}
};
UPDATE: $scope.lineChart.destroy(); works well, but I don't want to destroy the chart and build it again because it is built with another sizes.

Chart.js - How to offset bars from ZeroLine

I've spent hours already trying to figure out how to offset the horizontal bars from the zero line on X-Axis so it doesn't overlap when the width of the line is bigger than 1.
Appreciate all the help.
Example is here on CodePen (hope it will show up): https://codepen.io/RomanKl/pen/mzmegG
var barOptions = {
tooltips: {
enabled: false
},
hover :{
animationDuration:0
},
scales: {
xAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 10000,
fontFamily: "'Open Sans Bold', sans-serif",
fontSize:12,
callback: function(value, index, values) {
return Math.round(value/1000) + 'k';
}
},
scaleLabel:{
display:false
},
gridLines: {
color: ['#000', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef'],
lineWidth: [4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
zeroLineWidth: 4,
zeroLineColor: '#000',
},
}],
yAxes: [{
gridLines: {
display: false,
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize:14,
},
}]
},
legend:{
display:false
},
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "left";
ctx.font = "1.6rem Open Sans";
ctx.fillStyle = "#fff";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
data = dataset.data[index];
data = data.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
if(i==0){
ctx.fillText(data, 80, bar._model.y+4);
} else {
ctx.fillText(data, bar._model.x-25, bar._model.y+4);
}
}),this)
}),this);
}
},
};
var ctx = document.getElementById("Chart1");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
borderSkipped: 'bottom',
data: {
labels: ["Aug.'17", "Aug.'18"],
datasets: [{
data: [6336, 6892],
backgroundColor: "rgba(63,103,126,1)",
hoverBackgroundColor: "rgba(50,90,100,1)"
}]
},
options: barOptions,
});

So I've brutally hacked it in the end. I've tried adding a border and then skip it everywhere except the start where I would set the colour to transparent but guess what? Border doesn't show up at the start. It's a requested feature not yet implemented in chart.js as of this posting.
In the end I've used a diabolical solution of using two stacked datasets while setting the first one via data to the desired offset and then setting backgroundColor to transparent and shifting data labels to the left via plugin.
you can see the result in the codepen link posted in the question.

CHART.JS How can I offset/move/adjust the labels on the y-axis to be in the middle of the gridlines instead of centered on the gridlines?

I am using chart.js inside of an Ionic/Angular application to build a line graph. The big problem I am running into now is that I would like to have the labels along the y axis (Green, Yellow, Orange, Red) positioned between the horizontal gridlines instead of centered on the gridlines as they are currently in the image here...
I tried using the plugin mentioned in this question with no such luck. I've also tried using the offsetGridlines property in the actual chart.js documentation again with no luck.
Free bonus points if anyone can also help out with having the actual axis line at the bottom to be the same width as the other horizontal gridlines
Here is the code that deals with this particular aspect of the chart...
options: {
legend: {
display: false
},
scaleShowVerticalLines: false,
layout: {
padding: 25
},
scales: {
xAxes: [{
gridLines: {
display: false
},
ticks: {
display: false
}
}],
yAxes: [{
gridLines: {
drawBorder: false
},
ticks: {
min: 0,
max: 100,
stepSize: 25,
fontColor: 'white',
callback: function(value) {
if (value === 25) {
return 'Red';
} else if (value === 50) {
return 'Orange';
} else if (value === 75) {
return 'Yellow';
} else if (value === 100){
return 'Green';
} else {
return '';
}
}
}
}]
}
},

I've annotated the changes in the below snippet, but to briefly explain:
I integrated the plugin you linked to but modified it to set the original ticks to transparent and therefore removed the beforeDraw closure which didn't seem to work.
For bonus points: the trick is to remove the x-axis border and then style the 'zero line' to match the other grid lines.
var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
datasets: [{
data: [25, 35, 20, 45, 65, 26, 49, 70, 75, 87],
borderColor: 'white',
fill: false
}]
},
options: {
legend: {
display: false
},
scaleShowVerticalLines: false,
layout: {
padding: 25
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false, // bonus points.
},
ticks: {
display: false
}
}],
yAxes: [{
gridLines: {
drawBorder: false,
color: 'rgba(0,0,0,.3)', // bonus points.
zeroLineColor: 'rgba(0,0,0,.3)' // bonus points.
},
ticks: {
min: 0,
max: 100,
stepSize: 25,
fontColor: 'transparent', // changed from 'white'
callback: function(value) {
if (value === 25) {
return 'Red';
} else if (value === 50) {
return 'Orange';
} else if (value === 75) {
return 'Yellow';
} else if (value === 100) {
return 'Green';
} else {
return '';
}
}
}
}]
}
},
plugins: [{
afterDraw: function(chart) {
var ctx = chart.ctx;
var yAxis = chart.scales['y-axis-0'];
var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
// loop through ticks array
Chart.helpers.each(yAxis.ticks, function(tick, index) {
if (index === yAxis.ticks.length - 1) return;
var xPos = yAxis.right;
var yPos = yAxis.getPixelForTick(index);
var xPadding = 10;
// draw tick
ctx.save();
ctx.textBaseline = 'middle';
ctx.textAlign = 'right';
ctx.fillStyle = 'white';
ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
ctx.restore();
});
}
}]
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart" style="background-color:#296390"></canvas>

Chartjs hovering over one Chart, shows tooltip across all charts

I am using ChartJS with angular (https://jtblin.github.io/angular-chart.js/)
I am able to get a vertical line in my chart when hovering using How to render a vertical line on hover in chartjs example.
I tried looking for examples of a curved line chart where the X-axis has a shared date range between all charts in DOM, but Y-axis has different values. Hovering over any chart will trigger hover over all available charts and display that vertical line like above with a tool-tip on all charts

tooltips: {
mode: 'x-axis'
},
If I understand what you want correctly, this should do it.

This jsfiddle may be able to help you:
https://jsfiddle.net/vikas12118/k4oveLsb/
var charts = [];
$(document).ready(function () {
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
if (charts) {
for (var i = 0; i < charts.length; i++) {
charts[i].tooltip._active = [];
charts[i].tooltip.update(true);
charts[i].draw();
}
}
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-0'].top,
bottomY = this.chart.scales['y-axis-0'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#07C';
ctx.stroke();
ctx.restore();
if(charts)
{
showTooltip(chart1.chart.tooltip._active[0]._index);
}
}
}
});
var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
type: 'LineWithLine',
data: {
labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
datasets: [{
lineTension: 0,
backgroundColor: "rgb(34,139,34)",
borderColor: "rgb(34,139,34)",
data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22],
fill: false,
pointRadius: 1.5,
pointHoverRadius: 1,
borderWidth :1.5
}],
},
options: {
maintainAspectRatio: false,
responsive: false,
/*legend: {
display: false
}, s: {
displayColors: false
},*/
hover: {
mode: 'index',
intersect: false,
},
title: {
display: true,
text: ''
},
legend: {
display: false
},
tooltips: {
mode: 'index',
//enabled: false,
intersect: false,
},
}
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-0'].top,
bottomY = this.chart.scales['y-axis-0'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#07C';
ctx.stroke();
ctx.restore();
}
}
});
var chart = new Chart(ctx2, {
type: 'LineWithLine',
data: {
labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
datasets: [{
lineTension: 0,
backgroundColor: "rgb(34,139,34)",
borderColor: "rgb(34,139,34)",
data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8],
fill: false,
pointRadius: 1.5,
pointHoverRadius: 1,
borderWidth :1.5
}],
},
options: {
maintainAspectRatio: false,
responsive: false,
title: {
display: true,
text: ''
},
legend: {
display: false
},
tooltips: {
mode: 'index',
//enabled: false,
intersect: false,
},
}
});
charts.push(chart)
});
function showTooltip(index) {
if (Array.isArray(charts) && charts.length) {
for (var i = 0; i < charts.length; i++) {
var segment = charts[i].getDatasetMeta(0).data[index];
charts[i].tooltip._active = [segment];
charts[i].tooltip.update(true);
charts[i].draw();
}
}
}
html content
<div>
<canvas style="width: 800px" height="300px" id="myChart1"></canvas></div>
<div>
<canvas style="width: 800px" height="300px" id="myChart2"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>