Artefacts when showing compact vertical bar chart in chart.js - chart.js

Question

I have a vertical bar chart which is displaying exactly as I want it when the number of bars is up to 50 or so. However, I also need to display up to 365 bars, one for each day of the year. It displays the bars with the code I was using but there were artefacts due to using a barPercentage less than 1.0 and a border.
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1.0)',
borderWidth: 2,
categoryPercentage: 1.0,
barPercentage: 0.8
So when the number of bars is over 100, I change these values as follows and do a chart update:
backgroundColor: 'rgba(54, 162, 235, 1.0)', // No transparency in the bar colour
borderColor: 'rgba(54, 162, 235, 1.0)',
borderWidth: 0,
categoryPercentage: 1.0,
barPercentage: 1.0
However, there is still a faint visible vertical line between the bars where I would expect nothing. I'm on Mac OSX with Safari and I also see the problem on iPad and iPhone.
Any idea what I'm doing wrong??
(click on the 'SWITCH' button to swap between 50 and 120 bars)
https://jsfiddle.net/8xdLb9qe/

Answer 1

I've searched and found this comment:
Be sure you don't have the Dataset barThickness value set, or it will
override the barPercentage setting. Philip F
I change the chart settings as follows:
myChart = new Chart(document.getElementById('thisChart'), {
type: 'bar',
data: {
labels: myScales,
datasets: [{
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1.0)',
data: myValues,
barThickness: 16 //
}]
},
options: option
});
Here is the working jsfiddle.
Full code:
var thisChart = null;
var myScales = [];
var myValues = [];
var numBars = 50;
var option = {
responsive: true,
maintainAspectRatio: false,
interaction: {
intersect: false,
mode: 'nearest'
},
scales: {
x: {
display: true,
grid: {
drawOnChartArea: false,
drawTicks: false
}
},
y: {
max: 100,
grace: '5%',
grid: {
drawTicks: false
},
display: true
}
},
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
hover: {
mode: null
}
}
};
myChart = new Chart(document.getElementById('thisChart'), {
type: 'bar',
data: {
labels: myScales,
datasets: [{
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1.0)',
//borderWidth: 2,
data: myValues,
barThickness: 16,
//categoryPercentage: 1.0,
//barPercentage: 0.1
}]
},
options: option
});
for (var i = 1; i != numBars; i++) {
myScales[i] = i;
myValues[i] = Math.floor(Math.random() * (100 - 50 + 1) + 50);
}
displayGraph();
function displayGraph() {
// Remove the old data
myChart.data.labels.pop();
myChart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
myChart.update();
// Add in the new data
myChart.data.labels = myScales;
myChart.data.datasets.forEach((dataset, i) => {
dataset.data = myValues;
});
if (myValues.length > 100) {
myChart.data.datasets.forEach((dataset, i) => {
dataset.barPercentage = 1.0; // Remove gap between bars
dataset.borderWidth = 0; // Remove bar border
dataset.backgroundColor = 'rgba(54, 162, 235, 1.0)'; // Remove transparency
});
} else {
myChart.data.datasets.forEach((dataset, i) => {
dataset.barPercentage = 0.8; // Default width of gap between bars
dataset.borderWidth = 2; // Default bar border
dataset.backgroundColor = 'rgba(54, 162, 235, 0.6)'; // Default bar background colour
dataset.borderColor = 'rgba(54, 162, 235, 1.0)'; // Default bar border colour
});
}
myChart.update();
}
function switchBars() {
if (numBars == 50) { // Toggle number of bars
numBars = 120;
} else {
numBars = 50;
}
myScales.length = numBars;
myValues.length = numBars;
for (var i = 1; i != numBars; i++) {
myScales[i] = i;
myValues[i] = Math.floor(Math.random() * (100 - 50 + 1) + 50);
}
displayGraph();
}
.chart-container {
width: 100vw;
height: 60vh;
margin-top: 4em;
position: relative;
}
canvas {
display: block;
margin-left: 2em;
margin-right: 2em;
}
.styleSelectorButton {
width: 100vw;
height: 5em;
margin-top: 1em;
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<div class="chart-container">
<canvas id="thisChart"></canvas>
</div>
<div id="selectorButton" class="styleSelectorButton">
<input type="button" onclick="switchBars()" class="button" value="SWITCH">
</div>