Echarts show additional info in tooltip - echarts

Question

I am using echarts for a scatter plot. Upon hover of a point, I want to show some more data in the tooltip, such as a date and unique ID - this data is not an axis in the plot. So far I have the following below, however I cannot figure out how to display the extra info
option = {
xAxis: {
type: 'value',
name: 'X axis title',
nameLocation: 'middle',
nameGap: 50,
nameTextStyle: {
fontSize: 12
}
},
yAxis: {
type: 'value',
name: 'Y axis title',
nameLocation: 'middle',
nameGap: 70,
nameTextStyle: {
fontSize: 12
}
},
dataZoom: [{
type: 'inside'
}],
legend: {
orient: 'vertical',
left: 10
},
grid: {
top: 80,
containLabel: true,
},
tooltip: {
trigger: "item"
},
series: [{
name: 'Outliers (Forensic Cases)',
type: 'scatter',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]
]],
}, {
name: 'Inliers (Regular Transaction)',
type: 'scatter',
data: [[172.7, 105.2], [153.4, 42]]
}]
};
;

Answer 1

Thanks for config, it saves time.
The tooltip component has method formatter and you can pass to it function-callback where to make request to addition data store to get and show on tooltip necessary information.
Suppose you have an object that stored additional information that needs to be shown in the tooltip:
var store = {
outliers: ['A', 'B', 'C', 'D', 'E', 'F'],
inliers: ['A', 'B', 'C', 'D', 'E', 'F']
}
Let's add id to the each data series, which will simplify data fetching.
{
id: 'outliers', // <--- this
name: 'Outliers (Forensic Cases)',
...
},
{
id: 'inliers', // <--- this
name: 'Inliers (Regular Transaction)',
...
}
In the callback you will have this default args:
{
$vars: ["seriesName", "name", "value"],
borderColor: undefined,
color: "#c23531",
componentIndex: 0,
componentSubType: "scatter",
componentType: "series",
data: [159.5, 49.2],
dataIndex: 2,
dataType: undefined,
dimensionNames: ["x", "y"],
encode: {
x: [0],
y: [1]
},
marker: "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;\"></span>",
name: "",
seriesId: "outliers",
seriesIndex: 0,
seriesName: "Outliers (Forensic Cases)",
seriesType: "scatter",
value: [circular object Array]
}
Let's make the callback handler for the process series data and shown it on the tooltip:
var callback = (args) => {
var data = store[args.seriesId][args.dataIndex]
return args.marker + ' ' + args.value[1] + '<br />' + args.seriesId + ': ' + data
}
Now you can pass callback to formatter. It's all. See example below:
var myChart = echarts.init(document.getElementById('main'));
var store = {
outliers: ['A', 'B', 'C', 'D', 'E', 'F'],
inliers: ['A', 'B', 'C', 'D', 'E', 'F']
}
var callback = (args) => {
var data = store[args.seriesId][args.dataIndex]
return args.marker + ' ' + args.value[1] + '<br />' + args.seriesId + ': ' + data
}
var option = {
xAxis: {
type: 'value',
name: 'X axis title',
nameLocation: 'middle',
nameGap: 50,
nameTextStyle: {
fontSize: 12
}
},
yAxis: {
type: 'value',
name: 'Y axis title',
nameLocation: 'middle',
nameGap: 70,
nameTextStyle: {
fontSize: 12
}
},
dataZoom: [{
type: 'inside'
}],
legend: {
orient: 'vertical',
left: 10
},
grid: {
top: 80,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: callback,
},
series: [{
id: 'outliers',
name: 'Outliers (Forensic Cases)',
type: 'scatter',
data: [
[161.2, 51.6],
[167.5, 59.0],
[159.5, 49.2],
[157.0, 63.0],
[155.8, 53.6]
],
},
{
id: 'inliers',
name: 'Inliers (Regular Transaction)',
type: 'scatter',
data: [
[172.7, 105.2],
[153.4, 42]
]
}
]
}
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>