Related
I am new to chart.js I want to draw a circle inside bar charts or at baseline like the picture circle in blue color below how can I achieve this
help me thanks in advance
In your existing bar chart configuration, you can define a second dataset of type: 'scatter' as follows:
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
Please take a look at the runnable code below and see how it works.
new Chart("chart", {
type: "bar",
data: {
labels: ["A", "B", "C", "D", "E", "F", "G"],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: 0.5,
backgroundColor: "rgba(201, 203, 207, 0.2)",
borderColor: "rgb(201, 203, 207)",
borderWidth: 1
},
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>
this is my code part, which I am using at the moment for chart.js
var lineChartData = {
labels: ['08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
datasets: [{
label: 'Temperatur (°C)',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23],
yAxisID: 'y-axis-1',
cubicInterpolationMode: 'monotone'
}, {
label: 'Feuchtigkeit (%)',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34],
yAxisID: 'y-axis-2',
cubicInterpolationMode: 'monotone'
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 90
}
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
}
],
}
}
});
};
I have time string labels with 5 minutes between each other on my x-axe
I added this parameter to my "xAxes Part"
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 90
},
type: 'time',
time: {
unit: 'hour'
}
}]
Now my chart doesn't work anymore. Only a white page.
I think the problem is, that my x-axe only shows string time labels, but as a string, not as a time value. Can this be the problem?
If yes, how can I solve this?
Is there an exmaple for that?
Thanks a lot !! :)
** UPDATE **
there is one little thing before I can say: "It is perfect ! :)
1. How can I format the tooltip information? It should be: 28.04.2020 - 05:00
The problem is that your labels are not in RFC2822 or ISO format and cannot be parsed to a Date object. You need to define the format to be used for parsing your time strings. Chart.js internally uses Moment.js to parse the dates. Therefore you should refer to Moment.js documentation to find out about valid formats.
xAxes: [{
...
type: 'time',
time: {
parser: 'HH:mm',
unit: 'hour'
}
Make sure also to use the bundled version of Chart.js that includes Moment.js in a single file.
Please have a look at your amended code below.
var lineChartData = {
labels: ['08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
datasets: [{
label: 'Temperatur (°C)',
borderColor: 'red',
backgroundColor: 'red',
fill: false,
data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23],
yAxisID: 'y-axis-1',
cubicInterpolationMode: 'monotone'
}, {
label: 'Feuchtigkeit (%)',
borderColor: 'blue',
backgroundColor: 'blue',
fill: false,
data: [34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34],
yAxisID: 'y-axis-2',
cubicInterpolationMode: 'monotone'
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 90
},
type: 'time',
time: {
parser: 'HH:mm',
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
}
}
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
}
],
}
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="100"></canvas>
You didn't provide the chartColors object, so assuming those colors and added them by default. Also, I am expecting that you have installed moment.js library before chart.js library for Time type charts to work.
Other than that, the labels you're providing are not in the standard Date format, (e.g. 2020-05-29T08:02:00Z) and you need to pass time.parser option to define that you're specifying only hours of the date. Read more about parser
window.chartColors = {
'red': '#ff0000',
'blue': '#0000ff'
}
var lineChartData = {
labels: ['08:00:00', '08:05:00', '08:10:00', '08:15:00', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
datasets: [{
label: 'Temperatur (°C)',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23],
yAxisID: 'y-axis-1',
cubicInterpolationMode: 'monotone'
}, {
label: 'Feuchtigkeit (%)',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34],
yAxisID: 'y-axis-2',
cubicInterpolationMode: 'monotone'
}]
};
function init() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 90
},
type: 'time',
time: {
unit: 'hour',
parser: 'hh'
}
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
ticks: {
max: 60,
min: 0,
stepSize: 10
}
}
],
}
}
});
};
window.onload = init();
Working demo, JSFiddle
I have a multi line linear chart made with Chart.js like this:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
My problem is that when I go over a point all points on that column activate.
I want to activate just the single point on the selected line.
So, just to be clear, this is what I have now: Actual Behaviour
And this is what i want: Expected Behaviour
Anyone could help me on this?
You need to set the hover interaction mode option like so:
options: {
hover: {
mode: 'nearest'
}
}
Working example:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
hover: {
mode: 'nearest'
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
I am working on creating a Line graph that plots points at different times during one day for different days and in order to do that, I need to use the type: time on the xAxes. I have the moment.js downloaded, but the type:time is giving me an error. Without the type:time, the X axis label is too long and makes the graph look bad. Any ideas what I would need to do to fix this?
I have tried to put the data points this way:
data: [ {x: newDate(2019, 06, 24, 08, 00), y: 24}]
but it still didn't work with the type:time
<canvas id="timechart" width="800" height="400" role="img"></canvas>
<script>
var ctx = document.getElementById('timechart');
var timeFormat = 'MM/DD/YY HH:mm';
function newDate(days) {
return moment().add(days).toDate();
}
function newDateString(days) {
return moment().add(days).format();
}
var timechart = new Chart(ctx, {
type: "line",
data: {
labels: [newDate(0), newDate(1), newDate(2), newDate(3),
newDate(4), newDate(5), newDate(6), newDate(7), newDate(8), newDate(9),
newDate(10), newDate(11),
newDate(12), newDate(13), newDate(14), newDate(15),
newDate(16), newDate(17)],
datasets: [
{
data: [12, 21, 32, 25, 16, 14, 7, 25, 18, 20, 22, 15,
17, 11, 19, 28, 30, 10],
label: 'D Speed',
fill: false,
backgroundColor: 'rgba(102, 147, 188, 1)',
borderColor: 'rgba(102, 147, 188, 1)',
radius: 4,
hoverRadius: 5,
}, {
data: [8, 16, 24, 30, 20, 10, 12, 21, 32, 15, 17, 11,
22, 18, 29, 17, 8],
label: 'U Speed',
fill: false,
backgroundColor: 'rgba(255, 147, 44, 1)',
borderColor: 'rgba(255, 147, 44, 1)',
radius: 4,
hoverRadius: 5,
}
],
},
options: {
title: {
display: true,
},
scales: {
xAxes: [{
display: true,
type: 'time',
}],
yAxis: [{
display: true,
}]
},
}
});
</script>
I expect the x axis labels to show just the MM/DD/YY HH:MM but it is actually not showing the chart at all.
The code you shared worked for me. Make sure that you've included Moment and the non-bundled version of Chart.js in your project. E.g.:
<script src="https://cdn.jsdelivr.net/npm/moment#2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
Also, check your browser's developer console to see if there are any JavaScript errors that can help give more clues as to the problem. You can access in Chrome by hitting F12.
I am creating a full % stacked area chart using Chart.js. However, I cannot find in the documentation how to reverse the order in which the values are shown in the tooltip.
Here is what I get:
As you can see, the top area (in blue) is the bottom one in the tooltip.
My code:
var ctx = document.getElementById("EvolutionBreackdownsChart");
var EvolutionBreackdownsChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March", "April"],
datasets: [{
label:'O',
data: [20, 21, 19, 17, 22, 25, 23, 18, 15, 16, 17, 19, 20],
fill: 'origin',
backgroundColor: 'rgba(255, 148, 31, 0.2)',
borderWidth:0.1,
borderColor: 'rgba(255, 148, 31, 0.55)',
pointRadius:3,
pointBackgroundColor: 'rgba(255, 148, 31, 0.2)',
pointBorderColor: 'rgba(255, 148, 31, 0.55)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'A',
data: [30, 28, 29, 32, 32, 31, 25, 29, 29, 30, 31, 28, 29],
fill: '-1',
backgroundColor:'rgb(255, 148, 31, 0.35)',
borderWidth:0.1,
borderColor: 'rgb(255, 148, 31, 0.75)',
pointRadius:3,
pointBackgroundColor: 'rgb(255, 148, 31, 0.35)',
pointBorderColor: 'rgb(255, 148, 31, 0.75)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'M',
data: [10, 12, 13, 10, 11, 12, 11, 10, 12, 11, 11, 10, 9],
fill: '-1',
backgroundColor:'rgb(255, 148, 31, 0.5)',
borderWidth:0.1,
borderColor: 'rgb(255, 148, 31, 0.9)',
pointRadius:3,
pointBackgroundColor: 'rgb(255, 148, 31, 0.5)',
pointBorderColor: 'rgb(255, 148, 31, 0.9)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'R',
data: [28, 29, 32, 31, 27, 25, 31, 33, 28, 33, 31, 30, 32],
fill: '-1',
backgroundColor:'rgba(255, 148, 31, 0.60)',
borderWidth:0.1,
borderColor: 'rgba(255, 148, 31, 1)',
pointRadius:3,
pointBackgroundColor: 'rgba(255, 148, 31, 0.60)',
pointBorderColor: 'rgba(255, 148, 31, 1)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'B',
data: [12, 10, 7, 10, 8, 7, 10, 10, 16, 10, 10, 13, 10],
fill: '-1',
backgroundColor:'rgba(3, 169, 244, 0.25)',
borderWidth:0.1,
borderColor: 'rgba(3, 169, 244, 1)',
pointRadius:3,
pointBackgroundColor: 'rgba(3, 169, 244, 0.25)',
pointBorderColor: 'rgba(3, 169, 244, 1)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
},],
},
options: {
scales: {
yAxes: [{
stacked:true,
gridLines: {
display:false,
},
ticks: {
beginAtZero:true,
fontColor:'#999999',
fontFamily:"'Source Sans Pro', sans-serif",
fontSize:10,
},
}],
xAxes: [{
ticks:{
fontColor:'#999999',
fontFamily:"'Source Sans Pro', sans-serif",
fontSize:10,
maxTicksLimit: 15,
callback: function(tick) {
var characterLimit = 4;
if (tick.length >= characterLimit) {
return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim();;
}
return tick;
},
},
}]
},
legend: {
display: false,
},
tooltips: {
backgroundColor:'rgba(3, 169, 244, 0.75)',
bodyFontFamily:"'Source Sans Pro', sans-serif",
titleFontStyle:"normal",
bodyFontFamily:"'Source Sans Pro', sans-serif",
displayColors: true,
cornerRadius:0,
intersect:false,
mode: 'x-axis',
callbacks: {
title: function(tooltipItem){
return this._data.labels[tooltipItem[0].index];
}
},
},
}
});
Can you help?
You can reverse the order of tooltip values, using itemSort function, like so ...
tooltips: {
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex;
},
...
}