[UPDATE] The question seems to be solved (see comments). I will update the answer as soon as i am sure about it
I am trying to achieve a weather chart using chartjs library.
The chart will always have the weather date of the first day of the month and in addition to that one value in between (makes 24 values).
I want all "first day of the month" labels to be shown (with the corresponding gridline), the other data point in between should not be shown (or at least with no gridline).
The Problem now, somehow the last (12th) label is not gonna be shown and I have no idea why. The result looks like that:
My javascript code is that
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
"01","","02","","03","","04", "","05","","06","","07","","08","","09","","10","","11", "","12",""
],
datasets: [{
label: 'Temperature [°C]',
data: [
1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6
],
borderColor: "rgb(0, 182, 206)",
pointRadius: 1,
backgroundColor: "rgba(0, 182, 206,0.4)"
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend:{
display:false // Suppress interactive legend
},
scales: {
xAxes: [{
scaleLabel: {
display: false,
labelString: 'Month'
} ,
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (xLabels[i].length == 0){
xLabels[i] = '';
}
});
},
ticks: {
//maxRotation: 0,
//minRotation: 0,
autoSkip: true,
maxTicksLimit: 12
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature [°C]'
},
ticks: {
beginAtZero: true
}
}]
}
}
});
Do you have some ideas?
Related
Just a warning: I am new to chart.js!
I have a couple of horizontal bar charts and it works fine except one issue that I cannot shake off. I have 5 labels in y-axis but the legend on top of the graph only shows one small rectangle in the color of the first (topmost) bar and even that does not display the label itself, followed by list of labels. I thought it would display each label next to small bar same color as in chart.
Unfortunately, this is an intranet app and I cannot provide a link but here is what I have (data is passed to this function from an ajax call):
function drawRespChart(chartLabels, chartData) {
var ctx = $("#rtChart");
console.log("Labels Array: " + chartLabels);
console.log("Data Array: " + chartData);
if (chartRespTime)
chartRespTime.destroy();
var chart = {
labels: chartLabels,
datasets: [
{
label: chartLabels,
backgroundColor: ["#c45850", "#e8c3b9", "#3cba9f", "#8e5ea2", "#3e95cd"],
data: chartData
}
]
};
chartRespTime = new Chart(ctx, {
type: 'horizontalBar',
data: chart,
datalabels: {
anchor: 'end',
align: 'start',
},
options: {
title: {
display: true,
text: 'IDC Database Response Time (mili-seconds)'
},
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Response Time (ms)'
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function (context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
},
maintainAspectRatio: true,
responsive: true,
showInlineValues: true,
centeredInllineValues: true,
tooltipCaretSize: 0
}
});
}
This is what I see in console window:
Labels Array: 0-350,350-700,700-1000,1000-1500
Data Array: 5065,32,27,3
What I see as legend is one rectangle, same color as first bar, followed by list of labels.
It seems that charts.js labels only works when you split the datasets.
Leaving an example.
https://jsfiddle.net/code4mk/1j62ey38/
datasets: [ {
label: 'Result',
fill:false,
data: aDatasets1,
backgroundColor: '#E91E63',
},
{
label: 'Result2',
fill:false,
data: aDatasets2,
backgroundColor: '#E91E93',
}];
I'm currently attempting to use Chart.JS to create a line graph, displaying brightness percentages (0-100%) of an LED over 24H.
I'm trying to configure the chart to have set X and Y axis scales.
I need the X axis to display every hour (0,1,2,3... 21,22,23,24), and the Y axis to display values up to 100, going up by 10 (0,10,20... 90,100). I'm unsure how to get it to work. So far I've tried "unitStepSize: 1" and "min: 00:00" + "max: 24:00" as below, but these do not work in the way I had hoped. How can I get this graph to display correctly? Here's my code:
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'White',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
format: "H:mm",
unit: 'hour',
unitStepSize: '1',
tooltipFormat: "H:mm A",
displayFormats: {
hour: 'H',
min: '00:00',
max: '24:00',
}
}
}]
},
}
});```
under options / scale try something like this: --> see yAxes
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
...
}
I would like to know how to separate the first and last points of the data so that they are not stuck to the limit lines of the graph. I have tried padding the x axis but nothing. My options code for chart.js is this
let dataobj = {
labels: graphDataObj['label'],
datasets: [{
label: graphDataObj['title'],
data: graphDataObj['data'],
pointBackgroundColor: graphDataObj['pointBgColor'],
borderColor: graphDataObj['pointBgColor'],
fill: false,
showLine: false,
pointRadius: 7
}]
}
let optionsobj = {
responsive: true,
scales: {
yAxes: [{
ticks: {
suggestedMin: graphDataObj['suggestedMin'],
suggestedMax: graphDataObj['suggestedMax'],
stepSize: null
}, scaleLabel: {
display: true,
labelString: graphDataObj['yLabel']
},
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: graphDataObj['xLabel'],
}
}]
}
}
Image for the graphic here
example graphic
Thanks!
I have a bar chart which use ChartJS that shows data. Based on the bar chart, I have the data: 15, 2, 0, 11.
I can see all of these data in the bar, except 0. Is there a possibility to start the bar chart on 0, so I can also see the data for the fourth column in the bar chart?
options: {
legend: { display: false },
scales: {
yAxes: [{
display: false,
}],
xAxes: [{
display: true,
}],
},
title: {
display: false,
}
}
After hours of working, finally i found a soulution. There is no chartjs configuration to do it and you have to draw it your self. Let do it in onComplete function
var ctx = document.getElementById("myChart").getContext('2d');
var datasets = [15, 2, 0, 11];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1", "2", "3", "4"],
datasets: [{
label: 'value',
backgroundColor: '#F00',
data: datasets
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
animation: {
onComplete: function() {
var dataSet = myChart.getDatasetMeta(0);
dataSet.data.forEach(elm => {
if (datasets[elm._index] == 0) {
ctx.fillStyle = '#F00';
ctx.fillRect(elm._model.x - elm._view.width / 2, elm._model.y - 1, elm._view.width, 2);
}
})
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas class="canvasChart" id="myChart"></canvas>
You can try beginAtZero:true config option.
options: {
legend: { display: false },
scales: {
yAxes: [{
display: false,
ticks: {
beginAtZero:true
}
}],
xAxes: [{
display: true,
}],
},
title: {
display: false,
}
}
Because your Y-axis values starts from 0 to something. So, if your value is 0 in X-Axis than it would be null and won't show you bar of 0. So, if you want 0 to appear in chart your starting point should be less than the 0.
I believe you said you were using chartsjs. This question already has an answer here.
Try this, chart will start with zero.
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
I am trying to draw a line chart with time x-axis. But chart is giving me this error. I want to print the time in a certain format 'hh:mm:ss' but looks like this format is causing some issue. When i send hardcoded labels the chart is drawn correctly.
Chart.min.js:14 Uncaught TypeError: Cannot read property 'call' of undefined
This is my call stack
This is my code
var timeFormat = 'h:mm:ss a';
function newDate(days) {
//return moment().add(days, 'd').toDate();
return moment().add(days, 'm').format(timeFormat);
}
function DrawTrendTempChart() {
var temp_data_trend = {
labels: [newDate(0), newDate(10), newDate(20), newDate(30), newDate(40), newDate(50), newDate(60)], // Date Objects,
datasets: [{
lineTension: 0,
label: 'Trend',
data: [1, 2, 3, 4, 5, 6, 7],
pointRadius: 2,
backgroundColor: ['transparent'],
borderColor: [OrangeRGB],
borderWidth: liveDataLineWidth,
//fill: false,
//borderDash: [5, 5],
}]
}
var temp_options_trend = {
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: timeFormat,
unit: 'minute',
unitStepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}, ],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
},
ticks: {
autoSkip: false
}
}]
},
legend: { display: true },
tooltips: { enabled: true },
showTooltips: true,
responsive: true,
title: {
display: true,
text: "Trend Chart"
}
}
var ctx = document.getElementById("sensorDataTrend").getContext("2d");
myChart = new Chart(ctx, {
type: 'line',
data: temp_data_trend,
options: temp_options_trend
});
}