Develop Reference

Not understanding why chart js wont load

Chart JS 3.9.1
Laravel 9.x
There are 50 thousand questions using 20 different versions and none of them, from what I have found are helpful. I have checked the version, checked the docs, and even checked the page source to see if data was in place. No Errors, No Chart, Nothing.
In a blade file I have done:
<div>
<canvas id="item-listing-data" width="400" height="400"></canvas>
</div>
#push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('item-listing-data').getContext('2d');
const saleDataChart = new Chart(ctx, {
type: 'line',
labels: #json($saleData['labels']),
datasets: [{
label: 'Sale Data',
data: #json($saleData['data']),
fill: false,
borderColor: 'rgb(34, 67, 156)',
tension: 0.1
}]
});
</script>
#endpush
As far as I know, from the docs this is what you do. This is how you render the chart.
If I inspect the page to see the JS that gets spit out:
const ctx = document.getElementById('item-listing-data');
const saleDataChart = new Chart(ctx, {
type: 'line',
labels: ["Mon Aug 2022 14:08:13"],
datasets: [{
label: 'Sale Data',
data: [10000],
fill: false,
borderColor: 'rgb(34, 67, 156)',
tension: 0.1
}]
});
Looks right to me.
When I investigate the page I see a div that is way too large, the canvas element - but Im sure that can be fixed with options, and no chart. Just an empty canvas.
Again, I know this question has been asked a thousand times, but I:
Followed the docs
Checked for issues in my code
Made sure I was loading the correct version of chart js
And still no chart, no errors, nothing.
Even if I replace labels and data with [1,2,3] - Nothing, no chart, no errors.
Thoughts?

AFA I can see, the issue seems to be in the chart configuration and the data node is missing.
Without it, the chart doesn't have data to show.
The code should be:
<div>
<canvas id="item-listing-data" width="400" height="400"></canvas>
</div>
#push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('item-listing-data').getContext('2d');
const saleDataChart = new Chart(ctx, {
type: 'line',
data: { // <--- this was missing
labels: #json($saleData['labels']),
datasets: [{
label: 'Sale Data',
data: #json($saleData['data']),
fill: false,
borderColor: 'rgb(34, 67, 156)',
tension: 0.1
}]
}
});
</script>
#endpush

Chart.js not displaying when passing dynamic labels

I am trying to draw a chart by passing values for labels and data dynamically using char.js.
The chart.js module refuses to accept the labels when passed as a variable.
When I hardcode it, it works just fine.
The label variable prints out the values on the page and seems to be correct in format.
Very similar to the problem described in the below query, except that I am already using a proper array.
[https://stackoverflow.com/questions/60453491/chart-js-not-showing-data-when-pass-dynamic-labels][1]
mypage.html:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4"></script>
{{Messages.vm_size_in_use_labels}}
{{Messages.vm_size_in_use_data}}
<canvas id="chart" width="50" height="50"></canvas>
<script lang="JavaScript">
let ctx = document.getElementById("chart").getContext("2d");
let chart = new Chart(ctx, {
type: "pie",
data: {
labels: {{Messages.vm_size_in_use_labels}},
datasets: [
{
label: "Gross volume ($)",
backgroundColor: "#79AEC8",
borderColor: "#417690",
data: {{Messages.vm_size_in_use_data}},
}
]
},
options: {
title: {
text: "Gross Volume in 2020",
display: true
}
}
});
</script>
The page shows the printed value correctly but chart doesn't display:
['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s']
[3, 3, 1, 1]
If I change the label to hard values,
labels: ['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s'],
this works just fine and chart is displayed.
Not sure what is missing here. the framework is django if it matters.

Uncaught ReferenceError: Chart is not defined at test.html:11

I'm completing my cs50 final project so am coding in the cs50 ide. I am trying to create a graph using chart.js so am using the test code they provide to try and get it to work on my website. However I am getting the error written in the title when I'm on my server. I have tried putting the JavaScript code in a separate file but that does not work either. Any ideas as to what i am doing wrong?
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<script scr="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
<title> Chart</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],}]
}});
</script>
</body>
</html>

You have a typo in your chart JS script inclusion.
You have done scr and not src.
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>

chart.js show no charts in IE11

chart.js Version 2.5.0
It works fine in Google Chrome, but not in IE11. There is no charts shown.
Whats wrong?
<canvas id="ks2" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("ks2");
var ks2 = new Chart(ctx, {
type: 'bar',
data: {
labels: ["KS2 (1)", "KS2 (2)", "Differenz"],
datasets: [{
label: 'KS2',
data: [25, 35, 10, 0]
}]
}
});
</script>

You can achieve this using a meta tag as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Changing labels with logo images

I'm trying to build a graph with chart.js and i would like to replace the labels with logtype small images.
Is it possible ? Can't find the way to do it.
Thanks.
This is my chart options:
var horizontalBarChartData3 = {
labels: ["mark1", "mark2", "mark3", "mark4","mark5"],
datasets: [
{
label: 'USA',
backgroundColor: "rgba(196,196,196,0.5)",
data: [0.07,0.02,0.26,0.68,0.21]
},
{
hidden: false,
label: 'EUROPA',
backgroundColor: "rgba(125,125,125,0.5)",
data: [0.09,0.02,0.31,0.74,0.23]
},
{
label: 'CHINA',
backgroundColor: "rgba(165,157,4,0.5)",
data: [0.15,0.02,0.38,0.99,0.27]
}]
};

Adding an image to the labels is a tricky adjustment, and will require fiddling with chart.js code, as it isn't natively supported. My best suggestion is to avoid attempts to add your images to the labels themselves.
Best solution for using icons would be one of:
Use images of your own, but place them around the chart in proper positions, and if needed, refer to em in labels.
Use an icon font to insert icons as characters of text. Here's an example using Font Awesome, using your data (based off of this fiddle):
var randomScalingFactor = function () {
return Math.round(Math.random() * 100);
};
var barChartData = {
pointLabelFontFamily: "'FontAwesome'",
labels: ["\uf000", "\uf001", "\uf002", "\uf003", "\uf004"],
datasets: [
{
label: 'USA',
backgroundColor: "rgba(196,196,196,0.5)",
data: [0.07,0.02,0.26,0.68,0.21]
},
{
hidden: false,
label: 'EUROPA',
backgroundColor: "rgba(125,125,125,0.5)",
data: [0.09,0.02,0.31,0.74,0.23]
},
{
label: 'CHINA',
backgroundColor: "rgba(165,157,4,0.5)",
data: [0.15,0.02,0.38,0.99,0.27]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive: true,
scaleFontFamily: "'FontAwesome'"
});
<script src="http://chartjs.org/assets/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div style="width: 75%">
<span style="font-family: FontAwesome"></span>
<canvas id="canvas" height="450" width="600"></canvas>
</div>