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?
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 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 have a bubble Chart and I am passing the values for plotting the charts.
The bubble Chart Automatically calculates the Labels for the X-Axis but I want to set it or hardcode it rather than bubble Chart doing it.
this.chart = new Chart(htmlRef, {
type: 'bubble',
data: {
// labels: ["0", "60", "120", "180", "240", "300"],
datasets: [
{
type:'line',
label: 'CPU Usage',
//data: [10,20],
data: [{x:0,y:5,r:5},{x:10,y:20},{x:15,y:30},{x:25,y:40},{x:55,y:30},{x:80,y:40}],
borderColor: '#4333FF',
backgroundColor: '#3398FF',
fill: true,
borderWidth: 2
}
]
},
options: {
tooltips:{
callbacks:{
label:function(tooltip){
console.log(tooltip);
return ("CPU Utilization : "+tooltip.yLabel);
}
}
},
legend: {
display: true,
position: "right"
},
scales: {
xAxes: [
{
display: true,
gridLines: {
lineWidth: 2,
drawBorder: true
]
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [
{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Utilization'
},
ticks: {
min: 0,
max: 100,
// forces step size to be 5 units
stepSize: 30
}
}
]
}
}
})
I expect to set Labels myself like it should be [0,30,60,90,120 ] or if i want to change it on click of button , it should change to [0,60,120,180,240,300].
At any point in time, I can update the Labels in X-Axis.
I have the following graph and I want to remove the gap between each of the bars.
I've tried everything I can think of to get rid of the gap. barPercentage & categoryPercentage are both set to 1.0. I've tried playing with the border width, but that doesn't seem to have any effect. I want each bar to be right next to each with no spacing.
Any ideas on how to accomplish this?
Side Question: The right border of the graph isn't drawing for some reason even though I have a padding set. Any ideas how to fix this too?
options: {
layout: {
padding: 10
},
tooltips: {
mode: 'index'
},
scales: {
xAxes: [{
stacked: true,
ticks: {
display: false
},
barPercentage: 1.0,
categoryPercentage: 1.0,
gridLines: {
}
}],
yAxes: [{
// stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}