Chart.js: Strange Visual appearing in top left corner? - javascript

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 ! :)

Related

I am trying to use the Chartjs-plugin-watermark but it is not working

I've been trying to use the watermark plugin for charts.js. I have successfully downloaded the plugin and uploaded it to Github and created an online version of this file, viewable at: https://cdn.jsdelivr.net/gh/AjaniSt/chartjs-plugin-watermark/chartjs-plugin-watermark.js. However, the plugin is not working. I have tried using a local file instead, putting the "watermark" data in and out of the "plugin" data, and trying the HTML online. However, none have worked. Some guidance would be greatly appreciated. My HTML file is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AjaniSt/chartjs-plugin-watermark/chartjs-plugin-watermark.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var imageNew = new Image()
imageNew.src = 'https://image.shutterstock.com/image-vector/hi-hello-banner-speech-bubble-260nw-1505210795.jpg'
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1880,
1881,
1882,
1883,
1884,
1885,
1886
],
datasets: [{
label: 'Temperature Anomaly',
data: [-0.16,
-0.08,
-0.1,
-0.17,
-0.28,
-0.33,
-0.31
],
fill: true,
backgroundColor: [
'rgba(10, 168, 196, 0.2)',
'rgba(102, 96, 151, 0.2)',
'rgba(57, 87, 255, 0.2)',
'rgba(233, 182, 233, 0.2)',
'rgba(108, 213, 207, 0.2)',
'rgba(125, 178, 230, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)',
'rgba(102, 96, 151, 1)',
'rgba(57, 87, 255, 1)',
'rgba(233, 182, 233, 1)',
'rgba(108, 213, 207, 1)',
'rgba(125, 178, 230, 1)'
],
borderWidth: 1,
pointRadius: 3,
pointHitRadius: 8
}]
},
options: {
scales: {
y: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '°C';
}
},
title: {
display: true,
text: 'Test'
}
}],
xAxes: [{
ticks: {
maxTicksLimit: 15
}
}]
},
plugins:{
legend: {display: false},
watermark: {
x: 0,
y: 0,
height: 50,
width: 50,
alignX: "top",
alignY: "left",
alignToChartArea: true,
position: "front",
opacity: 1,
image: imageNew,
},
},
onClick: handleClick
}
});
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
What looks like the main reason that it's not working is because this plugin was written for V2 and you are using V3, the way you register plugins has changed so you need to change this line which can be found at the bottom of the file: Chart.pluginService.register(watermarkPlugin); to this: Chart.register(watermarkPlugin)
Since this question was posted, chartjs-plugin-watermark 2.0.0 has been released and supports Chart.js 3 and 4. Additionally, the watermark config should be moved from options.plugins.watermark to just options.watermark:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AlbinoDrought/chartjs-plugin-watermark/chartjs-plugin-watermark.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var imageNew = new Image()
imageNew.src = 'https://image.shutterstock.com/image-vector/hi-hello-banner-speech-bubble-260nw-1505210795.jpg'
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1880,
1881,
1882,
1883,
1884,
1885,
1886
],
datasets: [{
label: 'Temperature Anomaly',
data: [-0.16,
-0.08,
-0.1,
-0.17,
-0.28,
-0.33,
-0.31
],
fill: true,
backgroundColor: [
'rgba(10, 168, 196, 0.2)',
'rgba(102, 96, 151, 0.2)',
'rgba(57, 87, 255, 0.2)',
'rgba(233, 182, 233, 0.2)',
'rgba(108, 213, 207, 0.2)',
'rgba(125, 178, 230, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)',
'rgba(102, 96, 151, 1)',
'rgba(57, 87, 255, 1)',
'rgba(233, 182, 233, 1)',
'rgba(108, 213, 207, 1)',
'rgba(125, 178, 230, 1)'
],
borderWidth: 1,
pointRadius: 3,
pointHitRadius: 8
}]
},
options: {
scales: {
y: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '°C';
}
},
title: {
display: true,
text: 'Test'
}
}],
xAxes: [{
ticks: {
maxTicksLimit: 15
}
}]
},
plugins:{
legend: {display: false},
},
watermark: {
x: 0,
y: 0,
height: 50,
width: 50,
alignX: "top",
alignY: "left",
alignToChartArea: true,
position: "front",
opacity: 1,
image: imageNew,
},
onClick: handleClick
}
});
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>

Chart JS V3 Tooltip styling location changed?

I'm using Chart JS v.3.4 and I'm trying to style my charts tooltip with no luck so far. I added the options to options.tooltips but for some reason, they have no effect.
My full code is below. Is there maybe a configuration that blocks my options from working? Or did it changed at some point where the options go?
async function init_line_chart()
{
var ctx = document.getElementById('chart').getContext("2d");
var data = [100, 140, 150, 130, 160, 120, 130];
var suggestedMin = Math.max.apply(Math,data);
var suggestedMax = Math.min.apply(Math,data);
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#4e62ff');
gradientStroke.addColorStop(1, '#4e62ff');
var gradientFill = ctx.createLinearGradient(0, 0, 0, 200);
gradientFill.addColorStop(0, 'rgba(78, 98,255, 0.25)');
gradientFill.addColorStop(0.2, 'rgba(78, 98, 255, 0.12)');
gradientFill.addColorStop(0.8, 'rgba(78, 98, 255, 0)');
gradientFill.addColorStop(1, 'rgba(78, 98, 255, 0)');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: "",
borderColor: gradientStroke,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointBorderWidth: 5,
pointRadius: 5,
fill: true,
backgroundColor: gradientFill,
borderWidth: 4,
lineTension: 0.3,
pointHitRadius: 1000,
data: data
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
easing: "easeInOutQuint"
},
tooltips: {
backgroundColor: '#FFFFFF',
bodyFontColor: '#d4d4d4',
bodyFontSize: 14,
},
scales: {
x: {
grid:{
display:false,
drawBorder: false,
},
ticks: {
font: {
family: 'Comfortaa', // Your font family
size: 13.6,
},
color: "#d4d4d4"
},
},
y: {
grid:{
display:false,
drawBorder: false,
},
ticks: {
display: false, //this will remove only the label
},
}
},
plugins: {
legend: {
display: false
},
}
}
});
}
Is there maybe a configuration that blocks my options from working? Or did it changed at some point where the options go?
As stated in the Migration guide the namespace has been changed to options.plugins.tooltip.
If you want to know where to put options for configuration of specific things you can go to that part of the docs and look for the namespace part, that will tell you where to put the options

How can i show just integer labels?

My chart has 100 labels. These labels are from 0 to 10. Some labels are decimal. But i just want to see integers on my chart. How can i hide decimals? You can check my picture and code below.
chart
var timeLabels = [];
for (let j = 0; j <= scheduling.totalPeriod; j++) {
timeLabels.push(j / 10);
}
var schedulingChart = new Chart(ctx, {
type: 'line',
data: {
labels: timeLabels,
datasets: [{
steppedLine: true,
label: scheduling.process[i].name,
data: scheduling.process[i].chart,
backgroundColor: ['rgba(255, 255, 255, 0.5)'],
borderColor: ['rgba(255, 255, 255, 1)'],
borderWidth: 1,
pointBackgroundColor: 'green',
pointBorderColor: 'black',
pointRadius: 4
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0.5)',
},
ticks: {
stepSize: 1,
fontColor: 'rgba(255, 255, 255, 1)'
}
}],
xAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0.5)',
},
ticks: {
fontColor: 'white',
}
}]
}
}
});
New for other problem

How to add unused data background to bar in chart js

I have the next JS code
let options = {
type: 'bar',
data: data,
options: {
cornerRadius: 30,
maintainAspectRatio: false,
scales: {
xAxes: [{
barPercentage : 0.55,
categoryPercentage: 0.42,
gridLines: {
display: false,
}
}],
yAxes: [{
ticks: {
min: 0,
max: 50,
stepSize: 10,
callback: function(value, index, values) {
return value + "%";
},
fontColor: '#999999',
fontSize: 11,
padding: 15,
fontFamily: 'GothamPro'
}
}],
}
}
}
var siteCosts = document.getElementById('siteCosts').getContext('2d');
var myChart = new Chart(siteCosts, options);
It gives me the next image
https://prntscr.com/t91wzh
And it must look like that https://prntscr.com/t91xsf
The question is next - how to add this grey unused data to bar via Chart.js?
Since I don't know about your data, I have prepared a custom data. Look carefully that I have taken all the data 95 in the second dataset because the highest value of the first dataset is 95. I think you can solve this in this way.
var ctx = document.getElementById('myChart').getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 200;
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
backgroundColor: 'rgb(54, 195, 110)',
borderColor: 'rgba(255, 255, 255, 0.5)',
borderWidth: 0,
data: [95, 75, 80, 55, 85]
}, {
backgroundColor: '#948E8D',
borderColor: 'rgba(255, 255, 255, 0.5)',
borderWidth: 0,
data: [95, 95, 95, 95, 95]
}],
},
options: {
cornerRadius: 30,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
barPercentage: 0.55,
categoryPercentage: 0.42,
gridLines: {
display: false,
},
stacked: true
}],
yAxes: [{
ticks: {
min: 0,
max: 95,
stepSize: 10,
callback: function (value, index, values) {
return value + "%";
},
fontColor: '#999999',
fontSize: 11,
padding: 15,
fontFamily: 'GothamPro'
},
stacked: true
}],
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>

I'm trying to add a click event, using javascript, to each column of a barchart in Chart.js

I've been trying to add a click event to each column in a bar chart using Chart.js. What I'm trying to figure out is how to make a click event on each column execute the code I want.
The goal for this is when a user clicks on a particular bar of the chart, it executes a php form submit that takes them to another page on the website.
The bar chart data is populated from an SQL database via php when the user goes to the page.
Here's an example of the code I have so far ...
<canvas id="briskChart" style="margin:auto;display:block;background-color:white;border-style:solid;border-width:1px;padding:10px;"></canvas>
<script>
var red = <?=json_encode($count1[0]);?>;
var yellow = <?=json_encode($count2[0]);?>;
var green = <?=json_encode($count3[0]);?>;
var blue = <?=json_encode($count4[0]);?>;
var grey = <?=json_encode($count5[0]);?>;
var dept = <?=json_encode($row['dept']);?>;
var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
datasets: [{
data: [red, yellow, green, blue, grey],
backgroundColor: [
'rgba(255, 0, 0, 0.4)',
'rgba(255, 216, 0, 0.4)',
'rgba(0, 255, 0, 0.4)',
'rgba(0, 0, 255, 0.4)',
'rgba(160, 160, 160, 0.4)'
],
borderColor: [
'rgba(255, 0, 0, 1)',
'rgba(255, 216, 0, 1)',
'rgba(0, 255, 0, 1)',
'rgba(0, 0, 255, 1)',
'rgba(160, 160, 160, 1)'
],
borderWidth: 1
}]
},
options: {
onClick: event => {
document.bred.submit();
},
title: {
display: true,
fontSize: 24,
text: dept + ' Dept Risk Summary',
fontColor: '#000000'
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: true,
gridLines: {color: '#000000'},
ticks: {
fontColor: "black",
fontSize: 16
}
}],
yAxes: [{
display: true,
gridLines: {color: '#000000'},
ticks: {
beginAtZero: true,
fontColor: "black",
fontSize: 16,
stepSize: 1
}
}],
}
}
});
</script>
Here is the html:
<form action='../php/bred.php' method='POST' name='bred'>
</form>
The documentation for Chart.js is very limited regarding click events. For each data series, when the column is clicked on, I want to run a corresponding document.[form name].submit to take the user to that new page.
If anybody has any experience doing this with Chart.js and could point me in the right direction, I'd be eternally grateful.
You can create a click handler that retrieves the x and y values from the chart. Then, using that data, you could send a GET or POST request to your PHP script.
Example for getting the values from the bar chart (the key here is to look at the onClick function):
var red, yellow, green, blue, grey, dept = "";
var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundColor: [
'rgba(255, 0, 0, 0.4)',
'rgba(255, 216, 0, 0.4)',
'rgba(0, 255, 0, 0.4)',
'rgba(0, 0, 255, 0.4)',
'rgba(160, 160, 160, 0.4)'
],
borderColor: [
'rgba(255, 0, 0, 1)',
'rgba(255, 216, 0, 1)',
'rgba(0, 255, 0, 1)',
'rgba(0, 0, 255, 1)',
'rgba(160, 160, 160, 1)'
],
borderWidth: 1
}]
},
options: {
onClick: function(c, i) {
element = i[0]; // the chart element you clicked on
var xValue = this.data.labels[element._index]; // the x-value of the bar
var yValue = this.data.datasets[0].data[element._index]; // the y-value of the bar
console.log(xValue);
console.log(yValue);
// then, here, you could send a GET/POST request to your PHP function
},
title: {
display: true,
fontSize: 24,
text: dept + ' Dept Risk Summary',
fontColor: '#000000'
},
legend: {
display: false,
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: '#000000'
},
ticks: {
fontColor: "black",
fontSize: 16
}
}],
yAxes: [{
display: true,
gridLines: {
color: '#000000'
},
ticks: {
beginAtZero: true,
fontColor: "black",
fontSize: 16,
stepSize: 1
}
}],
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="briskChart">
</canvas>

Categories