This is my options:
xaxis: {
labels: {
show: false
},
crosshairs: {
show: false,
},
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false
}
},
grid: {
show: false,
padding: {
top: -30,
bottom: 0,
left: -10,
right: 0
},
},
I don't know how to remove this whitespace. I have parent div with fixed 300px height.
I tryed to remove xaxis labels, border, ticks, tooltip. But it seems like there is something more.
Can somebody help me with this issue?
The grid padding top and bottom does not help with this.
I just found a solution.
Set chart.sparkline.enabled to false
Related
I'm currently trying to reproduce the chart you can see on https://discordstatus.com/ for the API Response Time.
However I'm unable to always show the nearest label depending on the mouse position on the X axis. I've tried different configurations for interactions (Chart.js Interactions) but fail to get the desired outcome.
Also it would be nice to show a vertical line dependent on the current active point. As well as always show the tooltip at the top left.
Is this possible with the default chart.js library or do i have to add a plugin or some own modifications?
Here is my current configuration:
const data = {
datasets: [{
label: 'RTT',
backgroundColor: '#C00122',
borderColor: '#C00122',
borderWidth: 2,
}]
};
const config = {
type: 'line',
data: data,
options: {
animation: false,
maintainAspectRatio: false,
pasing: false,
plugins: {
legend: false
},
elements: {
point: {
radius: 1
}
},
scales: {
x: {
type: 'time',
time: {
unit: 'second',
displayFormats: {
'second': 'H:mm:ss',
}
},
ticks: {
minRotation: 0,
maxRotation: 0,
maxTicksLimit: 5
}
},
y: {
min: 0,
ticks: {
stepSize: 10
}
}
},
hover: {
mode: 'index'
}
}
};
EDIT: My datasets are filled dynamically as described here: Updating Charts
I have a requirement where on hover i need to show one horizontal line like in below fiddle.
but tool-tip is getting disappeared once on hover horizontal line is drawn.
Can anyone help how i can get tool-tip along with horizontal line.
Please note in below fiddle we have issue on hover it takes time but in my actual project hover is working fine , i just have issue that after hover tool-tip does not work after some time.
https://jsfiddle.net/h8ow63be/
var option = {
legend: false,
title: {
display: true,
},
onHover: function(evt) {
var item = myLineChart.getElementAtEvent(evt);
if (item.length) {
updateChart(data.datasets[0].data[item[0]._index].y)
}
},
animation: {
duration: 0
},
annotation: {
annotations: lines
},
scales: {
xAxes: [{
id: 'x-axis',
type: 'linear',
position: 'bottom',
ticks: {
max: 12,
min: 1,
stepSize: 1
}
}],
yAxes: [{
id: 'y-axis',
type: 'linear',
}],
}
};
I am using ChartJS but I can't figure out how to get rid of the white box in the tooltip. What setting/option will set remove the border/white outline or at least let me set the color?
Thank you!
data_sets.push({
data: date_list["data_counts"],
label: date_list["name"],
fill: true,
backgroundColor: transparentizeColor,
borderColor: newColor,
pointBackgroundColor: newColor,
pointBorderColor: newColor,
})
my_chart = new Chart(ctx, {
type: 'line',
data: {
labels: data["date_labels"],
datasets: data_sets
},
options: {
tooltips: {
intersect: false,
},
elements: {
point: {
radius: 0
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
precision: 0,
suggestedMax: 3,
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
}
}, );
There's indeed no option for this, but you can workaround it.
The color of the white outline is controlled by the multiKeyBackground tooltip option. By setting this to be fully transparent (#00000000 or rgba(0, 0, 0, 0)), and disabling the border on the dataset, it'll at least look better (though still not perfect).
As of this writing (Chart.js 3.9.1), control over the display properties of the tooltip legend items can be done using tooltip callbacks. There are a few examples in the docs.
tooltip: {
intersect: false,
mode: 'index',
callbacks:{
labelColor: function(context) {
return {
borderColor: 'rgba(0, 150, 0)',
backgroundColor: 'rgba(0, 150, 0)',
borderWidth: 3,
borderRadius: 2,
}
},
}
},
For example, like the legend item Current is here:
Callbacks are an extremely powerful way to customize charts in Charts.js
I remember I once had this problem as well, but I can't remember an answer, neither I found one after I searched for it...
The only solution I have is using an custom tooltip.
You can alter this JSFiddle I found. They use a circle with border-radius: 5px in the css-class .chartjs-tooltip-key. Remove this line and you have a rectangle.
Either take the whole custom tooltip or use the parts you need.
I'm trying to fit line charts into some very small table cells:
As you can see, the rightmost point's tooltip gets slightly cut off. This is the only one that causes a problem.
The easiest fix would probably be to put a higher z-index on the tooltip, but I've googled it and I don't think that's possible. Instead, is it possible to make the tooltip display on the left side of the point instead of below it? That's what the second to last point does:
Here are my chart options:
public lineChartOptions:any = {
responsive: false,
tooltips: {
yPadding: 2,
xPadding: 2,
caretPadding: 5,
caretSize: 3,
displayColors: false,
},
layout: {
padding: {
left: 5,
right: 5,
top: 5,
bottom: 5,
}
},
scales: {
yAxes: [{
ticks: {
//stepSize: 50,
max: 150,
beginAtZero: true,
display: true,
}
}],
xAxes: [{
display: false,
}]
}
};
Any help is appreciated.
Problem is that when I set my x-axis labels vertical they gets truncated, tried to set more height -> then chart changes size but labels are still truncated.
Is there a way/hack to set x-axis labels to not truncate on overflow.
Also there is strange behavior some of x-axis labels has some padding
-> I put red line below x-axis labels and there u can see that labels has different start positions
Thanks.
ColumnChart properties:
var options = {
title: 'title',
strictFirstColumnType: true,
lineWidth: 1,
isStacked: true,
legend: { position: 'bottom', alignment: 'left', textStyle: { color: 'black', fontSize: 15, italic: false, bold: true }, maxLines: 5 },
vAxes: { 1: { title: 'y1TitleText'e, titleTextStyle: { italic: false, bold: true }, minValue:0, gridlines: { count: 6 } } },
hAxis: {slantedText: true, slantedTextAngle: 90, title: 'titleText'},
fontSize: 15,
colors: colors
};
Diagram output :
Output image