apache
Is there a solution to enable scrolling when multiple ranges are configured in the visualMap, particularly when the number of ranges exceeds the available space in the chart container?
Version
5.5.1
Link to Minimal Reproduction
https://codepen.io/Srikanth-Sangana/pen/ogvwbgv
Steps to Reproduce
- I am using ECharts to render a line chart with a piecewise visual map.
- Below are the EChart options for reference.
- Observe the behavior of the visualMap when there are multiple range pieces.
- 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
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Is there a solution to display a tooltip with the respective block range label when hovering over the range visual map block?
Because It's very hard for users to know the range of each block without a label in the above solution.