I got an issue with showing hover tooltips with ECharts line graph when all input values of the graph are null.
The use case is a graph that might have some null/undefined values at certain points in time. For normal values, the graph would show the tooltip as usual. Whenever the value of the graph is null or undefined, I want the graph still show the hover tooltip but with custom format, for instance, 'N/A'.
The example code snippet is a simple EChart configuration that I took from EChart line graph examples and change the input data to null.
const container = document.getElementById("main");
const chart = echarts.init(container);
const options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
overflow: "break"
}
}
},
xAxis: {
type: "category",
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [
{
type: "value",
},
],
series: [
{
type: "line",
data: [null, null, null, null, null, null, null],
}
]
};
chart.setOption(options, true);#main {
width: 600px;
height: 200px;
}<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.0/echarts.min.js"></script>
<div id="main"></div>
</body>
</html>Unfortunately, ECharts does not show any tooltip when all input values are null (or undefined). It will show only when at least one of the input is not null nor undefined.
How can I force ECharts to show the tooltip regardless so that I can show the custom format hover?
MWE with all null values: https://codepen.io/htr3n/pen/bGRvyJJ
MWE with at least one non-null value: https://codepen.io/htr3n/pen/JjJLQYr
This is actually a bug in ECharts 5.2 and previous versions. I opened a ticket with the ECharts team and they will fix and release the fix in v5.3.0.
Relevant bug ticket: