[Bug] Candlestick width not increasing on zoom with time xAxis and 'empty' filterMode

[xpatinyo]

Version

5.5.1

Link to Minimal Reproduction

https://codepen.io/xpatt/pen/RwzZwYR

Steps to Reproduce

set xAxis type to 'time' set dataZoom filterMode to 'empty' use series type 'candlestick'

Current Behavior

Candlesticks do not widen on zoom:

Expected Behavior

Candlesticks should widen on zoom:

Environment

- OS: Windows 11
- Browser:Chrome & Mozilla
- Framework: JS

Any additional comments?

No response

[helgasoft]

Is there a reason to try filterMode:'empty' or it's just an experiment ? Obviously chart does not look good. Also note that default data order is OCLH, not OHLC. And the colors might need adjustment:

const upColor = '#26a69a';
const downColor = '#ef5350'; //red
itemStyle= {
  color: upColor, // bull
  borderColor: upColor, // bull
  color0: downColor, // bear
  borderColor0: downColor // bear
}

[xpatinyo]

Alright, just changed it to OCLH. Yes, I want to keep the filterMode: empty because it is important for my use case that when zooming in horizontally the vertical height stays the same.

[helgasoft]

important for my use case that when zooming in horizontally the vertical height stays the same.

Another way of doing this is yAxis.max - Demo 📌 please close issue if problem solved.

[xpatinyo]

Yes, but I also have a vertical zoom slider.

[rozsazoltan]

You can insert a hook function into the dataZoom event, where you can query the current data of the chart.

// Listening to the zoom event and dynamically change the candlestick width
myChart.on('dataZoom', function(params) {
  // Calculate new width with your logic...
  // Update the candlestick width
  myChart.setOption({
    series: [{
      type: 'candlestick',
      barWidth: newBarWidth // Set new candlestick width
    }]
  });
});

Source: ECharts: Candlestick width not increasing on zoom with time xAxis and 'empty' filterMode - StackOverflow answer