How to align bars in bar chart - Chart.js - javascript

I want to align bar to left, but I didn't find anything yet! if there is only one bar its data, then it will render at the center of the chart, and I want to render it on the left!


You could add some fake entries into data.labels.
data: {
labels: ["A", "", "", ""],
Please have a look at below runnable code snippet.
new Chart("chart", {
type: "bar",
data: {
labels: ["A", "", "", ""],
datasets: [{
label: "My Dataset",
data: [1],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 1,
stepSize: 1
},
gridLines: {
drawOnChartArea: false
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
});
canvas {
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>

Related

How to hide grid lines and x-axis labels in chart.js?

I'm using chart.js v3.2.0 and I want to disable the grid lines and x-axis labels. I've tried various examples from other stack overflow posts but none seem to work.
https://jsfiddle.net/gcp95hjf/1/
html
<div style = "width: 600px; height: 400px;">
<canvas id="chartJSContainer" width="1" height="400"></canvas>
</div>
js
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132,1)'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}
]
},
options: {
scales: {
xAxes: [{
display: false,
ticks: {
display: false //this will remove only the label
}
}],
yAxes: [{
display:false
}]
},
responsive: true,
maintainAspectRatio: false
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
Does anyone know how to do it?
Thanks

Chart.js v3 has multiple breaking changes, one of them is how you define the scales, it is stated in the migration guide and shown in a lot of the examples (https://www.chartjs.org/docs/3.2.1/getting-started/v3-migration.html)
You will have to change scales: { yAxes: [], xAxes: []} to scales: { y: {}, x: {}}
Working fiddle: https://jsfiddle.net/Leelenaleee/r26h71fm/2/

Hide GridLines on Both Axis -
ChartJS v2 (older version) -
scales: {
x: [
{
gridLines: {
display: false,
},
},
],
y: [
{
gridLines: {
display: false,
},
},
],
},
Newer Version ChartJS v3 -
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
display: false,
},
},
},

Chartjs Line Chart showing old data when hovering

I have a line chart that's created using chart.js. Everything works fine on page load, but when toggle the chart and hover to chart's corners, it shows old charts.
Also here is the live webapp that you can see the behavior.
https://www.batchrank.com/
I tried to fix with update(), destroy and clear however non of them worked.
Thanks a lot for the help,
Here is my code;
var ctx = document.getElementById("chartContainer").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
label: "data",
datasets: [
{
label: "Mobile Speed Scores",
data: mobileData,
backgroundColor: ["rgba(255, 99, 132, 0.2)"],
borderColor: ["rgba(255, 99, 132, 1)"],
borderWidth: 1
},
{
label: "Desktop Speed Scores",
data: desktopData,
backgroundColor: ["rgba(49, 67, 129, 0.2)"],
borderColor: ["rgba(49, 67, 129, 1)"],
borderWidth: 1
}
]
},
options: {
responsive: true,
title: {
display: true,
text: inspectUrl
},
scales: {
xAxes: [
{
type: "time",
display: true,
scaleLabel: {
display: true,
labelString: "Date"
}
}
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: "value"
}
}
]
}
}
});
myChart.render();
const removeElements = elms => elms.forEach(el => el.remove());
removeElements(document.querySelectorAll(".progress"));
function toogleDataSeries(e) {
e.dataSeries.visible = !(
typeof e.dataSeries.visible === "undefined" || e.dataSeries.visible
);
myChart.destroy();
myChart.render();
}
}

Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?

I am using Bar chart of Chart.js which is creating unwanted spacing on left and right side. I have tried to remove that by making canvas width and height to 100% as mentioned chartjs-is-there-any-way-to-remove-blank-space-around-pie-charts here. But it's not removing in my case.
I also need to remove horizontal line below the chart. Is there any way to do so?
Here's what i tried:
//Bar Chart
var bar = document.getElementById("bar-canvas");
var barChart = new Chart(bar, {
type: 'bar',
data: {
labels: ["Jackets", "Pants", "Headwear", "Shirts", "Footwear"],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF'
],
borderColor: [
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF'
],
borderWidth: 1
},
{
label: 'Dataset 2',
data: [20, 19, 10, 52, 2, 13],
backgroundColor: [
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE'
],
borderColor: [
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE'
],
borderWidth: 1
}]
},
responsive: true,
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
color: "rgba(0, 0, 0, 0)"
},
ticks: {
fontColor: '#0071bc'
},
barThickness: 110
}],
yAxes: [{
stacked: true,
gridLines: {
color: "rgba(0, 0, 0, 0)"
},
scaleLabel: {
display: false
},
ticks: {
display: false
}
}
]
}
}
});
<canvas id="bar-canvas"></canvas>

Managed to remove the bottom line, but somehow could not remove the padding, - commented an area, which removes a little bit, but then you lose the ticks (which is obviously bad)
Just adding a fiddle, hope it helps at least somehow!
https://jsfiddle.net/aokzss3c/1/
..xAxes..
ticks: {
display: true, // removing this
fontColor: '#0071bc',
},

Chart.js Mixed Bar and Line chart with different scales

I'm building out a chart using chart.js, it is a stacked bar chart with a scatter type. My problem is that the scale on the x-axis of the bar chart does not properly represent the x-axis scale of the scatter. I spent the past few hours looking over the docs and browsing SOF and came up with This Answer, which makes sense with respect to the bar graph, just not the scatter graph which is plotted by x-y coordinates.
var chartDefault = {
type: 'bar',
data: {
labels: ['30', '45', '60', '90', '120', '120+'],
datasets: [{
type: 'bar',
label: 'Receivable',
data: [730, 492.5, 120, 4732.5, 2760.85, 0],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
type: 'bar',
label: 'Past Due',
data: [2760.85, 0, 0, 0, 0, 0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
type: 'scatter',
label: 'Invoice',
data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
xAxisID: 'invoice-time',
yAxisID: 'invoice-amount',
backgroundColor: 'rgba(75, 00, 150, 0.2)',
borderColor: 'rgba(75, 00, 150,1)',
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Days'
},
}, {
id: 'invoice-time',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}],
yAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}, {
id: 'invoice-amount',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}]
},
}
};
var chart = new Chart($('#creditSat'), chartDefault);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="creditSat"></canvas>
So if you look at the snippet for the scatter dataset, there are 11 data points but only 6 are mapped. I would like all 11 to be mapped, I know there is some overlap and that makes sense. Essentially this is a representation of invoices, you have the Receivables, Past Due represented by the bar and then the points on the line represent the invoices themselves. Any help would be much appreciated.

Found the answer, the axis for the line graph needs the type specified, like so:
{
id: 'invoice-time',
type: 'linear',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}
var chartDefault = {
type: 'bar',
data: {
labels: ['30', '45', '60', '90', '120', '120+'],
datasets: [{
type: 'bar',
label: 'Receivable',
data: [730, 492.5, 120, 4732.5, 2760.85, 0],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
type: 'bar',
label: 'Past Due',
data: [2760.85, 0, 0, 0, 0, 0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
type: 'scatter',
label: 'Invoice',
data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
xAxisID: 'invoice-time',
yAxisID: 'invoice-amount',
backgroundColor: 'rgba(75, 00, 150, 0.2)',
borderColor: 'rgba(75, 00, 150,1)',
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Days'
},
}, {
id: 'invoice-time',
type: 'linear',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}],
yAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}, {
id: 'invoice-amount',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}]
},
}
};
var chart = new Chart($('#creditSat'), chartDefault);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="creditSat"></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!

Categories

Resources