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

["rozsazoltan (via GitHub)" <gi...@apache.org>]

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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org