Responsive Features

Charts that automatically adapt to any screen size and device

1. Fully Responsive Chart (Default Behavior)

Feature: Chart automatically resizes to fit container while maintaining aspect ratio
Source Code 
<bx:chart title="Responsive Pie Chart"
         chartwidth="600" chartheight="300"
         responsive="true"
         maintainAspectRatio="true">
    <bx:chartseries type="pie" colorlist="FF6384,36A2EB,FFCE56,4BC0C0"
                   serieslabel="Market Share">
        <bx:chartdata item="Product A" value="150" />
        <bx:chartdata item="Product B" value="200" />
        <bx:chartdata item="Product C" value="100" />
        <bx:chartdata item="Product D" value="75" />
    </bx:chartseries>
</bx:chart>

2. Responsive Chart with Custom Aspect Ratio

Feature: Uses custom aspect ratio of 3 for extra-wide format (default is 2)
Source Code 
<bx:chart title="Wide Format Bar Chart"
         chartwidth="800" chartheight="300"
         responsive="true"
         maintainAspectRatio="true"
         aspectRatio="3"
         xaxistitle="Categories" yaxistitle="Values"
         showygridlines="true">
    <bx:chartseries type="bar" colorlist="131cd7,ED2939,4BC0C0,d47f00"
                   serieslabel="Performance Metrics">
        <bx:chartdata item="Q1" value="150" />
        <bx:chartdata item="Q2" value="200" />
        <bx:chartdata item="Q3" value="175" />
        <bx:chartdata item="Q4" value="225" />
    </bx:chartseries>
</bx:chart>

3. Responsive Without Aspect Ratio Constraint

Feature: Chart fills container completely in both width and height (no aspect ratio maintained)
Source Code 
<bx:chart title="Fill Container Chart"
         chartwidth="600" chartheight="400"
         responsive="true"
         maintainAspectRatio="false"
         xaxistitle="Time" yaxistitle="Memory Usage (MB)"
         showxgridlines="true" showygridlines="true">
    <bx:chartseries type="line" colorlist="9966FF" serieslabel="Memory Over Time">
        <bx:chartdata item="9:00 AM" value="512" />
        <bx:chartdata item="10:00 AM" value="678" />
        <bx:chartdata item="11:00 AM" value="543" />
        <bx:chartdata item="12:00 PM" value="721" />
        <bx:chartdata item="1:00 PM" value="634" />
        <bx:chartdata item="2:00 PM" value="587" />
    </bx:chartseries>
</bx:chart>

4. Mobile-Optimized Square Chart

Feature: Square aspect ratio (1:1) ideal for mobile displays and social media
Source Code 
<bx:chart title="Mobile-Friendly Doughnut"
         chartwidth="400" chartheight="400"
         responsive="true"
         maintainAspectRatio="true"
         aspectRatio="1"
         showlegend="true">
    <bx:chartseries type="doughnut"
                   colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
                   serieslabel="Mobile Stats">
        <bx:chartdata item="iOS" value="45" />
        <bx:chartdata item="Android" value="40" />
        <bx:chartdata item="Other" value="15" />
    </bx:chartseries>
</bx:chart>

5. Fixed Size Chart (Non-Responsive)

Feature: Chart maintains fixed dimensions regardless of container size
Source Code 
<bx:chart title="Fixed Size Chart"
         chartwidth="500" chartheight="250"
         responsive="false"
         xaxistitle="Fixed Dimensions" yaxistitle="Values">
    <bx:chartseries type="bar" colorlist="E74C3C,3498DB" serieslabel="Fixed Data">
        <bx:chartdata item="Item 1" value="85" />
        <bx:chartdata item="Item 2" value="92" />
        <bx:chartdata item="Item 3" value="78" />
        <bx:chartdata item="Item 4" value="65" />
    </bx:chartseries>
</bx:chart>

6. Tall Vertical Format Chart

Feature: Tall aspect ratio (0.8) perfect for horizontal bar charts and rankings
Source Code 
<bx:chart title="Vertical Rankings"
         chartwidth="500" chartheight="600"
         responsive="true"
         maintainAspectRatio="true"
         aspectRatio="0.8"
         xaxistitle="Score" yaxistitle="Team"
         showxgridlines="true">
    <bx:chartseries type="horizontalbar" colorlist="2ECC71,F39C12,E74C3C,9B59B6,3498DB"
                   serieslabel="Team Performance">
        <bx:chartdata item="Team Alpha" value="95" />
        <bx:chartdata item="Team Beta" value="88" />
        <bx:chartdata item="Team Gamma" value="82" />
        <bx:chartdata item="Team Delta" value="76" />
        <bx:chartdata item="Team Epsilon" value="70" />
    </bx:chartseries>
</bx:chart>

7. Side-by-Side Responsive Charts

Feature: Two responsive charts in Bootstrap grid - stack on mobile, side-by-side on desktop
Source Code (Layout) 
<div class="row">
    <div class="col-md-6">
        <bx:chart title="Left Chart - Area" responsive="true" ...>
            ...
        </bx:chart>
    </div>
    <div class="col-md-6">
        <bx:chart title="Right Chart - Radar" responsive="true" ...>
            ...
        </bx:chart>
    </div>
</div>

8. Dashboard Layout (4 Charts Grid)

Feature: Responsive dashboard with 4 charts - 2x2 grid on desktop, stacked on mobile
Source Code (Layout) 
<div class="row g-3">
    <div class="col-lg-6">
        <bx:chart title="Sales" responsive="true" ...>...</bx:chart>
    </div>
    <div class="col-lg-6">
        <bx:chart title="Traffic" responsive="true" ...>...</bx:chart>
    </div>
    <div class="col-lg-6">
        <bx:chart title="Performance" responsive="true" ...>...</bx:chart>
    </div>
    <div class="col-lg-6">
        <bx:chart title="Trends" responsive="true" ...>...</bx:chart>
    </div>
</div>

Responsive Features Demonstrated

Responsive Attributes
  • responsive="true|false"
  • maintainAspectRatio="true|false"
  • aspectRatio="1|2|3|0.8"
Common Use Cases
  • Mobile-first responsive design
  • Dashboard grid layouts
  • Side-by-side comparisons
  • Fixed-size embeds
Back to Test Suite