apache
How to get the height of the bar in a bar chart or the width of the column in a column chart for the each individual data bar point in the label-formatter callback.
Version
5..5.0
Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?c=bar-waterfall
Steps to Reproduce
I want the width/height of the column or bar chart for each data bar based on that width or height should be known in the label-formatter callback. Based on this we need to show the user-selected icon size with respect to width or height of the individual bar
For example, the formula is iconSize = height or width * icon size in percentage the user selected. EX: Arrow Size = 100 pixels * 50% = 50 pixels (here 100 is with or height of the bar and 50 is the user-selected icon size percentage based on bar with or height that icon souls )
Example echart options like:
option = {
title: {
text: 'Waterfall Chart',
subtext: 'Living Expenses in Shenzhen'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '
' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: [0, 1700, 1400, 1200, 300, 0]
},
{
name: 'Life Cost',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'inside'
},
data: [2900, 1200, 300, 200, 900, 300]
}
]
};
Current Behavior
NA
Expected Behavior
In the label formatter I want yo know the width or height of the individual bar.
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
we need to show the user-selected icon
Reproduction code does not have any icon. There is no explanation on where and how you want this icon included.
@helgasoft I have a similar use case. I want to hide the label in case the bar height is less than line height of label text. Is there a way to do this?
