I have a bar chart, which is autoSkipping every second xAxes labels. I need to show all labels, however setting AutoSkip: False is having no effect.
Below is my code, I have removed some extra datasets from it.
var myChart2 = new Chart(document.getElementById("ch2"), {
type: 'bar',
data: {
datasets: [
{
label: 'Budget',
data: [<data here>]
}
]
},
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return '$' + tooltipItem.yLabel;
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return '$' + (value >= 1000000 ? value/1000000+'M' : value);
}
},
stacked: true
}],
xAxes: [{
type: "time",
ticks: {
autoSkip: false // Not working
},
time: {
unit: 'month',
format: 'DD MMM YYYY',
tooltipFormat: 'MMM YYYY',
displayFormats: {
month: 'MMM'
}
},
offset: true,
gridLines: {
display: false,
offsetGridLines: true
}
}]
}
}
});
In my case, I needed to set source: date. You will get all the date steps on xAxi. By the way, try source: auto it'll try set optimal count of steps (not all). Check here https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source
Related
I am creating charts using chartjs library. Everything works fine but there is no space between title and bar. I am using below code, rest is fine but there is no gap.
below is my code
I am creating charts using chartjs library. Everything works fine but there is no space between title and bar. I am using below code, rest is fine but there is no gap.
document.addEventListener("DOMContentLoaded", function() {
var patternSize = 20;
new Chart(document.getElementById("chart-3"), {
type: "bar",
data: {
labels: ["3.2.2","3.3.3b","3.5.3"],
datasets: [{
label: "3.2.2",
backgroundColor: [
pattern.draw('line', "#F1C40F ", undefined, patternSize)
],
data: [0,50,0],
}
]
},
options: {
indexAxis: 'y',
maintainAspectRatio: false,
scales: {
yAxes: [{
gridLines: {
display: true
},
stacked: false,
ticks: {
stepSize: 10,
callback: function(value, index, ticks) {
return value + '%';
}
},
scaleLabel: {
display: false,
labelString: 'Progress'
}
}],
xAxes: [{
stacked: false,
scaleLabel: {
display: false,
labelString: 'Tasks',
}
}]
},
}
});
});
I am plotting data on a graph with chartjs. It used to work but I don't know why I am continuously getting uncaught exception: 0 and 1587533402000 are too far apart with stepSize of 1 hour, although neither 0 nor 1587533402000 are part of the data I plot.
Here is how I plot the graph :
var chart_temperature = new Chart(ctx_temperature, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: timeXValues,
fill: false, // no inner color
datasets: [{
label: 'Temperature',
borderColor: 'rgb(255, 99, 132)',
data: temperatureData
}]
},
// Configuration options go here
options: {
responsive: true,
layout: {
padding: {
bottom: 50
}
},
elements: {
point: {
radius: 0 // don't show points
},
line: {
fill: false
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'DD/MM/YYYY HH:mm'
}
},
ticks: {
beginAtZero: false // tried true, and also removed all this as it used to be
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'T°C'
}
}]
},
showLines: true, // the points will be connected
// Optimization
animation: {
duration: 0 // general animation time
},
hover: {
animationDuration: 0 // duration of animations when hovering an item
},
responsiveAnimationDuration: 0 // animation duration after a resize
}
});
Why is chartjs using 0 whereas the chart is not starting at 0 ? Where should I look at ?
Any help appreciated :-)
Edit :
Commenting the following line (in scales.xAxes) makes the chart displayed :
// type: 'time',
But the X Axis becomes then useless since timestamps are displayed.
A genius idea finally spurted! Searching against are too far apart with stepSize in chartjs git repository showed that time scale min option was wrongly set to 0.
Adding these min max to time option of xAxes solved the issue.
And even as time min max options are deprecated, ticks.min and ticks.max should be used:
ticks: {
min: startTimestamp,
max: endTimestamp
}
For me, I needed to update my type time to "minute" instead of "second".
xAxes: [ {
type: 'time',
time: {
unit: 'minute'
},
In my case, that because the data from x is not 'int' but 'string'.
data from Backend:
data: [{
x: "1626414792000", //1626414792000
y: 2
}, {
x: 1626414873000, // 14:00:00
y: 3
}, {
x: 1626415500000, // 13:00:00
y: 5
}]
}],
Then, I parse x data before chart.js use it.
My full code:
var obj = {
type: 'line',
data: {
datasets: [{
label: 'First dataset',
data: [{
x: "1626414792000",
y: 2
}, {
x: 1626414873000,
y: 3
}, {
x: 1626415500000,
y: 5
}]
}],
},
options: {
title: {
text: 'Chart',
display: true,
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
/* parsing x data before chart.js use it */
parser: function(dt){
console.log(dt)
return parseInt(dt);
}
}
}]
}
}
}
In my case, the issue happened when zooming.
It was caused by wrong properties of the zoom plugin option used with a chart type 'time'. The following works options works fine:
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
},
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD YYYY',
},
}],
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy',
}
}
}
}
I want to display points in the line chart of chart.js, however, points one first and the last index at x-axis don't show up completely as shown in the image
How can I increase the gap between the first and last values of x-axis from the y-axis. Here is my code for the chart
var config = {
type: 'line',
data: {
labels: ['1809_1970', '1971_1975', '1976_1980', '1981_1985', '1986_1990', '1991_1995', '1996_2000','2001_2005','2006_2010','2011_2012','2013_2015'],
datasets: [d1,d2,d3]
},
options: {
responsive: true,
title: {
display: true,
text: 'points chart',
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].cui[tooltipItem.xLabel] || '';
return 'CUI'+' :: '+label ;
},
afterLabel: function(tooltipItem, data) {
var cui_name = data.datasets[tooltipItem.datasetIndex].cui_name[tooltipItem.xLabel] || '';
return ['NAME'+' :: '+cui_name];
}
}
},
hover: {
mode: 'index',
intersect: true
},
pan: {
enabled: true,
mode: 'y'
},
zoom: {
enabled: true,
mode: 'y',
speed: 0.025
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time Frame'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Score'
}
}]
}
}
};
I needed to accomplish the same thing, and I was able to get the desired result bby adding offset: true to the xAxes options.
xAxes: [{
offset: true, // <-- This right here
display: true,
scaleLabel: {
display: true,
labelString: 'Time Frame'
}
}],
I am using chart js for showing top 3 sold products in last week.
I want to show product name in tooltip for every bar which has obviously different products.
Here is my code :
function productChart() {
var data = {
labels: productHistoryDates,
datasets: [{
label: 'Product 1',
data: productHistoryProducts1,
backgroundColor: "#26B99A"
},
{
label: 'Product 2',
data: productHistoryProducts2,
backgroundColor: "#03586A",
},
{
label: 'Product 3',
data: productHistoryProducts3,
backgroundColor: "#03226A",
}]
};
var ctx = document.getElementById("productChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
tooltips: {
enabled: true,
mode: 'single',
},
scales: {
yAxes: [{
gridLines: {
display: true
}
}],
xAxes: [{
gridLines: {
display: true
},
barPercentage: 0.8
}]
}
}
});
}
I am getting output like this.
But instead of product 1 label I want product name for that particular bar how can I achieve that ?
I solved it.
by passing an array to the label in data. And rest of the code is as below.
function productChart() {
var data = {
labels: productHistoryDates,
datasets: [{
label: productHistoryProducts1.name,
data: productHistoryProducts1.quantity,
backgroundColor: "#26B99A"
},
{
label: productHistoryProducts2.name,
data: productHistoryProducts2.quantity,
backgroundColor: "#03586A",
},
{
label: productHistoryProducts3.name,
data: productHistoryProducts3.quantity,
backgroundColor: "#03226A",
}]
};
var ctx = document.getElementById("productChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var tooltip = data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
return tooltip;
}
}
},
scales: {
yAxes: [{
gridLines: {
display: true
}
}],
xAxes: [{
gridLines: {
display: true
},
ticks: { mirror: true },
barPercentage: 0.8
}]
}
}
});
}
I'm trying to refactor an old Flex app using Chart.js and I would like to replicate this linear/log axis. Notice the clean minimal spacing on the yAxis.
Here is my Chart.js code.
var mtbsoData = [];
var mtbsoLables = [];
for (let i = 0; i <= 10; i++) {
mtbsoData.push(i * i * i * i);
mtbsoLables.push(i.toString());
}
var ctxMtbso = document.getElementById("chartMtbso").getContext('2d');
var chartMtbso = new Chart(ctxMtbso, {
type: 'bar',
data: {
labels: mtbsoLables,
datasets: [{
label: 'label',
data: mtbsoData,
backgroundColor: 'rgba(0, 0, 255, .6)',
borderColor: 'rgba(0, 0, 255, 1)',
borderWidth: 1
}]
},
options: {
title: {
text: 'Title',
display: true,
fontSize: 24
},
scales: {
xAxes: [{
display: true,
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'X Axis'
}
}],
yAxes: [{
type: 'logarithmic',
ticks: {
min: 0,
max: 1000,
callback: function (value, index, values) {
return value + ' years';
}
},
scaleLabel: {
display: true,
labelString: 'Y Axis'
}
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.yLabel.toFixed(2);
return label;
}
}
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chartMtbso"></canvas>
Here's a screenshot. Notice the crowded ticks on the yAxis.
It seems from the documentation that the only ticks properties that you can apply are the "min" and "max" properties.
Can anybody suggest a solution?
I fixed it.
Modify the yAxes callback as shown:
yAxes: [{
type: 'logarithmic',
ticks: {
autoSkip: true,
min: 0,
callback: function (value, index, values) {
if( value==10 || value==100 || value==1000 || value==10000 || value==100000 || value==1000000){
return value + ' years';
}
}
},
scaleLabel: {
display: true,
labelString: 'Mean Time Between Stock-Out'
}
}]
Then you only return a tick if the value is a power of ten.