sanganasrikanth9618 opened a new issue, #20613: URL: https://github.com/apache/echarts/issues/20613
### Version 5.5.1 ### Link to Minimal Reproduction https://codepen.io/Srikanth-Sangana/pen/ogvwbgv ### Steps to Reproduce 1. I am using ECharts to render a line chart with a piecewise visual map. 2. Below are the EChart options for reference. 3. Observe the behavior of the visualMap when there are multiple range pieces. 4. When multiple ranges are applied, I want to enable scrolling for the visualMap when the visualMap exceeds the chart container view. Echart Options : option = { title: { text: 'Line Chart with VisualMap', left: 'center', }, tooltip: { trigger: 'axis', }, grid: { left: '10%', right: '10%', bottom: '15%', containLabel: true, }, xAxis: { type: 'category', boundaryGap: false, data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], name: 'Month', }, yAxis: { type: 'value', name: 'Value', }, visualMap: { type: 'piecewise', show: true, position: 'top', orient: 'horizontal', scrollable: true, // Enables scrolling for many conditions itemWidth: 20, itemHeight: 16, pieces: [ { gt: 0, lte: 5, color: '#FF0000', label: '0 - 5' }, { gt: 5, lte: 10, color: '#FF4500', label: '5 - 10' }, { gt: 10, lte: 15, color: '#FF8C00', label: '10 - 15' }, { gt: 15, lte: 20, color: '#FFA500', label: '15 - 20' }, { gt: 20, lte: 25, color: '#FFD700', label: '20 - 25' }, { gt: 25, lte: 30, color: '#FFFF00', label: '25 - 30' }, { gt: 30, lte: 35, color: '#ADFF2F', label: '30 - 35' }, { gt: 35, lte: 40, color: '#7FFF00', label: '35 - 40' }, { gt: 40, lte: 45, color: '#32CD32', label: '40 - 45' }, { gt: 45, lte: 50, color: '#008000', label: '45 - 50' }, { gt: 50, lte: 55, color: '#00FA9A', label: '50 - 55' }, { gt: 55, lte: 60, color: '#00FFFF', label: '55 - 60' }, { gt: 60, lte: 65, color: '#1E90FF', label: '60 - 65' }, { gt: 65, lte: 70, color: '#0000FF', label: '65 - 70' }, { gt: 70, lte: 75, color: '#8A2BE2', label: '70 - 75' }, { gt: 75, lte: 80, color: '#9400D3', label: '75 - 80' }, { gt: 80, lte: 85, color: '#FF00FF', label: '80 - 85' }, { gt: 85, lte: 90, color: '#FF1493', label: '85 - 90' }, { gt: 90, lte: 95, color: '#FF69B4', label: '90 - 95' }, { gt: 95, lte: 100, color: '#FFC0CB', label: '95 - 100' }, { gt: 100, lte: 110, color: '#F08080', label: '100 - 110' }, { gt: 110, lte: 120, color: '#FA8072', label: '110 - 120' }, { gt: 120, lte: 130, color: '#E9967A', label: '120 - 130' }, { gt: 130, lte: 140, color: '#FFA07A', label: '130 - 140' }, { gt: 140, color: '#A52A2A', label: '> 140' }, ], calculable: true, textStyle: { fontSize: 12, color: '#000', }, height: 100, }, series: [ { name: 'Data', type: 'line', data: [3, 12, 25, 45, 65, 78, 90, 101, 125, 145, 160, 175], lineStyle: { width: 2, }, }, ], }; ### Current Behavior The current behavior is that the visualMap is not scrollable when the number of ranges exceeds the available space in the chart container. Instead of scrolling, the visualMap overflows or remains static, causing the ranges to be cut off or not fully visible if they exceed the container width. ### Expected Behavior The expected behavior is that when multiple ranges are configured in the visualMap, the component should automatically enable scrolling if the ranges exceed the available space in the chart container. This would allow the user to scroll horizontally to view all the range labels and colors without overflowing outside the container. **Is there a solution to enable horizontal scrolling when multiple ranges are configured in the visualMap, particularly when the number of ranges exceeds the available space in the chart container?** ### Environment ```markdown - OS: - Browser: - Framework: ``` ### Any additional comments? _No response_ -- 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]
