I am trying to implement Stacked Horizontal Floating Bars using ChartJS but there is an unusual behaviour that I am facing. Can someone please help why is this happening. The code that I am using is :
<html>
<head>
<title>Floating Bars</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" height="100"></canvas>
</div>
<script>
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'horizontalBar',
data:{
labels:[1],
datasets:[
{
label:'data',
data:[[-3, 5]],
backgroundColor: 'lightblue'
},
{
label:'data',
data:[[6,8]],
backgroundColor: 'lightblue'
},
{
label:'data',
data:[[10, 11]],
backgroundColor: 'lightblue'
}
]
},
options: {
responsive: true,
scales: {
xAxes: [{
stacked : true,
}],
yAxes: [{
stacked : true,
}]
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
}
}
});
};
</script>
</body>
</html>
The output of the following code is :
Now if we compare the code with the plotted data we see that the first and the second data set i.e. [-3,5] and [6,8] gets plotted correctly, but the third data set instead of getting plotted at [10,11] gets plotted at [16,17] i.e by adding 10 to the previous 6. Can someone please explain the cause for this?
The reason is that you're stacking the values on the xAxis.
Simply define xAxis as follows and you get the result you're expecting.
xAxes: [{
stacked: false,
}]
window.myBar = new Chart(document.getElementById('canvas'), {
type: 'horizontalBar',
data: {
labels: [1],
datasets: [{
label: 'data 1',
data: [[-3, 5], [6, 8], [10, 11]],
backgroundColor: 'lightblue'
},
{
label: 'data 2',
data: [[6, 8]],
backgroundColor: 'lightblue'
},
{
label: 'data 3',
data: [[10, 11]],
backgroundColor: 'lightblue'
}
]
},
options: {
responsive: true,
scales: {
xAxes: [{
stacked: false,
}],
yAxes: [{
stacked: true,
}]
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>
Related
This is using charts.js. This code only makes the line graph but the title, x axis and y axis does not show. I want to add title, and the names for those 2 axis onto the graph. what is wrong and how do you fix it? I also want to make the y axis to start from 0 and up.
async function chartDisplay() {
await getData1();
await getData2();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xLabels,
datasets: [{
data: ratingDataI,
label: "data1",
borderColor: "#3E95CD",
fill: false
},
{
data: ratingDataA,
label: "data2",
borderColor: "#3E95CD",
fill: false
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dates'
}
}],
y: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
});
}
the x and y should not be arrays but objects, also the scaleLabel prop is called title now. For all the changes please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html)
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'yAxis'
}
},
x: {
title: {
display: true,
text: 'xAxis'
}
}
}
}
}
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.4.1/chart.js"></script>
</body>
I have used horizontal bar chart from chart.js where i need percentage values to be shown next to each bar at right side? here is the bar sample image.
click here to view sample image of bar chart
Also these are the options i have tried :
xAxes: [
{
ticks: {
min: 0,
max: 100
},
grid: {
offset: false
}
},
],
yAxes: [
{
gridLines: {
display: false,
},
display: "right",
barPercentage: 0.8,
minBarLength: 2,
},
],
Is there any option which can turn the percentage values on at he right side of the horizontal bar chart?
Please click below image to see the expected output
click image expected output
You can make use of the datalabels plugin
Example:
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
Chart.defaults.set('plugins.datalabels', {
color: '#FE777B'
});
var myChart = new Chart(ctx, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
label: 'Advisor Closed MTD',
backgroundColor: 'rgb(192,111,94)',
barThickness: 25,
datalabels: {
color: '#FFCE56'
}
}],
},
options: {
indexAxis: 'y',
responsive: false,
plugins: {
datalabels: {
formatter: (val, context) => (`${val}%`),
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
}
});
</script>
Hey :) thanks in advance for helping me out on this issue.
I have a horizontal chart in ChartJs with some dummy info. I currently want to line it up with the statistic above it. In ChartJs the charts get rendered inside a <canvas> tag. I want to remove the spacing in the chart. I'm assuming this is padding but its not on the canvas it's within the chart itself. I've read up on the docs and tried a few of the choices.
Just some extra info, I customized the chart and it now looks like this:
Removed the legend
Flipped the labels
Changed the label colour
Removed the grid lines
HTML:
<canvas id="myChart" width="400" height="150"></canvas>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'Money in',
data: [5, 19],
backgroundColor: [
'rgb(0,51,160)',
'rgb(26,121,191)'
],
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
fontColor: 'white',
display: true,
position: top,
mirror: true,
beginAtZero: true,
fontSize: 17,
padding: -9,
z: 1
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}]
},
legend: {
display: false
}
}
});
You can define the layout with negative left padding as follows:
options: {
layout: {
padding: {
left: -10
}
},
...
Please have a look at the following code snippet where the chart canvas is defined with a border in order to emphasize the alignment with the preceding text.
var myChart = new Chart(document.getElementById('myChart'), {
type: 'horizontalBar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'Money in',
data: [5, 19],
backgroundColor: ['rgb(0,51,160)', 'rgb(26,121,191)'],
borderWidth: 0
}]
},
options: {
layout: {
padding: {
left: -10
}
},
scales: {
yAxes: [{
ticks: {
fontColor: 'white',
mirror: true,
beginAtZero: true,
fontSize: 17,
padding: -9,
z: 1
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}]
},
legend: {
display: false
}
}
});
canvas{
max-width: 300px;
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<p>Text here</p>
<canvas id="myChart" width="400" height="150"></canvas>
I am using Chart.js plugin.
I want to reduce the horizontal spacing.
Image 1 : I try
Image 2 : I want
JSFiddle Link Here!
HTML Code Here
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="800" height="300"></canvas>
CSS Code Here
canvas {
margin:0 auto;
}
JS Code Here
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['April', 'May'],
datasets: [{
label: 'facebook',
borderColor: 'rgba(0,0,0,0)',
backgroundColor: '#3b5998',
data: [179, 201]
}, {
label: 'instagram',
borderColor: 'rgba(255,255,255,0)',
backgroundColor: '#e8361c',
data: [31, 47]
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0
},
gridLines: {
display:false
}
}],
xAxes: [{
display:true,
barPercentage: 0.7,
categoryPercentage: 0.3,
gridLines: {
display:false
}
}]
},
legend: {
position:'bottom'
},
animation:false
}
});
I want to reduce the interval between categories. I do not know if there is a corresponding option. Please help me.
Here's a simple chart.js horizontal bar chart I'm using:
var myBarChart = new Chart(ctx,{
type: 'horizontalBar',
data: {
labels: [
"Foo",
"Bar",
"Baz"
],
datasets: [
{
data: [725000, 600000, 900000],
backgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
],
hoverBackgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}],
}
}
});
If I change the values to be closer to each other I see the three bars. I need it to draw the bars so they are always visible, even if the values are widely different.
Is there a configuration I missed? How can I fix this?
For some reason, chart.js uses the smallest amount in data as minimum ticks value. Simply adding ticks.min: 0 apparently solves the issue:
var ctx = document.getElementById('chart')
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [
"Foo",
"Bar",
"Baz"
],
datasets: [{
data: [725000, 600000, 900000],
backgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
],
hoverBackgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
ticks: {
min: 0
}
}],
yAxes: [{
display: false
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>