I am using chart.js library. I am creating a graph and want to show dates in x-axis like here: http://www.chartjs.org/samples/latest/scales/time/line.html
I have provided the same configuration (except the date format of graph data) for graph as the above example provides but my graph showing time i.e 2 am, 2 am, .. instead of dates i.e 2018-02-01, 2018-02-10, ...
For date formatting i am using the moment.js library recommended by Chart.js
I am using following code:
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var timeFormat = 'YYYY-MM-DD';
var config = {
type: 'line',
data: {
datasets: [{
label: "Thi is graph label",
backgroundColor: "rgb(54, 162, 235)",
borderColor: "rgb(255, 159, 64)",
fill: false,
data: [{
x: moment("2010-03-01").format(timeFormat),
y: 0.668525
}, {
x: moment("2010-03-02").format(timeFormat),
y: 0.668827
}],
}]
},
options: {
title: {
text: "This is title"
},
scales: {
xAxes: [{
type: "time",
time: {
parser: timeFormat,
tooltipFormat: 'll HH:mm'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
},],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
console.log(config);
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
<html>
<head>
<title>Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<br>
<br>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
var timeFormat = 'MM/DD/YYYY HH:mm';
function newDate(days) {
return moment().add(days, 'd').toDate();
}
function newDateString(days) {
return moment().add(days, 'd').format(timeFormat);
}
var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
labels: [ // Date Objects
newDate(0),
newDate(1),
newDate(2),
newDate(3),
newDate(4),
newDate(5),
newDate(6)
],
datasets: [{
label: 'My First dataset',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}, {
label: 'My Second dataset',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}, {
label: 'Dataset with point data',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
fill: false,
data: [{
x: newDateString(0),
y: randomScalingFactor()
}, {
x: newDateString(5),
y: randomScalingFactor()
}, {
x: newDateString(7),
y: randomScalingFactor()
}, {
x: newDateString(15),
y: randomScalingFactor()
}],
}]
},
options: {
title: {
text: 'Chart.js Time Scale'
},
scales: {
xAxes: [{
type: 'time',
time: {
format: timeFormat,
// round: 'day'
tooltipFormat: 'll HH:mm'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data.forEach(function(dataObj, j) {
if (typeof dataObj === 'object') {
dataObj.y = randomScalingFactor();
} else {
dataset.data[j] = randomScalingFactor();
}
});
});
window.myLine.update();
});
var colorNames = Object.keys(window.chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[config.data.datasets.length % colorNames.length];
var newColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
borderColor: newColor,
backgroundColor: color(newColor).alpha(0.5).rgbString(),
data: [],
};
for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
config.data.datasets.push(newDataset);
window.myLine.update();
});
document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
config.data.labels.push(newDate(config.data.labels.length));
for (var index = 0; index < config.data.datasets.length; ++index) {
if (typeof config.data.datasets[index].data[0] === 'object') {
config.data.datasets[index].data.push({
x: newDate(config.data.datasets[index].data.length),
y: randomScalingFactor(),
});
} else {
config.data.datasets[index].data.push(randomScalingFactor());
}
}
window.myLine.update();
}
});
document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myLine.update();
});
document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
});
window.myLine.update();
});
</script>
</body>
</html>
You need to set:
scales: {
xAxes: [
{
.....
ticks: {
source: 'date'
},
}
......
],
Related
how to show those straight Lines.
I added x: { offset: true }, but the next point not looks straight..
My Code
const labels = ["A", "B", "C", "D"];
const data = {
labels: labels,
borderColor: "",
datasets: [
{
label: "Title",
data: [0, 50, 50, -10],
fill: false,
borderWidth: 5,
borderColor: "yellow",
tension: 0.1,
},
],
};
You could use a scatter as following:
const myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [{x:0, y:0}, {x:0, y:10}, {x:2, y:10}, {x:2, y:0}],
}]
},
options: {
showLine: true
}
});
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [{x:0, y:0}, {x:0, y:10}, {x:2, y:10}, {x:2, y:0}],
}]
},
options: {
showLine: true,
scales: {
y: {
max: 20
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.1.1/dist/chart.umd.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
Hello i am rendering these charts using chart js but i am unable to align these charts in the same order my config file and options file is given below
can anyone please help me with this. i tried with below options and data
const options = {
indexAxis: "y",
maintainAspectRatio: false,
aspectRatio: 0.8,
barThickness: 20,
responsive: true,
layout: {
padding: {
left: 1
}
},
plugins: {
legend: {
display: false
}
},
scales: {
x: {
ticks: {
color: "#495057"
},
grid: {
color: "#ebedef"
}
},
y: {
ticks: {
color: "#495057",
crossAlign: "near"
},
grid: {
color: "#ebedef"
},
gridLines: {
offsetGridLines: true,
display: true
}
}
}
};
const data = {
labels: ["red"],
datasets: [{
backgroundColor: "#42A5F5",
data: [65],
borderWidth: 2,
borderRadius: 75,
borderSkipped: false
},
{
backgroundColor: "#FFA726",
data: [28],
borderWidth: 2,
borderRadius: 50,
borderSkipped: false
}
]
};
how to align one below the other labels
As far as I know chart.js does not provide an option to set a minimum distance for the labels, a workaround to achieve this is to add spaces the the labels of the charts where the labels are shorter as the longest one so you will get something like this:
var options = {
type: 'bar',
data: {
labels: [" Red"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: 'pink'
}]
},
options: {
indexAxis: 'y'
}
}
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>
var options = {
type: 'bar',
data: {
labels: [" Red"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: 'pink'
}]
},
options: {
indexAxis: 'y'
}
}
var options2 = {
type: 'bar',
data: {
labels: [" Yellowwwww"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: 'pink'
}]
},
options: {
indexAxis: 'y'
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var ctx2 = document.getElementById('chartJSContainer2').getContext('2d');
new Chart(ctx2, options2);
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="chartJSContainer2" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
I try to add some vertical red lines into my time line chart.
For normal charts with categories is works but not for time axis.
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"/>
</div>
<script>
var timeFormat = 'DD/MM/YYYY';
var config = {
type: 'line',
data: {
datasets: [
{
label: "line1",
data: [
{x: "2015-03-15T13:03:00Z", y: 3000},
{x: "2015-03-16T13:03:00Z", y: 3100},
{x: "2015-03-17T13:03:00Z", y: 2900},
{x: "2015-03-18T13:03:00Z", y: 3050}
],
fill: false,
borderColor: 'black'
},
{
label: "line2",
data: [
{x: "2015-03-15T13:03:00Z", y: 4000},
{x: "2015-03-16T13:03:00Z", y: 4100},
{x: "2015-03-17T13:03:00Z", y: 4900},
{x: "2015-03-18T13:03:00Z", y: 4050}
],
fill: false,
borderColor: 'green'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2015-03-17T13:03:00Z',
borderColor: 'red',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: "somelabel"
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
It works, you only forgot to include the script tag to the plugin so the annotations plugin never got loaded in
var timeFormat = 'DD/MM/YYYY';
var config = {
type: 'line',
data: {
datasets: [{
label: "line1",
data: [{
x: "2015-03-15T13:03:00Z",
y: 3000
},
{
x: "2015-03-16T13:03:00Z",
y: 3100
},
{
x: "2015-03-17T13:03:00Z",
y: 2900
},
{
x: "2015-03-18T13:03:00Z",
y: 3050
}
],
fill: false,
borderColor: 'black'
},
{
label: "line2",
data: [{
x: "2015-03-15T13:03:00Z",
y: 4000
},
{
x: "2015-03-16T13:03:00Z",
y: 4100
},
{
x: "2015-03-17T13:03:00Z",
y: 4900
},
{
x: "2015-03-18T13:03:00Z",
y: 4050
}
],
fill: false,
borderColor: 'green'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2015-03-17T13:03:00Z',
borderColor: 'red',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: "somelabel"
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js" crossorigin="anonymous"></script>
<div style="width:75%;">
<canvas id="canvas" />
</div>
I have a horizontalBar chart with one column. I want to have ticks got from 0 to 70, evenly spaced and 10 point increments. I've tried several options, but can't seem to make it work out. Best I could do was this:
Here is the code I used to generate this chart:
<div style="width: 330px; height: 100px;">
<canvas id="chartBarChart1" style="margin-right: auto; margin-left: auto; display: block;" height="100"></canvas>
</div>
<script>
var ctx = document.getElementById('chartBarChart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['CI'],
datasets: [
{
label: 'CI',
data: [45],
backgroundColor: 'Red'
}
]
},
options: {
scales: {
xAxes: [{
ticks: {
max: 70,
beginAtZero: true
}
}]
}, legend: { display: false },
responsive: false,
maintainAspectRatio: false
});
</script>
Is there a way?
Use "stepSize" to configure the ticks like this:
var ctx = document.getElementById('chartBarChart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['CI'],
datasets: [{
label: 'CI',
data: [45],
backgroundColor: 'Red'
}]
},
options: {
scales: {
xAxes: [{
ticks: {
max: 70,
beginAtZero: true,
stepSize: 10
}
}]
},
},
});
https://jsfiddle.net/hdahle/zxdjqo82/
A simple stacked bar graph
<head>
<title>Stacked Bar Chart</title>
<script src="Chart.bundle.js"></script>
<script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
chartColors = {
redborder: 'rgba(206, 0, 23, 1)',
darkredborder: 'rgba(206, 0, 23, 0.75)',
lightredborder: 'rgba(206, 0, 23, 0.5)',
};
var barChartData = {
labels: [1<img src='images/badges/Manchester United.png' alt='Manchester United.png' height='30' width='30'>,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
datasets: [{
label: 'Goals',
backgroundColor: window.chartColors.redborder,
data: [0,1,3,0,2,0,0,2,0,1,0,1,1,0,0,1,0,0,2,1,0,1,2,1,1,0,0,0,2,2,0,3]
}, {
label: 'Assists',
backgroundColor: window.chartColors.darkredborder,
data: [0,0,1,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,0,0,1]
}, {
label: 'Indirect',
backgroundColor: window.chartColors.lightredborder,
data: [0,0,1,0,0,0,0,0,1,1,0,1,0,0,1,0,0,0,1,1,0,1,2,0,0,0,1,0,0,0,0,1]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
document.getElementById('randomizeData').addEventListener('click', function() {
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myBar.update();
});
</script>
</body>
</html>
in the x-axis labels, I am trying to get a small icon (image) to be displayed instead of a number. I have tried to put just the image tag in all possible combinations of " and ' as well as with the number. But to no avail. The chart does not render. It seems that the label needs to recognized as a value to render and the html tag knocks this out of place. I don't see why an image tag cannot be put in there, is there a way to do this?