rozsazoltan commented on issue #20242:
URL: https://github.com/apache/echarts/issues/20242#issuecomment-2335161715
You can insert a hook function into the `dataZoom` event, where you can
query the current data of the chart.
```js
// Listening to the zoom event and dynamically increasing the candlestick
width
myChart.on('dataZoom', function(params) {
const startValue = myChart.getModel().option.dataZoom[0].startValue;
const endValue = myChart.getModel().option.dataZoom[0].endValue;
// Find indexes from dateData by startValue and endValue
const startIndex = dateData.findIndex(item => new Date(item) >= new
Date(startValue));
const endIndex = dateData.findIndex(item => new Date(item) >= new
Date(endValue));
// Calculate a visible item count by indexes
const visibleDataCount = (endIndex !== -1 && startIndex !== -1) ? endIndex
- startIndex : 0;
// Dynamically calculate new width, use grid-width, gap, candlestick
visible count
// Get the chart container width
const chartContainerWidth = dom.clientWidth;
// Retrieve grid configuration
const gridConfig = myChart.getOption().grid[0] || {};
const gridLeftPercent = parseFloat(gridConfig.left) || 0;
const gridRightPercent = parseFloat(gridConfig.right) || 0;
// Convert percentages to pixels
const gridLeftPx = (gridLeftPercent / 100) * chartContainerWidth;
const gridRightPx = (gridRightPercent / 100) * chartContainerWidth;
// Calculate the width of the plotting area
const gridWidth = chartContainerWidth - gridLeftPx - gridRightPx;
// Gap between data
const gap = chartContainerWidth / visibleDataCount / 3
const MAXIMUM_BAR_WIDTH = 50
// (GRID_WIDTH - SUM_GAP_WIDTHS) / SUM_BAR_WIDTHS
const currentBarWidth = (gridWidth - (visibleDataCount - 1) * gap) /
visibleDataCount
// Maximum or Current width will min
const newBarWidth = Math.min(MAXIMUM_BAR_WIDTH, currentBarWidth)
// Update the candlestick width
myChart.setOption({
series: [{
type: 'candlestick',
barWidth: newBarWidth // New candlestick width
}]
});
});
```
Source: [ECharts: Candlestick width not increasing on zoom with time xAxis
and 'empty' filterMode](https://stackoverflow.com/a/78960014/15167500) -
StackOverflow answer
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
