[Question] How to create a Volume Profile (Horizontal Volume Bars) right-aligned
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
6.0.0
### Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?c=line-smooth&code=LYTwwgFghgTgLgOgM4FM4HkAOcCWB7AOwAoBvAKAAIqKAiOPPAGwCM8APGgLgvOr9qQQ8Ady4UAZlEapK1AL4AaWVRoBzGDgAmYgNrL-vfkZqMU4uGIAMSo8Y2qIF7gA5r-27XqYrNj9RqscPTAVu7yvkaGfrSm5mI0UACu9DQRfjT2jj5hxsJacBBirmkedHje3G7RKoHB2dW0AMaEcFA4BAAyUMwojGKS0ig5FHL6ALppCWw4SAAKeO1wKDBiUfwm7QDWusN8aw00bACC00gAkgSaKBzcCYx9u_LDY_qK-mVMuBU8w3T2qst4lBTjRXpNmDBEoJVr8QCcZhcrjdaFI-iV_BCoRAOlsgfdUr88Ml0OIAEKQ6Hcfa2GjNRh4GBHRiYaBWBAARmGoz4bz4h3hSB2HmpxjgIEwKHijSgS1UDJABIOwJmOIIkqpj2MghEYjgkKGDV51RoSEwjBwcFV6p-DT52tE3AGMkN6OMyqQABUcI1thrbf57f0pM7qkbojRNDKoEL_bQAEyWOMAVgAtOzLGn2R7LM5OABmJOcJMATgQlnLAGpy5xy4rYzQE8m0xn2VnLMX84WS2XK9Xa670o3U-nMx7052i6Xy5Yq5Ya5Y6_6G4nhy2s638wA2ThxvM9md9hcD0pD5uj9lxrecAAsAHZ97P54vbcumyPW2O8_nb5xWw_D8-Bynu-67Xt-nb_nO_aauswFrmOhZ5j-d6QU-x40nB57bnmuYFqh0GxvGK5nh-7I_jhk74QuMETDBagaJoiLXKEHjctQtF8nCILcHowp0WKErxAAblIiSSuhKhINKpi6vqEkCGaFpWjChEmkIDoSMGBqhvJUwqt0vQqfWgaOlpMFsUYYYGPx4rWjQImMGJgE0lJUjWnqYm6aa5qWu01oiukJmaYM5m6e6XQ9H0frGepQYhS6dHhX5RlLkFTradEVmlO6Xo-ilL5pWZCUHJgeBIBa-AEPEmQWLpwDtCxtgWRQHH-JGrQAFoMCEPHDAFfICXZ7TlVcznGMcpxMcivGxlUsacg0LyseMkyoBoKCCr1fEHAQUDAHZABiUCbCgFAACJRmN6yDfE5pqlddogMArBRbQBCEOJdHtdGW2xjNhEqJhH45hO3bTo-BEA1Q7IIHG7JJkmlibpuebFgWriWOym4wXwrX-v9AOvquo7tqDU69lBR447YMNw0m17OJuzjFu2m4I9exbXtTVB47aBOqUD65zgWlHgwB8keLT8N3nGxYs-yLPFkzcbcy1EvUPz9aC2O7JXruVEPdUUv0yjrNM3meZI8Wqu8w0mtLtrF5XihYuU4b0TG7e0tJlj5Zy8Wzg2-rVD2y-jtfkhv4w67aGq3wxvOHGzjOEh6a3kmcYq4RtvVKHQHESBY5gZHeEx5DUMJ-yDM5pYt6WNeu7Y9nwcUHnxqO4hyH3mXVNQ9DsPw7ezgZ84155ted6blzzeq234aO9huFJgbLfxwPSa3rexb06jDMlknQez3H_iO-RuZgxTsd9xQnt3q4nPb5zgfZzRukTQilzMZUulcR_SKNZZAc_V_C7X2vEAAakwRIYDdI3VuMwWA7taC_3OJ_ZE7I34CimvUY030Yz-mvPXDk9dE67mZhbAOLdx7OAQBzTGcYt5xk3HDLGLdM6llvAmTGqM67XmRpuFu8NSz71rmQ5GKdrxUNvNeBAeYyLljkUjMeCNBGow5MnMeWMM6WxwlQ9kND0wFk3DmBG28G4t23nuDmxiWZjxzMYpMFjl5s0ToQpM49x7JmcC3Yxm5aGbyYV7Zwm8UbW0WlycYZA5AAEoyCyFAJAWAiBNAzEwDKRoEAjiNFwIQUg-hBrcAAOSYkEIU3w-hYAoCgEgX6exhglIgB6WyRS7ooAAJplOGM0BkmgABKUACAAh4sbOMCgb7r03DnKgKCprfzCFZVqMSADcQA
### Steps to Reproduce
I'm trying to create a financial chart using ECharts where the main display is a price line graph, and on the right, I have a Volume Profile (horizontal bars showing volume distribution by price level).
I am struggling to map the volume data to a separate, right-aligned axis while ensuring it shares the price scale (Y-axis) with the main line chart.
### Current Behavior
this is what i achieve so far:
### Expected Behavior
but i would like to create chart like this.
How should I modify the grid, xAxis, yAxis, and series configuration to achieve a Volume Profile display where:
- The volume bars are plotted horizontally (like a bar chart where categories are price levels).
- The volume bars are contained in a separate, fixed-width area on the right side of the chart.
- The vertical alignment (Y-axis) of the volume bars is synchronized with the price Y-axis of the main line chart.
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.