I see that an array can be used to create multiline labels in chartjs.
Chart.js and long labels
I want a multiline scaleLabel. Currently the array displays the result on one line.
Any help is greatly appreciated.
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: [[firstCategory + ': ' + avg1], [ secondCategory + ': ' + avg2]],
fontSize: 20
}
}],
yAxes: [{
stacked: true
}]
}
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',
}
}]
},
}
});
});
Can you show me how I can skip data in a period of time in Chartjs?
e.g I have data from 10->11h30 am and 1h -> 2h pm. I built the chart in time type but I want to skip/remove the line from 11h30->1h or 2hpm -> 10h.
options = {
responsive: true,
title: {
display: true,
text: 'Chart.js Time Point Data'
},
scales: {
xAxes: [{
type: 'time',
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
},
},
}],
yAxes: [{
stacked: true,
display: true,
scaleLabel: {
display: true,
labelString: 'value'
},
}]
},
};
Issue
Expecting
Thanks
Well, Chart.JS will show whatever labels and data contain. Therefore you can create a function to remove a certain range.
Here is a sample with a line chart: https://codepen.io/adelriosantiago/pen/xxRGVPW?editors=0010
The function rangeWithSkips will basically filter the input array between startSkip and endSkip. Later in the code you select the new range with:
data: {
labels: rangeWithSkips(3, 10).labels, // Pick the starting and end range here
datasets: [
{
label: "Volume",
data: rangeWithSkips(3, 10).data // Pick the starting and end range here too
}
]
}
Here is an updated version with that does exactly the same with a 2 inputs: https://codepen.io/adelriosantiago/pen/yLVNOGX?editors=1011
I have strange problem trying to display labels for X-axis and Y-axis.
I check the same code for my charts in CodeSandbox, it works fine. But in my project it doesn't work...I have empty areas instead text labels.
I have several chunks of options for different types of charts. In options for showing labels I have:
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: initialLabels.y_label,
},
ticks: {
beginAtZero: true,
},
},
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: initialLabels.x_label,
},
ticks: {
beginAtZero: true,
},
},
],
}
I logged initialLabels.x_label and initialLabels.y_label, its OK! What type of problem it can be?
I am trying to remove the border of the Chart without removing the labels ticks
I have searched for settings to do this however found none as the 'Display: false' will hide everything.
The chart I am using can be seen here:
https://codepen.io/paufar/pen/VOpZGQ
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
display: false
}],
xAxes: [{
gridLines: {
display:false
}
}]
}
}
Solved by using:
gridLines: { drawBorder: false }
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'
}
}],