Tooltip formatter for multiple y-axis #9618
Description
- I am using English in this issue. 在这个 Issue 中我使用了英文（强烈建议）。
General Questions
- Required: I have read the document and examples and tried to solve it by myself. （必填）我读过了文档和教程，并且曾试图自己解决问题。
- Required: I have searched for similar issues and that didn't help. （必填）我搜索过 issue 但是没有帮助。
- Required: I have tried with the latest version of ECharts and still have this problem. （必填）我试过最新版本的 ECharts，还是存在这个问题。
In this issue, I have provided information with: 在这个 issue 中我提供了以下信息：
- Required: issue type；（必填）issue 类型
- Required: one sentence description in issue details；（必填）一句话的问题描述
- Required: demo；（必填）能反映问题的例子（如果你想提问或报 bug）
- Required: ECharts version；ECharts 版本
Issue Type
- I have a question to ask about how to use ECharts to ...；我想提问如何使用 ECharts 实现某功能
- I have a bug to report；我想要报 bug
- I have a feature to request, e.g.: I'd like a new feature that ...；我需要一个新功能
- I have a feature to enhance, e.g.: The current feature should be improved in the way that ...；我希望改进某个功能
- There's something wrong with the documents；文档有些问题
- Others, or I'm not sure which issue types to choose here；其他，或我不知道应该选什么类型
Issue Details
I have multiple Y axis with different tooltip formatters. And I would like to know in the tooltip callback for which Y axis the data refers to.
Expected Behavior
I would like to be able to format data that correspond to the first y axis using a different formatter than data that correspond to the second y axis. E.g. in the screenshot below the first y axis has data that should be formatted with 10% for example and in the second y axis has data that should be formatted with 0.5 for example.
Current Behavior
In the params returned by the tooltip.formatter when using a callback function, there is no y axis index returned. You can see the params currently returned as the x object in the screenshot below.
You can see the chart configuration (without the data) below. Note the different yAxisIndex (0 and 1) in the series part.
{
"options" : {
"tooltip" : {
"trigger" : "axis",
"formatter" : [
"x",
"xf=month(MMM YYYY)",
"yf=decimal({\"output\":\"percent\", \"average\":true, \"mantissa\":0, \"optionalMantissa\":true})",
"debugger;var z = []; for (var i=0; i<x.length; i++) if (x[i].data[1]) z.push(x[i]); z.sort(function(a,b){return b.data[1]-a.data[1];});var s = '<div class=\"echarts-tooltip\">'+'<b>'+xf(x[0].data[0])+'<\/b><br/><table>';var cols = Math.min(2,Math.ceil(z.length/20));var rows = Math.ceil(z.length/cols);for (var i=0; i<rows; i++) { s += '<tr>'; for (var k=0; k<cols; k++) { var index = i*cols+k;if (index<z.length && z[index]) { if (k>0) s+= '<td> <\/td>'; s+= '<td>' + z[index].marker + ' ' + z[index].seriesName + '<\/td><td align=\"right\"> ' + yf(z[index].data[1]) +'<\/td>'; } } s += '<\/tr>';}s += '<\/table>';return s;"
],
"textStyle" : {
"fontFamily" : "notosans,'Helvetica Neue',Helvetica,Arial,sans-serif"
},
"show" : true
},
"legend" : {
"textStyle" : {
"fontSize" : 13,
"fontFamily" : "notosans,'Helvetica Neue',Helvetica,Arial,sans-serif"
},
"show" : true
},
"grid" : {
"containLabel" : true,
"left" : 35,
"right" : 30,
"bottom" : 4
},
"xAxis" : [
{
"type" : "value",
"axisLabel" : {
"formatter" : "year(YYYY)"
},
"splitLine" : {
"lineStyle" : {
"type" : "dashed"
}
},
"max" : "dataMax",
"scale" : true,
"offset" : 0
}
],
"yAxis" : [
{
"show" : true,
"type" : "value",
"name" : "Volatility",
"axisLabel" : {
"formatter" : "decimal({\"output\":\"percent\", \"average\":true, \"mantissa\":0, \"optionalMantissa\":true})"
},
"splitLine" : {
"lineStyle" : {
"type" : "dashed"
}
},
"offset" : 0,
"nameLocation" : "middle",
"nameTextStyle" : {
"padding" : 35
}
},
{
"show" : true,
"type" : "value",
"name" : "Auto-Correlation",
"axisLabel" : {
"formatter" : "decimal({\"output\":\"number\", \"average\":true, \"mantissa\":2, \"optionalMantissa\":false})"
},
"splitLine" : {
"lineStyle" : {
"type" : "dashed"
}
},
"offset" : 0,
"nameLocation" : "middle",
"nameRotate" : -90,
"nameTextStyle" : {
"padding" : 25
}
}
],
"series" : [
{
"smooth" : false,
"lineStyle" : {
"color" : "#ec853f",
"width" : 1
},
"legendHoverLink" : true,
"yAxisIndex" : 0,
"name" : "Residual Volatility",
"type" : "line",
"itemStyle" : {
"normal" : {
"color" : "#ec853f"
}
},
"symbol" : "circle",
"showAllSymbol" : false,
"showSymbol" : false,
"data" : [
]
},
{
"smooth" : false,
"lineStyle" : {
"color" : "#3d90c0",
"width" : 1
},
"legendHoverLink" : true,
"yAxisIndex" : 1,
"name" : "Auto-Correlation",
"type" : "line",
"itemStyle" : {
"normal" : {
"color" : "#3d90c0"
}
},
"symbol" : "circle",
"showAllSymbol" : false,
"showSymbol" : false,
"data" : [
]
}
]
}
}
Online Example
Topics
- Legend
- Tooltip
- Event
- Performance
- SVG
- Map
- ECharts GL
- Third-party libraries, e.g.: Vue.js, React
Anything Else We Need to Know
I found this part of the code that I think will be helpful in implementing this feature
https://github.com/apache/incubator-echarts/blob/b4ce0dbfa1d8646b79bfc5caf86429dd4b59e48f/src/component/tooltip/TooltipView.js#L401
Environment
-
ECharts version；ECharts 版本: v4.2.0.rc2
-
[] It happens only on certain browsers or operating systems. 对于特定浏览器或操作系统才会出现的问题，请提供相应环境信息：{BROWSER_VERSION_OR_OS_INFORMATION_HERE}