We Keep Coding

Unaligned x scales for two Chartjs-chart types with the same configuration - only difference is "chart type" (bar/line)

I built a line chart & a bar chart in Chartjs with exactly the same configuration, but for some reason the x-scales of both charts are different as you can see in the picture below.
The configuration for the both charts is the same, the only difference is the chart type:
function getOptions() {
return {
animation: false,
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: false,
legend: {
display: false
},
title: {
display: false
}
},
elements: {
line: {
fill: true
},
point: {
radius: 0
}
},
scales: {
x: {
type: "time",
time: {
displayFormats: {
second: 'HH:mm:ss',
minute: 'HH:mm',
hour: 'HH'
},
unit: 'minute',
stepSize: 1,
min: '00:00:00',
max: '23:59:59',
},
grid: {
display: true,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
color: function(context) {
return '#fff';
},
}
},
y: {
beginAtZero: true,
grid: {
display: true,
drawBorder: false,
color: function(context) {
return '#fff';
},
},
}
}
};
}
I noticed that the x axes do align perfectly, if I set the "stepSize" to 'seconds'. This probably has to do with the fact that the data inserted into the chart is second-data.

This is because the bar chart sets the offset property on the x axis scale to true.
https://www.chartjs.org/docs/3.8.0/axes/cartesian/category.html#common-options-to-all-cartesian-axes
So to align them you either have to set it to false for the bar chart or to true for the line chart

Skip dates with no values in chart js

I would like to exclude the dates on the x-axis that has no values. Below is the image of my chart.
What my chart currently looks like
Here is also my current code for the options in chart js
var options = {
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
fill: false
}
},
style: {
strokewidth: 10
},
title: {
display: true,
position: 'top',
fontSize: 18,
padding: 20
},
scales: {
xAxes:[{
ticks: {
z: 0,
autoskip: false,
callback: function(value, index, values){
return new moment(value).format('L');
}
},
type: 'time',
time: {
unit: 'week'
},
scaleLabel: { display: true,
labelString: 'Date'}
}],
yAxes: [{
ticks: { beginAtZero:true ,
min: 0,
max: 5 } ,
scaleLabel: { display: true,
labelString: 'Skill Rating'}
}]
}
};
I hope you guys can help me. Thanks!

When you pass your series/data to your chart, filter it
let data = [...];
data = data.filter(v => v[0] && v[1]);

Chart.js - Prevent two bars merging as one bar when dates are the same and y values are different

Chart.js v3.2.1
Background: 2 datasets that form a stacked bar chart, x axis is timeseries and y axis is linear.
I have an issue where two bars merge as one bar when the dates are the same. I don't mind the x tick label merging as one date, but the actual bars I would like to keep separate.
My chart configuration:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: chartDatasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
offset: true,
type: 'timeseries',
time: {
parser: 'YYYY-MM-DD',
tooltipFormat: 'll',
unit: 'day',
displayFormats: {
day: 'MMM D'
},
},
ticks: {
source: 'data',
align: 'center',
},
grid: {
drawOnChartArea: false
},
},
y: {
stacked: true,
type: 'linear',
ticks: {
beginAtZero: true
},
title: {
display: true,
text: 'kg Dry Matter / ha',
font: {
weight: "bold"
}
}
}
}
}
});
I have created a JSFiddle to duplicate the problem.
https://jsfiddle.net/kharrisson/pc359Lg4/10/
In the first dataset provided to the chart, there are 2 "May 18" records with different y values.
Why have they merged into one bar? I am unsure if this is a bug, or if there is a config setting I need to set.

Chart.JS - Set fixed X and Y axis values in time chart?

I'm currently attempting to use Chart.JS to create a line graph, displaying brightness percentages (0-100%) of an LED over 24H.
I'm trying to configure the chart to have set X and Y axis scales.
I need the X axis to display every hour (0,1,2,3... 21,22,23,24), and the Y axis to display values up to 100, going up by 10 (0,10,20... 90,100). I'm unsure how to get it to work. So far I've tried "unitStepSize: 1" and "min: 00:00" + "max: 24:00" as below, but these do not work in the way I had hoped. How can I get this graph to display correctly? Here's my code:
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'White',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
format: "H:mm",
unit: 'hour',
unitStepSize: '1',
tooltipFormat: "H:mm A",
displayFormats: {
hour: 'H',
min: '00:00',
max: '24:00',
}
}
}]
},
}
});```

under options / scale try something like this: --> see yAxes
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
...
}

How can I remove extra whitespace from the bottom of a line chart in chart.js?

As you can see below with the canvas element highlighted, there is considerable whitespace below the x axis label. If I resize the canvas, the whitespace stays proportional to the height of it. Are there any settings that control this whitespace? I've ruled out padding and do not see any settings for margins.
Thanks!
Here is the JavaScript that renders the chart:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
options: {
legend: {
display: false
},
elements: {
point: {
radius: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: true
},
ticks: {
autoSkip: true,
maxTicksLimit: 1
}
}],
yAxes: [{
gridLines: {
display: true,
drawBorder: false
},
ticks: {
callback: function(value, index, values) {
return '$' + addCommas(value);
}
}
}]
},
layout: {
padding: 5
}
},
type: 'line',
data: {
labels: labels,
datasets: [
{
data: values,
fill: false,
borderColor: "blue"
}
]
}
});
And the complete jsfiddle: https://jsfiddle.net/rsn288fh/2/

I know you said you ruled out padding, but this is the only option I can see working:
options: {
layout: {
padding: {
bottom: -20
}
}
}
Obviously you can play with the -20 to what works for you.
Here is the reference for padding for chartjs, if you wanted to see more
EDIT:
I've updated your jsfiddle, with a colored div below the chart. As you resize it seems to stay at the same spot below the chart.

Changing the tickMarkLength to 0 results in no padding on the left or bottom of the chart (or wherever your axis happens to be).
https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
tickMarkLength
Length in pixels that the grid lines will draw into the axis area.
const options = {
scales: {
xAxes: [
{
ticks: {
display: false,
},
gridLines: {
display: false,
tickMarkLength: 0,
},
},
],
yAxes: [
{
ticks: {
display: false,
},
gridLines: {
display: false,
tickMarkLength: 0,
},
},
],
},
};