charts js grid line not removing - javascript

I am trying to remove gridlines from my chart that i have created using chrts.js but it is not working and verything seems right but i dont understand what is wrong, here's the code, i'll be grateful if someone could help me
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: [{
gridLines: {
display: false,
drawOnChartArea: false,
drawTicks: false
},
}]
}
}
});


If you want to remove all gridlines from the chart area, you should define the option gridLines.drawOnChartArea: false for the y-axis and the x-axis.
Please have a look at your amended code below.
var myChart = new Chart('myChart', {
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: [{
gridLines: {
drawOnChartArea: false
},
ticks: {
beginAtZero: true,
stepSize: 5
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
},
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Related

No chart appears - Chart.js

I am not very experienced with JavaScript and have a bit of difficulty with chart.js I can't get the chart.js graph to appear. I've tried everything, but nothing; below I have left you a part of the code and the photo of how the "graph" looks. Thanks in advance
<h5 class="card-title">Line Chart</h5>
<div style="height: 400px">
<canvas id="line-char"></canvas>
<script>
const ctx = document.getElementById('myChart');
const ctx = document.getElementById('myChart').getContext('2d');
const ctx = $('#myChart');
const ctx = 'myChart';
</script>
<canvas id="line-char"></canvas>
<script>
const ctx = document.getElementById('line-char');
const line_char = 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: {
y: {
beginAtZero: true
}
}
}
});
</script>
Image link

Your chart configuration contains invalid characters in backgroundColor and borderColor (‘ instead of ').
‘rgba(75, 192, 192, 0.2)',
Please take a look at your amended and runnable code below and see how it works now.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<h5 class="card-title">Line Chart</h5>
<div style="height: 400px">
<canvas id="line-char"></canvas>
<script>
new Chart('line-char', {
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: {
y: {
beginAtZero: true
}
}
}
});
</script>
</div>

How to make chart for ethereum smart contract

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?

Chart.js with TypeScript

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, {

Chartjs – change tooltip border radius

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>

CharJS : Is it possible to display stacked bar chart with positive scale on both sides of 0 index

I want to have a stacked bar chart with Char JS. I'm able to implement the same. One can run the following snippet to see that but unable to change the x Axis labels to positive integer values. I want all x axis labels to be a positive value (replace -20 => 20 , -40 => 40 etc)
var ctx = $("#graphTest").get(0).getContext("2d");
var MyScale = Chart.Scale.extend({
});
var options = {
barShowStroke: false,
scaleBeginAtZero: false,
scaleOverride: true,
scaleSteps: 20,
scaleStepWidth: 2,
scaleStartValue: -20,
responsive: true,
barBeginAtOrigin: true,
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Nb Fail/Success'
}
}],
yAxes: [{
stacked: true
}]
}
};
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
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,
data: [-65, 59, 80, -81, 56, 55, 40],
},
{
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,
data: [10, -11, -98, 81, -34, -50, -20],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
<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.5.0/Chart.js"></script>
<canvas id="graphTest" width="400" height="190" style="padding-left:10px; padding-right:10px;"></canvas>

Yes, you can add ticks for xAxes, implement the callback and convert your resulting label to anything you want
var ctx = $("#graphTest").get(0).getContext("2d");
var MyScale = Chart.Scale.extend({
});
var options = {
barShowStroke: false,
scaleBeginAtZero: false,
scaleOverride: true,
scaleSteps: 20,
scaleStepWidth: 2,
scaleStartValue: -20,
responsive: true,
barBeginAtOrigin: true,
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: function(label, index, labels) {
return label < 0 ? label * -1 : label;
}
},
scaleLabel: {
display: true,
labelString: 'Nb Fail/Success'
}
}],
yAxes: [{
stacked: true
}]
}
};
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
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,
data: [-65, 59, 80, -81, 56, 55, 40],
},
{
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,
data: [10, -11, -98, 81, -34, -50, -20],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
<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.5.0/Chart.js"></script>
<canvas id="graphTest" width="400" height="190" style="padding-left:10px; padding-right:10px;"></canvas>

Categories