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}]
}]
},
Related
I'm working with chart.js and I can't seem to be able to change the scale of the Y axis to show whole numbers, in this example I would like to have just round numbers in the scale (1,2,3,4,5) instad of the decimal (0 -0,5 - 1,0 - 1,5 - 2,0 - etc)
I'm using a vertical Bar chart from here: https://www.chartjs.org/docs/latest/samples/bar/vertical.html
and my current setup is this:
var setVirtualBarChart = function (element, viewModel) {
var chArea = element.getContext("2d");
var chartConfig = {
type: 'bar',
data: {
labels: ['Categories'],
datasets: [
{
minBarLength: 2,
label: '0-7 days',
barPercentage: 0.75,
categoryPercentage: 0.75,
data: viewModel.ZeroToSevenDaysUser(),
backgroundColor: window.chartColors.BrightVisibleGreen
},
{
minBarLength: 2,
label: '8-30 days',
barPercentage: 0.75,
categoryPercentage: 0.75,
data: viewModel.SevenToThirtyDaysUser(),
backgroundColor: window.chartColors.Orange
},
{
minBarLength: 2,
label: '30+ test days',
barPercentage: 0.75,
categoryPercentage: 0.75,
data: viewModel.ThirtyPlusDaysUser(),
backgroundColor: window.chartColors.BrightRed
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
stacked: false,
display: true,
scaleLabel: {
display: true,
//labelString: 'Categories',
gridLines: {
offsetGridLines: true
}
}
}
],
yAxes: [
{
stacked: false,
display: true,
scaleLabel: {
display: true,
labelString: 'Number of invoices'
},
ticks: {
precision: 0,
min: 0
}
}
]
}
}
};
VirtualBarChart = new Chart(chArea, chartConfig);
};
You are using v2 syntax while using v3, in v3 all scales are objects and no arrays anymore. For all changes please read the migration guide
Exaple:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
label: '# of Votes',
data: [1, 2.5, 1.5],
backgroundColor: ["Red", "Blue", "Yellow"]
}]
},
options: {
scales: {
y: {
ticks: {
stepSize: 1
},
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
I'm new with chart.js and have tried to manage "option: in the javascript, but is seems that xAxes: option is totally neglected.
I have also tried other examples like grid colors etc, but the "options:" still does not work.
Could you please have a check on this simple code what goes wrong? I use Edge.
Best regards,
Cornelis
See here the code:
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
borderColor: "#3e95cd",
fill: false,
tension: 0.1,
label: 'Name of label'}
]
},
options: {
responsive: true,
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}//Scales
}//Option
});
<!DOCTYPE html>
<html lang="en">
<body>
<div class="chart-container" style="position: relative; height:30vh; width:50vw">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="70" height="20"></canvas>
</div>
</body>
</html>
You are using v3 of the lib while your options object syntax is in v2, please read the migration guide to check if you need to change anything else, for this issue all the scales are now a seperate object instead as listed as x and y axes in an array, also the prop name has changed.
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
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>
I'm new to chartjs, but after googling around, i still cannot figure out, why would I not get data charted out. I'm using "parser" attribute to parse string and providing expected display format with min/max values, but no data is shown
var ctx = document.getElementById("canvas");
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["labelA", "labelB"],
datasets: [{
data: ["10:32", "00:12"],
borderWidth: 1
}]
},
options: {
responsive: 'true',
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'm:s',
unit: 'minute',
unitStepSize: 1,
min: '00:00',
max: '20:00',
displayFormats: {
'minute': 'mm:ss'
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>
In my opinion your code looks good and should work. Semantically, however, the use of the timeline is not quite correct. Your bars actually represent durations.
Please have a look at your amended code that works now with durations instead of times:
function asSeconds(value) {
const tokens = value.split(':');
return Number(tokens[0]) * 60 + Number(tokens[1]);
}
function format(seconds) {
return moment.utc(seconds * 1000).format("mm:ss");
}
new Chart('canvas', {
type: 'horizontalBar',
data: {
labels: ['labelA', 'labelB'],
datasets: [{
label: 'My Dataset',
data: ['10:32', '00:12'].map(v => asSeconds(v)),
backgroundColor: ['red', 'blue'],
borderWidth: 1
}]
},
options: {
responsive: 'true',
scales: {
xAxes: [{
ticks: {
min: 0,
stepSize: 60,
max: asSeconds('20:00'),
callback: s => format(s)
}
}]
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => format(data.datasets[0].data[tooltipItem.index])
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>
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.