Currently trying to create a bar chart in HTML/Javascript. Can't seem to get the bars showing for some reason. Below is the code and image..
Chart shows up but not the actual bars. Guessing this is a data issue but I've been stumped for ages. Any help is greatly appreciated!
HTML
<canvas id="myChart"></canvas>
JS
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
label: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
label: 'number of votes',
data: [1,2,3,4,5,6],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
You have to use labels instead of label for the bar labels. See the official documentation: LINK
So your JS would look like this (see the change on line 5):
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
label: 'number of votes',
data: [1,2,3,4,5,6],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
It is a basic typo error. It should be 'labels' whereas you have written 'label'.
data: {
labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
Related
Actually i'm using chart js chartJs Doughnut chart, this is working fine but how can I set chartJs Doughnut labels on right side?
My Code:-
const countryChart = new Chart(document.getElementById('countryChart').getContext('2d'), {
type: 'doughnut',
data: {
labels: ['India', 'Netherlands', 'UAE', 'Egypt', 'Others'],
datasets: [{
label: 'Revenue',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}],
},
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="countryChart" height="150"></canvas>
I want like this:-
ThankYou for your efforts!
I got the solution for it, We need to just add legend positions as given below answer:-
You can also follow given URL to know more about ChartJs positions:-
click here to know more
options: {
plugins: {
legend: {
position: 'right'
}
}
}
const countryChart = new Chart(document.getElementById('countryChart').getContext('2d'), {
type: 'doughnut',
data: {
labels: ['India', 'Netherlands', 'UAE', 'Egypt', 'Others'],
datasets: [{
label: 'Revenue',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}],
},
options: {
plugins: {
legend: {
position: 'right'
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="countryChart" height="150"></canvas>
I have a working chart.js on https://www.flottefeger.ch/charts.html
I am trying to add an on click event to my Line chart using Chart.js. two values I can alert to pop up.
But I need one more parameter. The ones which are in the label in the datasets.
It looks like that:
But now my question, how can I get which graph I have clicked?
I mean the value in the label?
In my example, it could be Timmy or Siri
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Timmy',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: 'Siri',
data: [24, 38, 6, 10, 4, 6],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
},
});
/* https://github.com/chartjs/Chart.js/issues/2292 */
document.getElementById("myChart").onclick = function(evt) {
var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
var firstPoint = activePoints[0];
var label = myChart.data.labels[firstPoint._index];
var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
alert(label + ": " + value);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<h1>chart.js, click on data demo</h1>
<canvas id="myChart"></canvas>
You can change your onclick function as follows:
document.getElementById("myChart").onclick = function(evt) {
const datasetIndex = myChart.getElementAtEvent(event)[0]._datasetIndex;
if (datasetIndex >= 0) {
...
alert(myChart.data.datasets[datasetIndex].label + '\n' + label + ": " + value);
}
};
Please take a look at your amended code and see how it works.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Timmy',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: 'Siri',
data: [24, 38, 6, 10, 4, 6],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
},
});
document.getElementById("myChart").onclick = function(evt) {
const datasetIndex = myChart.getElementAtEvent(event)[0]._datasetIndex;
if (datasetIndex >= 0) {
var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
var firstPoint = activePoints[0];
var label = myChart.data.labels[firstPoint._index];
var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
alert(myChart.data.datasets[datasetIndex].label + '\n' + label + ": " + value);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I made my first bar with Chart.js library.
My data looks nice, but I can't give my valuest some color.
enter image description here
My function looks like this:
var $barData =
{
type: 'bar',
labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
datasets:
[
{
label: 'Antal stemmer',
data: [
[$arrStemmer[0]],
[$arrStemmer[1]],
[$arrStemmer[2]],
[$Snit_Vaerdi]
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}
]
}
// Hent graf initialiserings setup
var $Stemmer = document.getElementById("can_afstemning_graf").getContext("2d");
// Tegn graf, men data fra barData objektet
new Chart($Stemmer).Bar($barData);
What am I missing?
I am looking here in the documentation and it look fine: https://www.chartjs.org/docs/latest/.
Thanks,
Nenad
You are setting the data incorrectly.
You should use
data: [
$arrStemmer[0],
$arrStemmer[1],
$arrStemmer[2],
$Snit_Vaerdi
],
Instead of
data: [
[$arrStemmer[0]],
[$arrStemmer[1]],
[$arrStemmer[2]],
[$Snit_Vaerdi]
],
This should work. if the $arrStemmer and $snit_Vaerdi are filled.
let $stemmer = document.getElementById('can_afstemning_graf').getContext('2d');
let myChart = new Chart($stemmer, {
type: 'bar',
data: {
labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
datasets: [{
label: 'Antal stemmer',
data: [
$arrStemmer[0],
$arrStemmer[1],
$arrStemmer[2],
$Snit_Vaerdi
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
I really can't figure this out.
I'm using Chart.js - and the chart works fine local but when I try to show it online on my server it doesn't work.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: 'Udvikling i motorvejstrafikken 2010-2017',
data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 4
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 90
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="400px" height="400px"></canvas>
When I check the console in chrome I get this error:tester:890 Uncaught ReferenceError: Chart is not defined
at tester:890
I check in sources and it says that there is an error here:
var myChart = new Chart(ctx, {
But what is causing this problem. Works fine local and on fiddle.net.
Hopefully somebody is able to help me. Thanks in advance.
Bit late but I had the same problem. To fix it you need to get your chart to generate from window.onload.
e.g.
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myLine = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: 'Udvikling i motorvejstrafikken 2010-2017',
data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 4
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 90
}
}]
}
}
});
};
Don't know why it works locally without this, but needed this change to display on the server.
I'm a beginner trying out Chart.js and I'm having trouble with getting my bar chart to appear. When I try and run this code all I get is a blank screen, any idea why?
<div id="chart">
<canvas id="myGraph" width="400" height="400"></canvas>
</div>
<script>
var myData = {
labels: ["2000", "2001", "2002", "2003"],
datasets: [{
label: 'Test chart',
data: [20, 50, 10, 12],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
});
var ctx = document.getElementById("myGraph").getContext("2d");
var debt = new Chart(ctx).Bar(myData);
</script>
You have several typos in your JSON literal.
I rewrote it like so (see here for the JSFiddle)
var config = {
type: 'bar',
data: {
labels: ["2000", "2001", "2002", "2003"],
datasets: [{
label: 'Test chart',
data: [20, 50, 10, 12],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
};
var ctx = document.getElementById("myGraph");
var debt = new Chart(ctx, config);