apache / apache/echarts

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.

Open
#19,843 4 comments 2 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.