Bug #1260
openwhen we create chart small so make sure the chart's graph will be visible hide the other things on the chart.
Updated by ALi RAZA 18 days ago
- Status changed from New to Resolved
- % Done changed from 0 to 100
Chart Responsive Behavior Enhancement
Summary:
Implemented intelligent progressive hiding of chart components when chart size becomes small, similar to Power BI's responsive behavior. This ensures that the main graph visualization remains visible and usable even in constrained spaces.
Problem Statement
Previously, when charts were resized to smaller dimensions, all chart elements (legend, axis labels, titles, data labels, series labels, zoom controls) remained visible, causing:
- Overcrowding and overlapping of elements
- The main graph area becoming too small to be useful
- Poor user experience in dashboards with multiple small charts
- Legend titles remaining visible even when legend items were hidden
- Series labels taking up valuable space in small charts
Solution Implemented
Charts now automatically and progressively hide non-essential elements as available space decreases, prioritizing the visibility of the actual data visualization. This follows a smart hierarchy where decorative and supplementary elements are hidden first, while the core graph remains prominent.
Progressive Hiding Behavior
The system uses four responsive breakpoints that trigger different levels of simplification:
Level 1: Compact View (Width < 250px OR Height < 150px)
Elements Hidden:
- Legend and legend title
- Zoom slider controls
Space Optimization:
- Margins reduced by 40% to maximize graph area
- Space previously reserved for legend is reclaimed by the graph
Level 2: Very Small View (Width < 200px OR Height < 140px)
Elements Hidden (in addition to Level 1):
- Axis value labels
- Data labels on bars/points/lines
- Series labels (left/right positioned labels showing series names)
Space Optimization:
- Additional 20% margin reduction
- No space reserved for hidden series labels
Level 3: Tiny View (Width < 150px OR Height < 100px)
Elements Hidden (in addition to Level 2):
- Axis titles
Space Optimization:
- No space reserved for axis titles
- Margins further optimized
Applies To
This enhancement works across all chart types including:
- Bar charts (clustered, stacked, 100% stacked)
- Column charts (clustered, stacked, 100% stacked)
- Line charts (with series labels support)
- Area charts (regular, stacked, 100% stacked - with series labels support)
- Pie and Donut charts
- Scatter and Bubble charts
- Radar charts
- Combination charts (line + column - with series labels support)
- Map Chart
Updated by Maryam Farooq 16 days ago
- Assignee changed from ALi RAZA to Maryam Farooq
Updated by Fareena Anayat 16 days ago
- Status changed from Ready For QA to Waiting for Regression