We Keep Coding

ChartJs: HorizontalBar Missing Background Colours

I have the following chart using ChartJs 2.7.3 that is supposed to show a 10yr span in a red bar. For some reason, the background is not applying correctly for that bar (if you hover the chart you still get the correct hover tooltip)
$(() => {
var ctx = $("#Chart")[0];
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['ABC'],
datasets: [{
label: 'ABC',
data: [{
t: '2015-3-15',
y: 10
}],
backgroundColor: 'rgba(255,0,0,1)'
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
min: '2010-1-01',
max: '2030-1-01'
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="Chart" height="50"></canvas>
If I switch the chart type from a horizontalBar to a normal bar, then it works as expected:
$(() => {
var ctx = $("#Chart")[0];
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['ABC'],
datasets: [{
label: 'ABC',
data: [{
t: '2015-3-15',
y: 10
}],
backgroundColor: 'rgba(255,0,0,1)'
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
min: '2010-1-01',
max: '2030-1-01'
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="Chart" height="50"></canvas>
What am I missing for the horizontalBar chart?

I cannot tell why your code is not working but can propose a different approach to solve the problem.
Please have a look at your amended code below. In order to get rid of annoying JavaScript warnings, I use the latest stable versio nof Chart.js (2.3.0).
I included two bars since I expect that the data can be of dynamic size. It should however also work for a single bar. I didn't know however what to do with the y value, this depends on your use case.
$(() => {
var data = [{
l: 'ABC',
t: '2015-3-15',
y: 10
}, {
l: 'XYZ',
t: '2020-11-05',
y: 20
}];
var ctx = $("#Chart")[0];
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
yLabels: data.map(o => o.l),
datasets: [{
label: 'ABC',
data: data.map(o => moment(o.t, 'YYYY-M-DD')),
backgroundColor: ['rgba(255,0,0, 0.5)', 'rgba(0,255,0,0.5)']
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-M-DD',
unit: 'year',
tooltipFormat: 'YYYY/M/D'
},
ticks: {
min: '2010-1-01',
max: '2030-1-01'
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="Chart" height="80"></canvas>

Formatting x-axis labels as time values in Chart.js

Using chart.js I would like to reformat my bottom chart labels into MM DD format (ie. Feb 2)
How do I get chart.js to recognize the data as dates and convert it?
It comes in like this from my csv file:
2020-02-06
Here is my chart.js coding but it doesn't seem to work.
data: {
labels: dollar.years,
datasets: [
{label: 'Cdn dollar in cents',
data: dollar.vals,
fill: false,
borderColor: '#4BD0B0',
pointRadius: 0,
borderWidth: 8
}
]
},
options: {
legend:{
display:false,
usePointStyle: true,
labels: {
boxwidth:10,
rotation:90
}
},
scales: {
yAxes: [{
gridLines:{
display:true
},
ticks: {
min: .74,
max: .76,
stepSize: .025,
}
}],
xAxes: [{
gridLines:{
display:true
},
ticks: {
labelOffset: 1,
},
}],
}
}
});
}

All you need is to define your xAxis as a time cartesian axis with a 'day' unit.
The default display format of 'day' is 'MMM D' (for instance 'Feb 2').
options: {
...
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
...
}]
}
...
}
Please have a look at the following runnable code snippet:
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: ['2020-02-06', '2020-02-07', '2020-02-08', '2020-02-09', '2020-02-10', '2020-02-11', '2020-02-12'],
datasets: [{
label: 'My Dataset',
data: [0.758, 0.756, 0.755, 0.754, 0.753, 0.758, 0.76],
fill: false,
backgroundColor: 'green',
borderColor: 'green'
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: .74,
max: .76,
stepSize: .005
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Disable automatic zoom in on the data

I have a scatter plot with the x axis being the day of the year.
I always want the whole X axis shown, even when I hide dataset A (by clicking on the blue box).
For the Y axis it already works
var ctx = document.getElementById("plot").getContext('2d');
var doyChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: ['2016-01-01', '2016-11-01', '2016-12-01'],
datasets: [{ label: 'A', backgroundColor: 'blue',
data: [{t: '2016-07-08', y: 1},{t: '2016-12-29', y: 1}]
},
{ label: 'B', backgroundColor: 'red',
data: [{t: '2016-11-01', y: 2}]
}
]
},
options: {
scales: {
xAxes: [{ type: 'time',
ticks: { source: 'labels',
/*min: moment("2016-01-01"), max: moment("2016-12-31") */
min: "2016-01-01", max: "2016-12-31"
},
time: {parser: 'YYYY-MM-DD',
displayFormats: {day: 'MMM D' },
stacked: true
}
}],
yAxes: [{ ticks: {
beginAtZero:true,
max: 2,
},
}]
}
}
});
<html>
<body>
<canvas id="plot" ></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
</body>
</html>
My min and max values seem to have no effect at all, I tried as date and as string, to no avail.

Bubble Chart in Chartjs not working

I tried implementing the bubble chart as given on the official site of chartjs
http://www.chartjs.org/docs/latest/charts/line.html
but it only displays the grid without any data points.
It also does not show any errors.
Here's the code
var ctx = document.getElementById("myChart");
var data = [{x:10, y:10, r:10}];
// For a bubble chart
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart Js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>
<body>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>
</body>
</html>
What am i missing ?

You are defining the data property incorrectly. It should be an object (consist of other properties) not an array.
So, you should use ...
...
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
...
instead of ...
...
data: data,
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById("myChart");
var data = [{
x: 10,
y: 10,
r: 10
}];
// For a bubble chart
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>

The data object should be structured differently.
For instance...
data: {
datasets: [{
label: ["Label"],
data: [{x: 3, y:4, r:5}]
}]
},

how to change the Y-axis values from float number to integer in chartjs?

i want to change Yaxis from real number to integer and here is image, and please help me solve this problem
here is my code
var lineChartData = {
labels: time,
datasets: [{
label: "Số người đăng kí ủng hộ",
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
fill: false,
data: people_isProcessing
}, {
label: "Số người đã ủng hộ",
borderColor: window.chartColors.purple,
pointBackgroundColor: window.chartColors.purple,
fill: false,
data: people_isReceived
}]
};
and here is my option for my chart
window.onload = function() {
var chartEl = document.getElementById("chart");
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,
options: {
title: {
display: true,
text: 'Kindmate - Chart Static Donate'
},
tooltips: {
enabled: true,
mode: 'index',
position: 'nearest',
custom: customTooltips
}
}
});
});

In your case, you can set stepSize property to 1 for y-axis ticks, to change the y-axis values from float number to integer.
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
},
...
}
ᴅᴇᴍᴏ
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr'],
datasets: [{
label: '# of votes',
data: [1, 2, 3, 4]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Try this:
window.onload = function() {
var chartEl = document.getElementById("chart");
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,
options: {
title:{
display:true,
text:'Kindmate - Chart Static Donate'
},
tooltips: {
enabled: true,
mode: 'index',
position: 'nearest',
custom: customTooltips
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
}]
}
}
});