[Question] How to create a Volume Profile (Horizontal Volume Bars) right-aligned

[yulafezmesi]

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

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

Trading charts - always challenging. The main problem is vertical alignment (requirement # 3). If the chart is vertically static (no vert.zoom), then bar positions could be adjusted - Demo.
But if vertical zoom synchronization is required, then bar categories won't match price values. That feature could be achieved only with custom bars, which are value-based.

[yulafezmesi]

Thanks for the explanation @helgasoft !

yes! i probably need second one as i want exactly this behaviour below. custom bars means type=custom?

https://github.com/user-attachments/assets/5a716168-9959-423e-b179-d5b5f7f25978

[helgasoft]

custom bars means type=custom

yes, this official example will show the way. Bars are just rectangle shapes.