[Bug] how to add tooltip for y-axis label on hover in horizontal bar chart

[kishore-uc]

Version

5.3.0

Link to Minimal Reproduction

how to add tooltip for y-axis label on hover in horizontal bar chart

Steps to Reproduce

[Bug] how to add tooltip for y-axis label on hover in horizontal bar chart

Current Behavior

[Bug]No tooltip for y-axis label on hover in horizontal bar chart

Expected Behavior

tooltip for y-axis label on hover in horizontal bar chart

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[plainheart]

See this demo. It requires ECharts v5.6.0.

[kishore-uc]

thanks for your answer, can you please integrate to this " https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0"

…

On Wed, May 21, 2025 at 4:07 PM Zhongxiang Wang ***@***.***> wrote: *plainheart* left a comment (apache/echarts#20984) <#20984 (comment)> See this demo <https://echarts.apache.org/examples/editor.html?c=bar-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6MMGAAbSCCJIHJcjnxe_GSUNLIAboyuSrxBzm4egaSkeNrAAO5EYBxKQXb2jrB4VEZUhLCiQahJgsJiAIwATAAMPLDNLbB1AKwdABwdAOwddXXDAMxN1gVJFNR0AEaMHLS5JLZ2ANxAA>. It requires ECharts v5.6.0 <https://github.com/apache/echarts/releases/tag/5.6.0>. — Reply to this email directly, view it on GitHub <#20984 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AK5BNZSA4Q224SZZIB4SVY327RJPHAVCNFSM6AAAAAB5SX6CISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOJXGQ3DKMBTGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[plainheart]

Here it is.

[kishore-uc]

yes it works but i have code attached of mine, my code if i use yAxis show tooltip true, primary gets added on tooltip, can you check where i am going wrong? private _chartOptions = { grid: { containLabel: true, left: '15%', // Adjusted for labels right: '10%', top: '5%', bottom: '5%', }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', // Ensures pointer follows bar thickness accurately shadowStyle: { opacity: 0.2 }, // Reduced shadow opacity }, backgroundColor: 'rgba(255, 255, 255, 0.9)', // Clean tooltip appearance textStyle: { color: '#000', fontSize: 12 }, extraCssText: 'z-index: 8;', }, xAxis: { type: 'value', axisLabel: { fontSize: 12, color: '#333' }, splitLine: { lineStyle: { color: '#e0e0e0', type: 'dashed' } }, position: 'top', }, yAxis: { tooltip: { show: true, }, type: 'category', data: [''], axisLabel: { formatter: (_: any, index: number) => { // Function to truncate text to 30 chars with ellipsis const truncate = (text: string): string => { return text.length > 30 ? text.substring(0, 30) + '...' : text; }; if (!this.data[index + 1][3]) { return `{primary|${truncate(this.data[index + 1][0])}}`; } return `{primary|${truncate(this.data[index + 1][0])}}\n\n{secondary|${truncate(this.data[index + 1][3])}}`; }, rich: { primary: { color: '#005C87', fontWeight: 'bold', fontSize: 13, }, secondary: { color: '#667683', fontWeight: 'semibold', fontSize: 14, // does not work as it takes primary font size }, }, }, axisTick: { show: false }, // Remove unnecessary ticks axisLine: { show: false }, // Clean up axis line triggerEvent: true, }, series: [ { data: [''], type: 'bar', barWidth: 40, // Ensure consistent thickness without extra hover padding barCategoryGap: '10%', // Tightens gap between bars label: { show: true, position: 'right', color: '#000', // case count color fontSize: 13, fontWeight: 'bold', }, itemStyle: { color: function (params: { dataIndex: number }) { const colors = [ '#A71042', '#009EBD', '#001A31', '#DD8332', '#005C87', '#ABBDD1', '#D0CFCD', '#F8E00B', '#4B0082', '#B541FC', ]; return colors[params.dataIndex % colors.length]; }, }, emphasis: { focus: 'series', // Keeps hover clean and focused itemStyle: { opacity: 0.8, // Subtle highlight on hover }, }, encode: { x: 'caseCount', y: 'entity' }, }, ], }; could you please check and

…

On Wed, May 21, 2025 at 4:42 PM Zhongxiang Wang ***@***.***> wrote: *plainheart* left a comment (apache/echarts#20984) <#20984 (comment)> Here <https://echarts.apache.org/examples/editor.html?c=dataset-encode0&code=PYBwLglsB2AEC8sDeAoWsAmBDMWDOApmAFzJrqx7ACuATgMYGkDa5FszA5HvcLQZwA0sTlgC2NaGCEiQtYBmr1pAXUFsKzABwBOAHQBmYQFYtAJgCMZ4ZwCyOegAsssADI4wAtRvTNjAdj0LYX9zYwAWG1sIABsAa1gAFQIsTm92X39wvUjYcIsABgNrEQBhRwICQlhS4F5U9Iy_AqDhK39jYxtyyuqAIXkAd2gIL3UMjl09f2EzAotwrpF7MCcXWvq08aaANi1W2H8dBZ2bZIbt9mYLfVPYY61jEs4AeVosaABzAlgAKWoIIwtj4OIU9HdChZHs9XAQJHB_oCxiDmMVprN5lYbAB1LAxaDUMCwAbAYajNIaFTkAC-20-tAgGFISFgvCkWAg0HcACMCDFSGBaNQfrTyAAPACCYogeGZsGg4iYInEkmksFF6AAnlKZcyNGBNSAlZx6DgCJ8-JqhBoAPQ22BYaV4Hl80hkdh2iiDRlgRykLQFS6wT3oYAANwItAAZjFSaROILqNBTZ5OLb7RqKGBgMAYpAQHqJnhHHHYImCEH0J7QJAYHjSDAYprKCXBmWc3mICBYIMKnBfT8YlheTFYDKy0Lk2aMCDPVG-GIPJGABQgACU7oyIdg_DAdDgID0MsSk5TBAwy43AH5YIew3jhbB42mJp7qRp3-hM9nc_nmZmwxlag8XsAtN1DBkCCkeMSwZAAvGBcBia12BiAgoxIERGCkSMUIoMROVIQog0XMUiIKQN9QIMVMK4AAJCBPkcWAAGVeH4GROFcUlWPY5EPXtUCywqSg-NZXNqDEftgHE2NaA0DAIDEKC8CgaBSEo9hOQAJQ-b5CwyXg5JYTgAGIdmMPpTAsTjTIAMTs0oAFEDHCWy7IAER2Cy7IpdhP3VbZCEg2UOA0VAJgNI1425LBaDw9goN4DAlQiiZg0ErBuwHWAACIVSTMBctkyTpNgAANB0nT0EF0DI5UJEKhKt0y7KRNyuQFCUIqSqk9tYAATSqmVatgTV406xRlBfDIAq_cgqWpABuIA> it is. — Reply to this email directly, view it on GitHub <#20984 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AK5BNZWNRPEW7XNTQJNH27D27RNTFAVCNFSM6AAAAAB5SX6CISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOJXGU2TMMRVGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[plainheart]

What version of ECharts are you using? Please make sure it is v5.6.0.

[helgasoft]

yAxis show tooltip true, primary gets added on tooltip

yAxis.axisLabel has formatter and rich,
but yAxis.tooltip has only formatter, so you cannot use 'rich' formatting in tooltip.

[kishore-uc]

version is "" "echarts": "^5.6.0", yAxis: { type: 'category', tooltip: { show: true, }, data: [''], axisLabel: { formatter: (_: any, index: number) => { if (!this.data[index + 1][3]) { return `{primary|${ this.data[index + 1][0] } }`; } return `{primary|${ this.data[index + 1][0] }}\n\n{secondary|${ this.data[index + 1][3] }}`; }, rich: { primary: { color: '#005C87', fontWeight: 'bold', fontSize: 13, }, secondary: { color: '#667683', fontWeight: 'semibold', fontSize: 14, // does not work as it takes primary font size }, }, }, axisTick: { show: false }, // Remove unnecessary ticks axisLine: { show: false }, // Clean up axis line triggerEvent: true, }, here i have added "tooltip: {show: true,},", so on hover the y-axis label tooltip appears, but inside tooltip {primary| } gets added, i dont want that. how to fix it. and also i will be adding "formatter: (_: any, index: number) => { // Function to truncate text to 30 chars with ellipsis const truncate = (text: string): string => { return text.length > 30 ? text.substring(0, 30) + '...' : text; }; if (!this.data[index + 1][3]) { return {primary|${truncate(this.data[index + 1][0])}}; } return {primary|${truncate(this.data[index + 1][0])}}\n\n{secondary|${truncate(this.data[index + 1][3])}}; }," this code but primary adds over tooltip.

…

On Thu, May 22, 2025 at 2:58 AM helgasoft ***@***.***> wrote: *helgasoft* left a comment (apache/echarts#20984) <#20984 (comment)> yAxis show tooltip true, primary gets added on tooltip yAxis.axisLabel <https://echarts.apache.org/en/option.html#yAxis.axisLabel%5D> has *formatter* and *rich*, but yAxis.tooltip <https://echarts.apache.org/en/option.html#yAxis.tooltip> has only *formatter*, so you cannot use 'rich' formatting in tooltip. — Reply to this email directly, view it on GitHub <#20984 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AK5BNZSESFGRC3ZAO2LKXLD27TVZRAVCNFSM6AAAAAB5SX6CISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOJZGI4TCOBZGU> . You are receiving this because you authored the thread.Message ID: ***@***.***>