I want to create a bar chart on ChartJS but I'm not having success when trying to remove this "gap" between the Y-axis 0 bar and the first bar. Is it even possible?
This is the example with a small gap
And here is what I want to achieve, without the gap
HTML
<canvas id="openedCanvas" height="230" width="680"></canvas>
Javascript
var 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
}]
};
var options = {}
var chart = new Chart($('#openedCanvas'), {
type: 'bar',
data: data,
options: options
});
And here's a running Codepen https://codepen.io/fermijs/pen/ZmPRaB
Thank you :)
To achieve expected result , use scales option for x axis
barPercentage vs categoryPercentage section of https://www.chartjs.org/docs/latest/charts/bar.html?h=scales
Both of 1.0 will stack together , so adjust according to your requirement
scales: {
xAxes: [{
categoryPercentage: 0.99,
barPercentage: 1.0
}]
}
codepen - https://codepen.io/nagasai/pen/yGYJKE
Related
Currently trying to create a bar chart in HTML/Javascript. Can't seem to get the bars showing for some reason. Below is the code and image..
Chart shows up but not the actual bars. Guessing this is a data issue but I've been stumped for ages. Any help is greatly appreciated!
HTML
<canvas id="myChart"></canvas>
JS
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
label: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
label: 'number of votes',
data: [1,2,3,4,5,6],
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, 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)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
You have to use labels instead of label for the bar labels. See the official documentation: LINK
So your JS would look like this (see the change on line 5):
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
label: 'number of votes',
data: [1,2,3,4,5,6],
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, 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)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
It is a basic typo error. It should be 'labels' whereas you have written 'label'.
data: {
labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
I have here a smart contract and a I want to make a chart for this smart Contract address
0xE462CbEE0cd420f6c199B0194B1D8D93Fb5e7720 and for "total supply"
I want the chart to update as soon as a transaction goes in our out
How can i implement this in chartjs?
I have here the html canvas
<canvas id="myChart" width="400" height="400"></canvas>
and than the js file with this
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = 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: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
//and here is the data from my smart contract
var supply = await contract.methods.totalSupply().call()
// and than i output it in my UI like this
document.getElementById('contractBalanceSnet').innerHTML = supply/100000000
How can i now use the data totalSupply for the chart?
var myCharts = <HTMLCanvasElement>document.getElementById("myChart");
var ctx = myCharts.getContext('2d');
var myChart = 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: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Please someone help me with this function. I am currently learning and not understanding whats wrong with this. The error says I am missing a semi colon at =>
Your problem is on this line:
var myChart = new Chart(ctx) => ({
This isn't valid JavaScript. My best guess is you meant something like this:
var myChart = new Chart(ctx, {
I have created a simple horizontal bar chart using chartjs.
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
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
}]
},
});
Now my requirement is to change the border radius of tooltip to make it rectangle. I have tried changing the border radius property but It doesn’t seem to work. Does anyone know how can I change radius of tooltip?
Thanks in advance.
This can be achieved by setting cornerRadius property to 0 (or any number) for tooltips in your chart options.
options: {
tooltips: {
cornerRadius: 0
},
...
}
working example
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
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: {
tooltips: {
cornerRadius: 0 //<- set this
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
There is a unexpected text "NaN" appearing near the Y-axis of the chart when both the datasets(Capital and Expense) of a chart are hidden in chart created using Chartjs(Link) plugin. The chartType being used here is horizontalBar chart.
Also attached is a screenshot of how it looks when one of the dataset is hidden(Type 1) and the Type 2 shows the chart when both the datasets are hidden.
Link to fiddleJsFiddle
UPDATE:
This fix worked in chart.js version 2.5 (or lower), in version 2.6 they said it's fixed by default.
OLD ANSWER:
Hello, just change to this: (notice my callback on xAxis)
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Capital',
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
}, {
label: 'Expense',
data: [4, 8, 6, 14, 12, 6],
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: {
scales: {
xAxes: [{
stacked: true,
ticks: {
//this will fix your problem with NaN
callback: function(label, index, labels) {
return label ? label : '';
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Can't really explain why is displaying that 'NaN', I think it's still trying to display the ticks even when there is no data. So, in that callback you make sure that data is displayed only if exists.
I had the same problem on a chart and didn't found any answer anywhere, so this fix is something I came up with on the fly, but it's working. That callback is overriding ticks displayed data, so you can customize it as much as you want.
You can check this issue here too:
Chart js Github
I managed to solve the above issue by not allowing the user to hide all the datasets at same time ie., atleast one active dataset at all times.
Fiddle link below
http://jsfiddle.net/znppphyf/1