Develop Reference

ChartJs bar chart bar value displaying lower then Y axis value in pdf?

I have a created a bar chart by chart js , Below is my code
version : 2.9.4
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
axis: 'y',
backgroundColor: barColors,
data: yValues,
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{
barThickness: 65, // number (pixels) or 'flex'
}],
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero:true,
suggestedMax: 9
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
});
Output that I got like below in pdf, I am using wkhtmltopdf. But it's fine in html page.
Problem is bar size displaying less then Y axis value. Here bar value 3 is showing under the Y axis value 3. My expectation is it will equal to 3.

I had the similar issue while converting html to pdf in IronPdf. I have managed to resolve it by setting animation option to false. So in your case it would be:
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
axis: 'y',
backgroundColor: barColors,
data: yValues,
}]
},
options: {
animation: false,
legend: {display: false},
scales: {
xAxes: [{
barThickness: 65, // number (pixels) or 'flex'
}],
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero:true,
suggestedMax: 9
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
});

Horizontal spacing in ChartJS Bar Graph

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.

Chart.js x-axes not working?

I'm trying to make a chart that displays data. I can't seem to get the x axis to work. If I add type:'linear', then it doesn't display the data, but the x-axes displays. If I don't add that, then the data gets displayed, but the x axes doesn't work.
var chart = new Chart(document.getElementById("graph"),
{
type: 'line',
data: {
//labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
display: true,
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
scaleShowValues: true,
responsive: false,
title: {
display: true,
text: 'World population (in millions)'
},
scales: {
yAxes: [
{
type: 'linear',
ticks: {
beginAtZero:true,
min: -10,
max: 110,
}
}
],
xAxes: [{
display: true,
position: 'bottom',
//type: 'linear',
ticks: {
display:true,
min: 0,
max: 3000,
stepSize: 10,
autoSkip: true
}
}
]
}
}
});

The data does not fit the type of the chart, there should be two coordinates 'x' and 'y'. Line chart must have data like:
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]

And delete this rows: min: -10,
max: 110,
That way the graph looks more beautiful and knows how to adjust the Y values itself.

Chart JS: Ignoring x values and putting point data on first available labels

I am making a line chart in chart.js, and am having an issue where I am trying to plot point data on the line but it is ignoring the x values I am giving, and instead putting them on the first available label.
this.myLineChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: [0,2,4,6,8,10],
datasets: [{
label: 'mylabel1',
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: [{
x: 2.5,
y: 85
}, {
x: 3.5,
y: 85
}]
}]
},
options: {
title: {
display: true,
text: 'mytitle1'
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 70,
suggestedMax: 100
}
}]
}
}
});
The result I get is this:
But instead I would like this line to be at the x values 2.5 and 3.5, so that it lies in between the 2 and 4 labels.
What should I change in the code to make it behave as I want?

In that case, you don't need to use labels array. Instead set x-axis' type to linear and minimum and maximum value for x-axis' ticks (perhaps stepSize as well) in your chart options, like so :
xAxes: [{
type: 'linear',
ticks: {
suggestedMin: 0,
suggestedMax: 10,
stepSize: 2
}
}]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
myLineChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'mylabel1',
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: [{
x: 2.5,
y: 85
}, {
x: 3.5,
y: 85
}]
}]
},
options: {
title: {
display: true,
text: 'mytitle1'
},
scales: {
xAxes: [{
type: 'linear',
ticks: {
suggestedMin: 0,
suggestedMax: 10,
stepSize: 2 //interval between ticks
}
}],
yAxes: [{
display: true,
ticks: {
suggestedMin: 70,
suggestedMax: 100
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Chart.js bar chart : Grid color and hide label

I'm trying to change to background color of my grid in chart.js, I've tried following the documentation and I've done a lot of research but I can't seem to figure it out. I also want to get rid of the top label, can't find an easy way to do that either. The label I'm talking about is the label that says "My first dataset" on the demo here: http://www.chartjs.org/docs/#bar-chart
Solution:
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
datasets: [{
label: "",
data: [12, 19, 3, 5, 2, 3, 4],
backgroundColor: "rgba(3, 118, 195, 0.5)",
borderColor: "rgba(0, 158, 219, 1)",
borderWidth: "2",
}]
},
options: {
legend:{
display: false
},
scales: {
xAxes: [{
gridLines: {
show: true,
color: "F3F3F3",
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
}
});
</script>
Thanks!

To hide lable i.e nothing but legend:
Use below config in options:
legend:{
display:false
}
Thus in your code:
options: {
legend:{
display:false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
And, for background color use css for canvas element:
<canvas id="myChart" style="background-color: grey;">
Hope this will do for you!