There appears a strange Visual in the top left corner of the chart image within the canvas, that looks like a string that is cut off by the canvas. Image of visual appearing
This remains no matter the canvas size or browser I use to open the HTML-file.
I also cannot recall when this Visual first started appearing and I have tried to fix it by removing parts of the code to see when it starts to appear but currently to no avail. If someone can find a fix for this issue I'd appreciate your help.
My current Code: Javascript Code:
const offset = 27;
var myChart = new Chart(document.getElementById('Chart'), {
type: 'bar',
plugins: [{
afterUpdate: function(chart) {
var dataset = chart.config.data.datasets[1];
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;
}
var dataset = chart.config.data.datasets[2];
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;
}
},
}],
data: {
labels: ['Black', 'Red','Cyan',
'Blue', 'Orange', 'Purple',
'Green','Grey', 'Other'],
datasets: [{
label: 'Result now',
data: [18.4, 34.9, 6.1, 9.8,15.3,3.6,4.3,5.7,1.9],
backgroundColor: [
'#000000',
'#fa0000',
'#09fae0',
'#0011ff',
'#ff7300',
'#d400db',
'#00ff09',
'#666666',
'#bababa'
],
categoryPercentage: 1.0,
barPercentage: 0.45,
xAxisID: "Now",
datalabels: {
color: 'rgba(0,0,0,1)',
anchor: 'end',
align: 'top'
},
},
{
//Previous Election | Current Result highter
label: 'Last Result',
data: [, 20.1, , , 8.9,,3.4, ,1.5],
backgroundColor: [
'rgba(0, 0, 0, 0.4)',
'rgba(250, 0, 0, 0.4)',
'rgba(9, 250, 224, 0.4)',
'rgba(0, 17, 255, 0.4)',
'rgba(255, 115, 0, 0.4)',
'rgba(212, 0, 219, 0.4)',
'rgba(0, 255, 9, 0.4)',
'rgba(102, 102, 102, 0.4)',
'rgba(186, 186, 186, 0.4)'
],
categoryPercentage: 1.0,
barPercentage: 0.3,
xAxisID: "Then",
datalabels: {
color: 'rgba(0,0,0,0.7)',
anchor: 'end',
align: '-50'
},
},
{
//Previous Election | Current Bars lower
label: 'Last Result',
data: [25.7, ,16.4 ,16.1 , ,4.7,, ,],
backgroundColor: [
'rgba(0, 0, 0, 0.4)',
'rgba(250, 0, 0, 0.4)',
'rgba(9, 250, 224, 0.4)',
'rgba(0, 17, 255, 0.4)',
'rgba(255, 115, 0, 0.4)',
'rgba(212, 0, 219, 0.4)',
'rgba(0, 255, 9, 0.4)',
'rgba(102, 102, 102, 0.4)',
'rgba(186, 186, 186, 0.4)'
],
categoryPercentage: 1.0,
barPercentage: 0.3,
xAxisID: "Then_2",
datalabels: {
color: 'rgba(0,0,0,0.7)',
anchor: 'end',
align: 'end'
}
}]
},
options: {
responsive: false,
legend: {
display: false,
onClick: false,
},
scales: {
xAxes: [{
id: "Now",
gridLines: {
display: false
},
ticks: {
fontColor: 'rgba(0,0,0,1)'
}
},
{
id: "Then",
offset: true,
display: false
},
{
id: "Then_2",
offset: true,
display: false
},
],
yAxes: [{
ticks: {
min: 0,
max: 50,
stepSize: 10,
fontColor: 'rgba(0,0,0,1)',
callback: function(value, index, values) {
return value + '%';
}
},
gridLines: {
display: true,
color: 'rgba(0,0,0,0.3)',
},
scaleLabel :{
display: true,
labelString: "Vote Share",
fontColor: 'rgba(0,0,0,1)'
}
}]
},
plugins: {
datalabels: {
formatter: function(value, context) {
return value + '%';
},
}
},
}
});
Html Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Chart Test </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<br>
<script src="chartjs/dist/Chart.bundle.min.js"></script>
<script src="chartjs/dist/chartjs-plugin-datalabels.js"></script>
<div id="Result">
<h3>Results</h3>
<canvas id="Chart" width="1055px" height="705px"></canvas>
<script type="text/javascript" src="js/Chart_1.js"></script>
</div>
</body>
<html>CSS Code:
#Result{
float: center;
width: 1095px;
height: 805px;
text-align: center;
}
I know it's a bit late, had the same issue and i found a fix for mine maybe it could work for you too.
The problem was my data, having empty data instead of "0" makes chartjs returning NaN, that was the cut text displayed on the top left corner.
In my opinion, you should replace :
data: [, 20.1, , , 8.9,,3.4, ,1.5],
by
data: [0, 20.1, 0, 0, 8.9,0,3.4,0,1.5],
Hope it solves yours ! :)