I was able to create this doughnut chart that displays data. However, now that I look at it, I would like add the number value of the foods (100,200,300) below, on a second line, instead of having next to the food item itself. Is there a way to do this? I was thinking that since this is a nested array, looping through it may work? Any thoughts?
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
label1: [["Pizza: 100"], ["Hot Dogs: 200"], ["Burgers:300"]],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: function(tooltipItem, data, label1, label2) {
return data ['label1'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']];
},
afterLabel: function(tooltipItem, data) {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
return '(' + percent + '%)';
}
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
}
});
<div>
<canvas id="myChart" height="100"></canvas>
<div id="chartjs-tooltip">
<table></table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
</script>
Related
I'm trying to build a chart of the top 10 activities that take the most time to perform and I'm basing myself on the duration of each one.
I created an example in Google Spreadsheet to exemplify what i need.
I couldn't create a graph with 'hour' data, so I converted it to seconds. But I would like to display the hours on the X axis as in the image.
Here's my code:
enter link description here
<canvas id="myChart" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Work", "Study", "Gym"],
datasets: [{
label: '# activities',
data: [30000, 9000, 5400],
time: ['08:20', '02:30', '01:30:00'],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return 'Duration ' + data['datasets'][0]['time'][tooltipItem['index']];
}
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
max: 45000,
stepSize: 5000
}
}]
}
}
});
</script>
Any tips?
You can define a ticks.callback function on your x-axis as follows:
xAxes: [{
ticks: {
min: 0,
max: 45000,
stepSize: 7200,
callback: v => Number.isInteger(v / 3600) ? (v / 3600) + ':00:00' : ''
}
}]
Please take a look at your amended and runnable code below and see how it works.
var myChart = new Chart('myChart', {
type: 'horizontalBar',
data: {
labels: ["Work", "Study", "Gym"],
datasets: [{
label: '# activities',
data: [30000, 9000, 5400],
time: ['08:20', '02:30', '01:30:00'],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return 'Duration ' + data['datasets'][0]['time'][tooltipItem['index']];
}
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
max: 45000,
stepSize: 7200,
callback: v => Number.isInteger(v / 3600) ? (v / 3600) + ':00:00' : ''
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="90"></canvas>
Vertical bar chart:
I want to achieve this vertical bar chart image in the link above but the result of my code is displaying a normal bar chart. Here is a snippet of the code I'm using to generate the chart:
<template name="VerticalCharts">
<div class="profile-user-box">
<canvas id="myCharts"></canvas>
</div>
</template>
Template.VerticalCharts.onRendered(function() {
var ctx = document.getElementById('myCharts').getContext('2d');
var myCharts = new Chart(ctx, {
type: 'bar',
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: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
},
});
});
What you have is a vertical bar chart, if you want horizontal bars you need to set the indexAxis to 'y' in your options object like so:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
indexAxis: 'y'
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
How to convert a bar chart into a triangle shaped chart using Chart JS ?
For eg: Sample Bar Chart : How to convert it into triangles instead of bars ?
var ctx = document.getElementById('myChart');
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],
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: {
y: {
beginAtZero: true
}
}
}
});
You can use a scatter chart and define individual datasets for each value.
Please take a look at your amended code and see how it works.
const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
const data = [12, 19, 3, 5, 2, 3];
const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '75, 192, 192', '153, 102, 255', '255, 159, 64'];
const datasets = labels.map((l, i) => ({
label: l,
data: [{ x: i + 1 - 0.45, y: 0 }, { x: i + 1, y: data[i] }, { x: i + 1 + 0.45, y: 0 }],
fill: true,
backgroundColor: 'rgba(' + colors[i] + ', 0.2)',
borderColor: 'rgb(' + colors[i] + ')',
showLine: true,
borderWidth: 1,
lineTension: 0,
pointRadius: 0,
pointHitRadius: 0
}));
new Chart('myChart', {
type: 'scatter',
data: {
datasets: datasets
},
options: {
scales: {
y: {
beginAtZero: true
},
x: {
min: 0,
max: labels.length + 1,
ticks: {
callback: (v, i) => labels[i - 1]
},
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>
You will have to implement your own custom chart type to do this since it's not possible by default, you can read here in the documentation how to implement your own chart type: https://www.chartjs.org/docs/master/developers/charts.html
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ labels}},//labels are the time values
datasets: [{
label: '# temperature',
data: {{ datas}},
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
}
}]
}
}
});
You need to define your xAxis as a time cartesian axis with a unit that matches your data. The default display format of 'hour' is 'hA' (for instance '2PM'). You should probably also use the same format for displaying tooltips.
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
Please note that Chart.js uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
Please have a look at belo runnable code snippet.
const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '# temperature',
data: datas,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="90"></canvas>
I am using charts.js to display data. i have it set up and it is working.
However, I have read through all the documentation and cannot figure out how to solve what I want to achieve.
Currently, the data contains three numbers [12, 19, 3]. this is the number of actual goals scored. However, there is also a prediction as to the number of goals scored. This value is always going to be less based on the data I have. so the expected goals scored are [8, 11, 1]. these correspond with the first set.
Is there anyway to combine the two values in the same bar. So in the first bar, it would go to 8, as the expected number of goals, and then the top part of the bar would show the actual number of goals.
Here is my code below.
Hopefully my question makes sense
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
label: '# of Goals',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
label: '# of Likes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Version 2 does support stacked bar charts.
https://jsfiddle.net/r71no58a/10/
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}]
}