I am trying to use chart.js to create a simple live line/scatter chart, z-indexed to act as a backdrop for my app. For some reason, it's rendering as an opaque gray color instead of the reddish color I've specified. And, even though I've tried changing the other chart elements and defaults the chart is always gray. I'm sure it's a trivial fix but just i can not figure it out.
Here is the link to a JS Bin that has the full code.(You'll need to set and start the timer before the chart will have any data to show) Also, more specifically, this is the JS code related to creating the chart:
var ctx = document.getElementById('canvas').getContext("2d"),
points = [{x:0,y:0}],
lineData = {
datasets: [{
fillColor: "rgba(217, 108, 99, .9)",
strokeColor: "rgba(255, 255, 255, 1)",
pumpntHighlightStroke: "rgba(220,220,220,1)",
data: points
}]
},
lineOptions = {
showScale: false,
scaleShowLabels: false,
scaleShowGridLines : false,
pointDot : false,
pointDotRadius : 0,
pointDotStrokeWidth : 0,
pointHitDetectionRadius : 0,
datasetStroke : true,
datasetStrokeWidth : 3,
datasetFill : true,
};
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.animation.duration = 250;
Chart.scaleService.updateScaleDefaults('linear', {
display: false,
ticks: {
beginAtZero: true,
min: 0
}
});
Chart.defaults.global.elements.line.tension = 0.05;
Chart.defaults.global.maintainAspectRatio = false;
myChart = new Chart(ctx, {
type: 'scatter',
data: lineData,
options: lineOptions
});
Thank you for your time. please let me know if there is anything further I can explain.
I think this is because you don't use the correct properties. According to the docs (http://www.chartjs.org/docs/), you should use backgroundColor, not fillColor.
See the first example in the doc: http://www.chartjs.org/docs/#getting-started-creating-a-chart
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
}]
Note that strokeColor doesn't exist aswell.
Related
Hello I am trying to present my array of objects in a graph with Chart.js here is the code
let timers = {neutral: 0, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
var detection = new Chart(c, {
type: 'bar',
data: {
labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
datasets: [{
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // neutral
'rgba(54, 162, 235, 0.2)', // happy
'rgba(255, 206, 86, 0.2)', // sad
'rgba(75, 192, 192, 0.2)', // angry
'rgba(153, 102, 255, 0.2)', // surprised
'rgba(255, 159, 64, 0.2)' // disgust
],
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: 2,
data: timers,
}]
},
options: {
indexAxis: 'x',
responsive: true,
plugins: {
legend: {
display: false,
labels: {
font: {
size: 50
}
}
},
title: {
display: true,
text: "Emotion timers"
}
}
}
});
The problem is that the graph does not take as labels the one that I am giving to it but instead it takes as labels the names from the object array and due to that I cannot resize the x labels to be bigger. Thanks in advance for any tips.
As per the chart js documentation, when you give a map (key,value) to data field like timers in your case, chart js automatically takes keys as labels and values as data points to be plotted.
So, if you want to give your own labels in spite of this, you can add following snippet to your existing code.
var keys = Object.keys(timers);
var values = keys.map(function(v) { return timers[v]; });
and pass values instead of timers.
Full code -
let timers = {neutral: 0, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
var keys = Object.keys(timers);
var values = keys.map(function(v) { return timers[v]; });
var detection = new Chart(c, {
type: 'bar',
data: {
labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
datasets: [{
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // neutral
'rgba(54, 162, 235, 0.2)', // happy
'rgba(255, 206, 86, 0.2)', // sad
'rgba(75, 192, 192, 0.2)', // angry
'rgba(153, 102, 255, 0.2)', // surprised
'rgba(255, 159, 64, 0.2)' // disgust
],
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: 2,
data: values,
}]
},
options: {
indexAxis: 'x',
responsive: true,
plugins: {
legend: {
display: false,
labels: {
font: {
size: 50
}
}
},
title: {
display: true,
text: "Emotion timers"
}
}
}
});
Update:
As you want to update charts as timers are getting updated in setInterval, you have to put chart creation code also in setInterval function.
For example, you can refer to the following full html file
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script>
var i = 0;
setInterval(updateChart,3000);
function updateChart(){
var c = document.getElementById("myChart");
let chartStatus = Chart.getChart("myChart"); // <canvas> id
if (chartStatus != undefined) {
chartStatus.destroy();
}
i = i+1;
let timers;
if(i%2==0){
timers = {neutral: 20, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
}
else{
timers = {neutral: 0, happy: 20, sad: 0, angry: 0, surprised: 0, disgust: 0};
}
var keys = Object.keys(timers);
var values = keys.map(function(v) { return timers[v]; });
var detection = new Chart(c, {
type: 'bar',
data: {
labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
datasets: [{
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // neutral
'rgba(54, 162, 235, 0.2)', // happy
'rgba(255, 206, 86, 0.2)', // sad
'rgba(75, 192, 192, 0.2)', // angry
'rgba(153, 102, 255, 0.2)', // surprised
'rgba(255, 159, 64, 0.2)' // disgust
],
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: 2,
data: keys.map(function(v) { return timers[v]; }),
}]
},
options: {
indexAxis: 'x',
responsive: true,
plugins: {
legend: {
display: false,
labels: {
font: {
size: 50
}
}
},
title: {
display: true,
text: "Emotion timers"
}
}
}
});
}
</script>
</head>
<button onclick="updateChart()">Update Chart</button>
<canvas id="myChart" width="100" height="100"></canvas>
You can run this html code for better understanding.
You just need to let the labels array out of the chart like so:
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const timers = {
neutral: 10,
happy: 0,
sad: 0,
angry: 0,
surprised: 0,
disgust: 20
};
const detection = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // neutral
'rgba(54, 162, 235, 0.2)', // happy
'rgba(255, 206, 86, 0.2)', // sad
'rgba(75, 192, 192, 0.2)', // angry
'rgba(153, 102, 255, 0.2)', // surprised
'rgba(255, 159, 64, 0.2)' // disgust
],
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: 2,
data: timers,
}]
},
options: {
indexAxis: 'x',
responsive: true,
plugins: {
legend: {
display: false,
labels: {
font: {
size: 50
}
}
},
title: {
display: true,
text: "Emotion timers"
}
}
}
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
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
>>> Radar chart labels with background color
Hi there, I just want to ask for an option to add the background color (a rounded rect with bg color) for labels (individually) in Chartjs. Is there any callback that I can apply for changing this, any help is appreciated with best regards!
This is the current code:
let chart = new Chart('chart-0', {
type: 'radar',
data: radarChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Radar Chart | Chart.js',
fontSize: 16
},
scale: {
ticks: {
beginAtZero: true
},
pointLabels: {
fontSize: 14, // fontSize is ok
fontColor: presets.blue, // fontColor is accessible
backgroundColor: presets.yellow //This is not working for sure!
}
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
You can do using backgroundColor.
data: {
labels: chart_label,
datasets: [{
label: '# of Votes',
data: chart_data,
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
}]
},
In case someone needs the answer, I did posted in in chartjs and Tim has done it so well: https://github.com/chartjs/Chart.js/issues/5085
Rgrds,
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
I'm using Chart.js for a simple bar graph with data read from mysql. Unfortunately, the y-axis starts at random numbers, often higher than some of the bars. Therefore, some bars are not visible, although their value should be high enough:
I've already used the scaleBeginAtZero: true-option as suggested here, to no avail:
var ctx = $("#mycanvas");
Chart.defaults.global.scaleBeginAtZero = true;
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scaleBeginAtZero: true
}
});
Any ideas? The complete code is available here.
Well you can use the below code. So that, Y Axes of your bar chart starts from zero.
options: {
scales : {
yAxes : [{
ticks : {
beginAtZero : true
}
}]
}
}
[Sample-Code]
var ctx = document.getElementById("myChart1");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales : {
yAxes : [{
ticks : {
beginAtZero : true
}
}]
}
}
});