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?

[sanganasrikanth9618]

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: '#8000', 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

[helgasoft]

visualMap has no scrolling like legend, but pieces could be compressed with text - Demo.

[sanganasrikanth9618]

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.