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>
Related
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: [{
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>
So i'm trying to achieve this look for my Chart:
and this is my current chart look like:
here is my script tag:
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: labels_most_forked,
datasets: [{
label: '# of Votes',
data: values_most_forked,
backgroundColor: [
'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)'
],
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: {
layout: {
padding: {
left: 0,
right: 50,
top: 0,
bottom: 0
},
}
}
});
How can I achieve this look for my chartjs ?
Appreciate every answer.
The position of the legend can be defines through the options position and align as follows:
options: {
legend: {
position: 'right',
align: 'start'
}
...
Please have a look at your amended code below.
const labels_most_forked = ['HTML', 'TypeScript', 'Ruby', 'Others', 'JavaScript'];
const values_most_forked = [13, 7, 5, 1, 1];
var myChart = new Chart('myChart', {
type: 'pie',
data: {
labels: labels_most_forked,
datasets: [{
label: '# of Votes',
data: values_most_forked,
backgroundColor: [
'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)'
],
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: {
legend: {
position: 'right',
align: 'start'
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I have created a simple horizontal bar chart using chartjs.
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
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
}]
},
});
Now my requirement is to change the border radius of tooltip to make it rectangle. I have tried changing the border radius property but It doesn’t seem to work. Does anyone know how can I change radius of tooltip?
Thanks in advance.
This can be achieved by setting cornerRadius property to 0 (or any number) for tooltips in your chart options.
options: {
tooltips: {
cornerRadius: 0
},
...
}
working example
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
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
}]
},
options: {
tooltips: {
cornerRadius: 0 //<- set this
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
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);