I have the following horizontal bar chart
<template>
<div>
<canvas id="myChart" width="100" height="100"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
data() {
return {
ctx: null,
chart: null,
}
},
mounted() {
this.ctx = document.getElementById('myChart');
this.chart = new Chart(this.ctx, {
type: 'horizontalBar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
categoryPercentage: 0.4,
label: 'Stars',
data: [15, 28, 34, 48, 100],
backgroundColor: [
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
],
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
categoryPercentage: 0.4
}]
}
}
});
}
}
</script>
I want to reduce the spacing between one bar and the other (not eliminate it, just reduce it), but I don't know how to do this, if I use the categoryPercentage prop it does about the same as barPercentage, just reduces the size of the bar itself but not the distance between each bar.
This is how is looking right now
If possible I would also have the chart in a blank canvas too
The bar width is influenced through the options barPercentage and categoryPercentage, which both need to be defined on the dataset.
To find out about the relationship between barPercentage and categoryPercentage, see here.
Please take a look at your amended runnable code below:
new Chart('myChart', {
type: 'horizontalBar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
barPercentage: 0.9,
categoryPercentage: 1,
label: 'Stars',
data: [15, 28, 34, 48, 100],
backgroundColor: [
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)'
],
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
In case you simply want to see the existing bars closer to each other, you need to change the height of the chart. This can be done directly on the canvas through the height attribute. Alternatively you may also enclose the canvas in a div that has its dimensions defined by some CSS.
Related
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
}
}]
}
}
I have the following mock up of a bar chart. Pretty simple except I can't seem to get the font size on the X axis to increase. I am guessing I am doing something wrong with the hAxis or just using the wrong option.
<script src="Chart.Bundle.min.js" type="text/javascript"></script>
...
<canvas id="myChart" height="220" ></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
hAxis: {
textStyle: {
fontSize: 32
}
}
}
});
</script>
</div>
first, you're using chart.js not google charts
for chart.js, the x-axis label font size options are as follows...
scales: {
xAxes: [{
ticks: {
fontSize: 40
}
}]
}
see following working snippet...
$(document).ready(function() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
scales: {
xAxes: [{
ticks: {
fontSize: 18
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>
I was using a different chart on my site which was causing some issues so we migrated to chartjs. Everything works fine but I have one requirement which I cannot find in chartjs.
In the site I am working on, the user gives an assessment and it shows the graph based on the assessment results.
So in the assessment, there is a question "Are you feeling exacerbation?" If the user selects yes then in the graph it shows an image above that bar like below image.
In the picture you can see "E" above the two bars.
I want to achieve the same in chartjs. Is it possible? If not then can you guys suggest a way to notify the user that they have selected "exacerbation".
Thank you
You can place images on top of individual bars using chartjs-plugin-labels.
Please have a look at the following runnable code snippet:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
data: [25, 59, 80, 76],
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)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
labels: {
render: 'image',
textMargin: 10,
images: [
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
layout: {
padding: {
top: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
First, my JSFidle: https://jsfiddle.net/ethernetz/u8yc4tvb/
At the top of the chart, there is a pink box. I want that box to go away. Others have done this by adding
legend: {
labels: {
boxWidth: 0,
}
},
to their code to make the box go away. As you can see, this didn't affect my box at all. What am I doing wrong?
you should move the legend configuration inside the option object Fiddle
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Completion'],
datasets: [{
data: [60, 20],
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0)',
],
borderWidth: 0
}]
},
options: {
responsive: false,
cutoutPercentage: 90,
events: [],
legend: {
labels: {
boxWidth: 0
}
}
}
});
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
}
}]
}