-
-
Couldn't load subscription status.
- Fork 1.4k
Closed
Description
When I create a line chart and send in yaxis max value of 100 and data points with only 100 % values I get a bug where I can't hover and see the labels on the markers.
When I change to a data value that is <100 or set the yaxis max value to >100 I can see the labels again when hovering.
I'm using the latest version 3.11.0 and React.
let series = [],
labels = ['test1', 'test2', 'test3'];
labels.forEach(label => {
let data = [];
for(let i = 0; i <= 24; i++) {
let d = new Date();
d.setHours(d.getHours() - i);
data.push({
x: d,
y: 100
});
}
series.push({
name: label,
data: data
});
});
chartData = {
options: {
chart: {
toolbar: {
show: true,
tools: {
download: false,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true
},
autoSelected: 'zoom'
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 3
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
}
},
tooltip: {
x: {
format: 'yyyy-MM-dd HH:mm'
},
},
markers: {
size: 2,
colors: undefined,
strokeColors: undefined,
strokeWidth: 0
},
xaxis: {
type: 'datetime',
labels: {
show: true,
hideOverlappingLabels: true,
showDuplicates: false
},
axisTicks: {
show: false
},
tooltip: {
enabled: false
}
},
yaxis: {
decimalsInFloat: 0,
tickAmount: 5,
min: 0,
max: 100,
labels: {
formatter: (value) => {
if (!value) {
return 'N/A';
}
return value + '%'
}
}
}
},
series: series
}
<Chart options={ chartData.options } series={ chartData.series } type="line" width="100%" height="300px" />
Let me know if you need any more info to reproduce this issue.
Metadata
Metadata
Assignees
Labels
No labels