I create a chart using chartjs, how do I display the pediactric to be visible horizontally bar?
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Interna", "Pediatric", "Obygn", "Surgical"],
datasets: [{
label: '100% of Votes',
data: [80, 55, 60, 70],
backgroundColor: [
'rgba(150, 99, 132, 0.6)',
'rgba(180, 99, 132, 0.6)',
'rgba(210, 99, 132, 0.6)',
'rgba(240, 99, 132, 0.6)'
],
borderColor: [
'rgba(150, 99, 132, 1)',
'rgba(180, 99, 132, 1)',
'rgba(210, 99, 132, 1)',
'rgba(240, 99, 132, 1)'
],
borderWidth: 2,
hoverBorderWidth: 0
}]
},
options: {
The x-axis scale begins at 55. Since the value of Pediatric is 55 no bar is visible.
Set the following option to have the scale always begin at zero:
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
Related
Is it possible to make a time interval using Chart.js? As far as I'm concerned, using stacked bars chart is the closest I can get but not quite what I want
What I'm trying to achieve is this time interval
Here's the code
const data = {
labels: ['Mon', 'Tue', 'Wed' ],
datasets: [{
label: 'Bars',
data: [
[14, 16],
[17, 22],
[13, 19],
],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
],
borderColor: [
'rgba(255, 26, 104, 1)',
],
borderWidth: 2,
borderSkipped: false
}]
};
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
x: {
min: 12,
max: 26,
ticks: {
stepSize: 1,
callback: (val, index) => {
return `${String(val % 24).padStart(2, '0')}:00`
}
},
},
y: {
beginAtZero: true
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
You can use horizontalBar for your bar type. Example:
{
type: 'horizontalBar',
data: {
labels: ["a","b","c","d","e","f","g"],
datasets: [{
axis: 'y',
label: 'My First Dataset',
data: [[5,65], [30,90], [20,80], [15,71], [20,56], [24,55], [15,70]],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
},
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
}
here the result
I hope can help you.
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>
I have a vertical bar in my project (I use chart.js). I need to know its length/height (in pixels). I try to get it like this:
afterDraw: chart => {
var yAxis = chart.scales['y-axis-0'];
chart.config.data.datasets[0].data.forEach((value, index) => {
console.log(Math.round(yAxis.getPixelForValue(value)));
});
}
But I got incorrect values. For horizontal bar it's work correctly (with var xAxis = chart.scales['x-axis-0']).
What the problem? How to do it?
Try using getDatasetMeta() to get the metadata.
var meta = myChart.getDatasetMeta(0);
var height = meta.data[0]._model.height;
The origin (value zero) of the y-axis is at the top of the canvas. Therefore, you need to subtract the value obtained through yAxis.getPixelForValue(value) from yAxis.bottom as follows:
afterLayout: chart => {
var yAxis = chart.scales['y-axis-0'];
chart.data.datasets[0].data.forEach(value => {
console.log(Math.round(yAxis.bottom - yAxis.getPixelForValue(value)));
});
}
Please take a look at below sample and see how it works (code is derived from the Chart.js Bar documentation page).
new Chart('myChart', {
type: "bar",
plugins: [{
afterLayout: chart => {
var yAxis = chart.scales['y-axis-0'];
chart.data.datasets[0].data.forEach(value => {
console.log(Math.round(yAxis.bottom - yAxis.getPixelForValue(value)));
});
}
}],
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 20
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
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>
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
}
}]
}