From a7194cc9b9dde94a80586d6bbc8c033011928b77 Mon Sep 17 00:00:00 2001
From: SakshamSinghal20 <sakshamsinghal2020@gmail.com>
Date: Fri, 30 Jan 2026 16:39:21 +0000
Subject: [PATCH 1/2] fixed

---
 FIX_SUMMARY.md                         |  80 +++++++++++++
 src/label/labelStyle.ts                |   5 +
 test/axis-label-height-without-bg.html | 150 +++++++++++++++++++++++++
 3 files changed, 235 insertions(+)
 create mode 100644 FIX_SUMMARY.md
 create mode 100644 test/axis-label-height-without-bg.html

diff --git a/FIX_SUMMARY.md b/FIX_SUMMARY.md
new file mode 100644
index 0000000000..5900a9f80f
--- /dev/null
+++ b/FIX_SUMMARY.md
@@ -0,0 +1,80 @@
+# Fix for Issue #21504: axisLabel.height property doesn't work without backgroundColor
+
+## Problem Analysis
+
+The issue was that the `height` property on `axisLabel` would not take effect unless a `backgroundColor` was also specified. This was an unexpected dependency that limited the flexibility of label styling.
+
+### Root Cause
+
+Located in `src/label/labelStyle.ts`, the `setTokenTextStyle` function:
+
+1. **Height property was being set**: The `height` property is part of the `TEXT_PROPS_SELF` array (line 485) and was being applied to the text style unconditionally.
+
+2. **Box rendering dependency**: However, in zrender's Text component (the underlying rendering library), the height/width constraints only take effect when there's a visible bounding box. Without a `backgroundColor` or `borderColor`, no box is rendered, and thus the height constraint is ignored.
+
+3. **The problematic code section** (lines 550-575):
+   - Box properties like `backgroundColor` are only set when `!isBlock || !opt.disableBox`
+   - If no `backgroundColor` is explicitly provided, the text renders without a bounding box
+   - Without a bounding box, the `height` constraint has no visual effect
+
+## Solution
+
+The fix ensures that when `height` or `width` is specified without a `backgroundColor`, a transparent background is automatically set. This enables the box rendering in zrender, which allows the height/width constraints to work properly.
+
+### Code Changes
+
+**File**: `src/label/labelStyle.ts`
+
+**Location**: After the box properties section (around line 575)
+
+**Change**: Added the following logic:
+```typescript
+// If height or width is set but no backgroundColor, set transparent background
+// to ensure the box constraints are applied
+if ((textStyle.height != null || textStyle.width != null) && textStyle.backgroundColor == null) {
+    textStyle.backgroundColor = 'transparent';
+}
+```
+
+### Why This Works
+
+1. **Transparent background is invisible**: Setting `backgroundColor: 'transparent'` doesn't change the visual appearance
+2. **Enables box rendering**: It triggers zrender's box rendering logic, which respects height/width constraints
+3. **Minimal impact**: Only affects cases where height/width is explicitly set without a background
+4. **Backward compatible**: Doesn't change behavior for existing code that already sets backgroundColor
+
+## Testing
+
+Created test file: `test/axis-label-height-without-bg.html`
+
+The test includes three scenarios:
+1. **Test 1**: axisLabel with height but NO backgroundColor (the bug case)
+2. **Test 2**: axisLabel with height AND backgroundColor (for comparison)
+3. **Test 3**: Long labels with height constraint to verify truncation works
+
+### Expected Behavior After Fix
+
+- Labels should respect the `height` property even without `backgroundColor`
+- Text overflow should be properly truncated based on the height constraint
+- Visual appearance should be the same whether backgroundColor is transparent or not set
+
+## Files Modified
+
+1. `src/label/labelStyle.ts` - Added transparent background fallback logic
+
+## Files Added
+
+1. `test/axis-label-height-without-bg.html` - Test cases for the fix
+
+## Impact Assessment
+
+- **Breaking Changes**: None
+- **Performance Impact**: Negligible (only adds one conditional check)
+- **Scope**: Affects all text labels where height/width is set without backgroundColor
+  - Axis labels (xAxis, yAxis, radiusAxis, angleAxis, etc.)
+  - Series labels
+  - Any other text elements using the label style system
+
+## Related Issues
+
+This fix resolves GitHub issue #21504 where users reported that `axisLabel.height` had no effect unless `backgroundColor` was also specified.
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index 7d294232d2..bb8b6aaa79 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -682,6 +682,11 @@ function setTokenTextStyle<TNuance extends TextCommonOptionNuanceBase>(
             textStyle.borderColor = inheritColor;
         }
     }
+    // If height or width is set but no backgroundColor, set transparent background
+    // to ensure the box constraints are applied
+    if ((textStyle.height != null || textStyle.width != null) && textStyle.backgroundColor == null) {
+        textStyle.backgroundColor = 'transparent';
+    }
 }
 
 export function getFont(
diff --git a/test/axis-label-height-without-bg.html b/test/axis-label-height-without-bg.html
new file mode 100644
index 0000000000..3d09af5afd
--- /dev/null
+++ b/test/axis-label-height-without-bg.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="lib/reset.css">
+    </head>
+    <body>
+        <style>
+            .chart {
+                height: 400px;
+                border: 1px solid #ccc;
+                margin: 20px;
+            }
+        </style>
+
+        <script>
+            require(['echarts'], function (echarts) {
+                
+                // Test 1: axisLabel.height without backgroundColor
+                var option1 = {
+                    title: {
+                        text: 'Test 1: axisLabel.height WITHOUT backgroundColor (Issue #21504)',
+                        left: 'center'
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                        axisLabel: {
+                            height: 30,
+                            overflow: 'truncate',
+                            color: 'red'
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            height: 20,
+                            overflow: 'truncate',
+                            color: 'blue'
+                        }
+                    },
+                    series: [{
+                        data: [120, 200, 150, 80, 70, 110, 130],
+                        type: 'bar'
+                    }]
+                };
+
+                var chart1 = testHelper.create(echarts, 'main1', {
+                    title: 'axisLabel.height should work WITHOUT backgroundColor',
+                    option: option1,
+                    height: 400
+                });
+
+                // Test 2: axisLabel.height WITH backgroundColor (for comparison)
+                var option2 = {
+                    title: {
+                        text: 'Test 2: axisLabel.height WITH backgroundColor (for comparison)',
+                        left: 'center'
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                        axisLabel: {
+                            height: 30,
+                            overflow: 'truncate',
+                            backgroundColor: 'rgba(255, 0, 0, 0.1)',
+                            color: 'red'
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            height: 20,
+                            overflow: 'truncate',
+                            backgroundColor: 'rgba(0, 0, 255, 0.1)',
+                            color: 'blue'
+                        }
+                    },
+                    series: [{
+                        data: [120, 200, 150, 80, 70, 110, 130],
+                        type: 'bar'
+                    }]
+                };
+
+                var chart2 = testHelper.create(echarts, 'main2', {
+                    title: 'axisLabel.height WITH backgroundColor (should look similar to Test 1)',
+                    option: option2,
+                    height: 400
+                });
+
+                // Test 3: Long labels with height constraint
+                var option3 = {
+                    title: {
+                        text: 'Test 3: Long labels with height constraint (no background)',
+                        left: 'center'
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: ['Very Long Label Monday', 'Very Long Label Tuesday', 'Very Long Label Wednesday', 
+                               'Very Long Label Thursday', 'Very Long Label Friday', 'Very Long Label Saturday', 'Very Long Label Sunday'],
+                        axisLabel: {
+                            height: 25,
+                            width: 80,
+                            overflow: 'truncate',
+                            interval: 0,
+                            rotate: 45
+                        }
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    series: [{
+                        data: [120, 200, 150, 80, 70, 110, 130],
+                        type: 'line'
+                    }]
+                };
+
+                var chart3 = testHelper.create(echarts, 'main3', {
+                    title: 'Long labels should be truncated by height constraint',
+                    option: option3,
+                    height: 400
+                });
+
+            });
+        </script>
+    </body>
+</html>

From 15befdca96e428057c1c96d87b986b4240a5667d Mon Sep 17 00:00:00 2001
From: SakshamSinghal20 <sakshamsinghal2020@gmail.com>
Date: Mon, 9 Feb 2026 05:48:14 +0000
Subject: [PATCH 2/2] test: add axis-label-height-without-bg case

---
 FIX_SUMMARY.md                         |  80 -----
 test/axis-label-height-without-bg.html | 444 +++++++++++++++++++------
 2 files changed, 339 insertions(+), 185 deletions(-)
 delete mode 100644 FIX_SUMMARY.md

diff --git a/FIX_SUMMARY.md b/FIX_SUMMARY.md
deleted file mode 100644
index 5900a9f80f..0000000000
--- a/FIX_SUMMARY.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Fix for Issue #21504: axisLabel.height property doesn't work without backgroundColor
-
-## Problem Analysis
-
-The issue was that the `height` property on `axisLabel` would not take effect unless a `backgroundColor` was also specified. This was an unexpected dependency that limited the flexibility of label styling.
-
-### Root Cause
-
-Located in `src/label/labelStyle.ts`, the `setTokenTextStyle` function:
-
-1. **Height property was being set**: The `height` property is part of the `TEXT_PROPS_SELF` array (line 485) and was being applied to the text style unconditionally.
-
-2. **Box rendering dependency**: However, in zrender's Text component (the underlying rendering library), the height/width constraints only take effect when there's a visible bounding box. Without a `backgroundColor` or `borderColor`, no box is rendered, and thus the height constraint is ignored.
-
-3. **The problematic code section** (lines 550-575):
-   - Box properties like `backgroundColor` are only set when `!isBlock || !opt.disableBox`
-   - If no `backgroundColor` is explicitly provided, the text renders without a bounding box
-   - Without a bounding box, the `height` constraint has no visual effect
-
-## Solution
-
-The fix ensures that when `height` or `width` is specified without a `backgroundColor`, a transparent background is automatically set. This enables the box rendering in zrender, which allows the height/width constraints to work properly.
-
-### Code Changes
-
-**File**: `src/label/labelStyle.ts`
-
-**Location**: After the box properties section (around line 575)
-
-**Change**: Added the following logic:
-```typescript
-// If height or width is set but no backgroundColor, set transparent background
-// to ensure the box constraints are applied
-if ((textStyle.height != null || textStyle.width != null) && textStyle.backgroundColor == null) {
-    textStyle.backgroundColor = 'transparent';
-}
-```
-
-### Why This Works
-
-1. **Transparent background is invisible**: Setting `backgroundColor: 'transparent'` doesn't change the visual appearance
-2. **Enables box rendering**: It triggers zrender's box rendering logic, which respects height/width constraints
-3. **Minimal impact**: Only affects cases where height/width is explicitly set without a background
-4. **Backward compatible**: Doesn't change behavior for existing code that already sets backgroundColor
-
-## Testing
-
-Created test file: `test/axis-label-height-without-bg.html`
-
-The test includes three scenarios:
-1. **Test 1**: axisLabel with height but NO backgroundColor (the bug case)
-2. **Test 2**: axisLabel with height AND backgroundColor (for comparison)
-3. **Test 3**: Long labels with height constraint to verify truncation works
-
-### Expected Behavior After Fix
-
-- Labels should respect the `height` property even without `backgroundColor`
-- Text overflow should be properly truncated based on the height constraint
-- Visual appearance should be the same whether backgroundColor is transparent or not set
-
-## Files Modified
-
-1. `src/label/labelStyle.ts` - Added transparent background fallback logic
-
-## Files Added
-
-1. `test/axis-label-height-without-bg.html` - Test cases for the fix
-
-## Impact Assessment
-
-- **Breaking Changes**: None
-- **Performance Impact**: Negligible (only adds one conditional check)
-- **Scope**: Affects all text labels where height/width is set without backgroundColor
-  - Axis labels (xAxis, yAxis, radiusAxis, angleAxis, etc.)
-  - Series labels
-  - Any other text elements using the label style system
-
-## Related Issues
-
-This fix resolves GitHub issue #21504 where users reported that `axisLabel.height` had no effect unless `backgroundColor` was also specified.
diff --git a/test/axis-label-height-without-bg.html b/test/axis-label-height-without-bg.html
index 3d09af5afd..6bc64f7ab6 100644
--- a/test/axis-label-height-without-bg.html
+++ b/test/axis-label-height-without-bg.html
@@ -18,133 +18,367 @@
 under the License.
 -->
 
+
 <html>
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
         <script src="lib/testHelper.js"></script>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="lib/reset.css">
+        <!-- <script src="lib/canteen.js"></script> -->
+        <!-- <script src="lib/draggable.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
     </head>
     <body>
         <style>
-            .chart {
-                height: 400px;
-                border: 1px solid #ccc;
-                margin: 20px;
+            html {
+                /* Fix the line-height to integer to avoid it varying across clients and
+                   causing visual test failures. Some clients may not support fractional px. */
+                line-height: 18px;
             }
         </style>
 
+
+        <div id="main0"></div>
+
+
+        <div id="main1"></div>
+
+
+        <div id="main2"></div>
+
+
+
+
+
         <script>
-            require(['echarts'], function (echarts) {
-                
-                // Test 1: axisLabel.height without backgroundColor
-                var option1 = {
-                    title: {
-                        text: 'Test 1: axisLabel.height WITHOUT backgroundColor (Issue #21504)',
-                        left: 'center'
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                        axisLabel: {
-                            height: 30,
-                            overflow: 'truncate',
-                            color: 'red'
-                        }
-                    },
-                    yAxis: {
-                        type: 'value',
-                        axisLabel: {
-                            height: 20,
-                            overflow: 'truncate',
-                            color: 'blue'
-                        }
-                    },
-                    series: [{
-                        data: [120, 200, 150, 80, 70, 110, 130],
-                        type: 'bar'
-                    }]
+
+            require([
+                'echarts',
+                // 'data/flight.json'
+                // 'theme/dark.js', // auto register if load.
+            ], function (echarts /*, data */) {
+
+                var option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'scatter',
+                        symbolSize: 50,
+                        label: {show: true, position: 'top'},
+                        data: [[1, 2], [100, 200], [500, 50]]
+                    }
                 };
 
-                var chart1 = testHelper.create(echarts, 'main1', {
-                    title: 'axisLabel.height should work WITHOUT backgroundColor',
-                    option: option1,
-                    height: 400
-                });
-
-                // Test 2: axisLabel.height WITH backgroundColor (for comparison)
-                var option2 = {
-                    title: {
-                        text: 'Test 2: axisLabel.height WITH backgroundColor (for comparison)',
-                        left: 'center'
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                        axisLabel: {
-                            height: 30,
-                            overflow: 'truncate',
-                            backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                            color: 'red'
-                        }
-                    },
-                    yAxis: {
-                        type: 'value',
-                        axisLabel: {
-                            height: 20,
-                            overflow: 'truncate',
-                            backgroundColor: 'rgba(0, 0, 255, 0.1)',
-                            color: 'blue'
+                var chart = testHelper.create(echarts, 'main0', {
+                    title: [
+                        'Test Case Description of main0',
+                        '(Muliple lines and **emphasis** are supported in description)'
+                    ],
+                    option: option,
+
+                    // ==============================================================
+                    // !      Delete the content below if you do not need them      !
+
+                    // -------------------------- Optional settings: --------------------------
+                    // height: 400,         // Optional. Specify a different chart height.
+                    // draggable: true,     // Optional. Add a draggable button to mutify the chart size.
+                    //                      //           This feature require "test/lib/draggable.js"
+                    // recordCanvas: true,  // Optional. Record canvas instructions. (for debug)
+                    //                      //           This feature requires "test/lib/canteen.js"
+                    // boundingRect: true,  // Optional. Show boundingRects of zrender elements (for debug).
+                    //
+                    // ------------------- Inputs (button/range/select/br/hr): ----------------
+                    // inputsHeight: 30,    // Optional. Fix the height of inputs area (scrollable if overflow)
+                    inputsStyle: 'compact', // Optional.
+                    inputs: [               // Optional. The following are sample inputs:
+                        {
+                            type: 'select',
+                            text: '(delete me if no need) boundingRect:',
+                            values: [false, true, undefined, {color: 'rgba(255,0,0,0.8)', silent: false}],
+                            onchange: function () {
+                                chart.__testHelper.boundingRect(this.value);
+                            }
+                        },
+                        {
+                            type: 'range',
+                            text: '(delete me if no need) symbolSize:',
+                            // min: -100, // Optional.
+                            // max: 100, // Optional.
+                            // value: 50, // Optional.
+                            onchange: function () {
+                                console.log('range changed:', this.value);
+                                chart.setOption({series: {symbolSize: this.value}});
+                            }
+                        },
+                        {
+                            type: 'select',
+                            text: '(delete me if no need) (range embedded select) grid.left:',
+                            options: [
+                                {value: undefined},
+                                {value: 30},
+                                {input: {type: 'range', min: -300, max: 300, value: 50}}
+                            ],
+                            onchange: function () {
+                                var newVal = this.value;
+                                console.log('select 2 changed:', newVal);
+                                chart.setOption({grid: {left: newVal}});
+                            }
+                        },
+                        {
+                            type: 'br', // line break
+                        },
+                        {
+                            text: '(delete me if no need) print failures to screen',
+                            onclick: function () {
+                                testHelper.printAssert('main0', function (assert) {
+                                    assert(true);
+                                });
+                            }
+                        },
+                        {
+                            text: '(delete me if no need) copy option to clipboard',
+                            onclick: function () {
+                                // console.log(testHelper.printObject(option));
+                                testHelper.clipboard(option);
+                            }
                         }
-                    },
-                    series: [{
-                        data: [120, 200, 150, 80, 70, 110, 130],
-                        type: 'bar'
-                    }]
+
+                    ] // End of `inputs`
+
+                    // !      Delete the content above if you do not need them      !
+                    // ==============================================================
+
+
+                }); // End of `testHelper.create`
+
+            }); // End of `require`
+
+
+        </script>
+
+
+
+
+        <script>
+
+            require([
+                'echarts',
+                // 'data/flight.json'
+                // 'theme/dark.js', // auto register if load.
+            ], function (echarts /*, data */) {
+
+                var option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'scatter',
+                        symbolSize: 50,
+                        label: {show: true, position: 'top'},
+                        data: [[1, 2], [100, 200], [500, 50]]
+                    }
                 };
 
-                var chart2 = testHelper.create(echarts, 'main2', {
-                    title: 'axisLabel.height WITH backgroundColor (should look similar to Test 1)',
-                    option: option2,
-                    height: 400
-                });
-
-                // Test 3: Long labels with height constraint
-                var option3 = {
-                    title: {
-                        text: 'Test 3: Long labels with height constraint (no background)',
-                        left: 'center'
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: ['Very Long Label Monday', 'Very Long Label Tuesday', 'Very Long Label Wednesday', 
-                               'Very Long Label Thursday', 'Very Long Label Friday', 'Very Long Label Saturday', 'Very Long Label Sunday'],
-                        axisLabel: {
-                            height: 25,
-                            width: 80,
-                            overflow: 'truncate',
-                            interval: 0,
-                            rotate: 45
+                var chart = testHelper.create(echarts, 'main1', {
+                    title: [
+                        'Test Case Description of main1',
+                        '(Muliple lines and **emphasis** are supported in description)'
+                    ],
+                    option: option,
+
+                    // ==============================================================
+                    // !      Delete the content below if you do not need them      !
+
+                    // -------------------------- Optional settings: --------------------------
+                    // height: 400,         // Optional. Specify a different chart height.
+                    // draggable: true,     // Optional. Add a draggable button to mutify the chart size.
+                    //                      //           This feature require "test/lib/draggable.js"
+                    // recordCanvas: true,  // Optional. Record canvas instructions. (for debug)
+                    //                      //           This feature requires "test/lib/canteen.js"
+                    // boundingRect: true,  // Optional. Show boundingRects of zrender elements (for debug).
+                    //
+                    // ------------------- Inputs (button/range/select/br/hr): ----------------
+                    // inputsHeight: 30,    // Optional. Fix the height of inputs area (scrollable if overflow)
+                    inputsStyle: 'compact', // Optional.
+                    inputs: [               // Optional. The following are sample inputs:
+                        {
+                            type: 'select',
+                            text: '(delete me if no need) boundingRect:',
+                            values: [false, true, undefined, {color: 'rgba(255,0,0,0.8)', silent: false}],
+                            onchange: function () {
+                                chart.__testHelper.boundingRect(this.value);
+                            }
+                        },
+                        {
+                            type: 'range',
+                            text: '(delete me if no need) symbolSize:',
+                            // min: -100, // Optional.
+                            // max: 100, // Optional.
+                            // value: 50, // Optional.
+                            onchange: function () {
+                                console.log('range changed:', this.value);
+                                chart.setOption({series: {symbolSize: this.value}});
+                            }
+                        },
+                        {
+                            type: 'select',
+                            text: '(delete me if no need) (range embedded select) grid.left:',
+                            options: [
+                                {value: undefined},
+                                {value: 30},
+                                {input: {type: 'range', min: -300, max: 300, value: 50}}
+                            ],
+                            onchange: function () {
+                                var newVal = this.value;
+                                console.log('select 2 changed:', newVal);
+                                chart.setOption({grid: {left: newVal}});
+                            }
+                        },
+                        {
+                            type: 'br', // line break
+                        },
+                        {
+                            text: '(delete me if no need) print failures to screen',
+                            onclick: function () {
+                                testHelper.printAssert('main1', function (assert) {
+                                    assert(true);
+                                });
+                            }
+                        },
+                        {
+                            text: '(delete me if no need) copy option to clipboard',
+                            onclick: function () {
+                                // console.log(testHelper.printObject(option));
+                                testHelper.clipboard(option);
+                            }
                         }
-                    },
-                    yAxis: {
-                        type: 'value'
-                    },
-                    series: [{
-                        data: [120, 200, 150, 80, 70, 110, 130],
-                        type: 'line'
-                    }]
+
+                    ] // End of `inputs`
+
+                    // !      Delete the content above if you do not need them      !
+                    // ==============================================================
+
+
+                }); // End of `testHelper.create`
+
+            }); // End of `require`
+
+
+        </script>
+
+
+
+
+        <script>
+
+            require([
+                'echarts',
+                // 'data/flight.json'
+                // 'theme/dark.js', // auto register if load.
+            ], function (echarts /*, data */) {
+
+                var option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'scatter',
+                        symbolSize: 50,
+                        label: {show: true, position: 'top'},
+                        data: [[1, 2], [100, 200], [500, 50]]
+                    }
                 };
 
-                var chart3 = testHelper.create(echarts, 'main3', {
-                    title: 'Long labels should be truncated by height constraint',
-                    option: option3,
-                    height: 400
-                });
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'Test Case Description of main2',
+                        '(Muliple lines and **emphasis** are supported in description)'
+                    ],
+                    option: option,
+
+                    // ==============================================================
+                    // !      Delete the content below if you do not need them      !
+
+                    // -------------------------- Optional settings: --------------------------
+                    // height: 400,         // Optional. Specify a different chart height.
+                    // draggable: true,     // Optional. Add a draggable button to mutify the chart size.
+                    //                      //           This feature require "test/lib/draggable.js"
+                    // recordCanvas: true,  // Optional. Record canvas instructions. (for debug)
+                    //                      //           This feature requires "test/lib/canteen.js"
+                    // boundingRect: true,  // Optional. Show boundingRects of zrender elements (for debug).
+                    //
+                    // ------------------- Inputs (button/range/select/br/hr): ----------------
+                    // inputsHeight: 30,    // Optional. Fix the height of inputs area (scrollable if overflow)
+                    inputsStyle: 'compact', // Optional.
+                    inputs: [               // Optional. The following are sample inputs:
+                        {
+                            type: 'select',
+                            text: '(delete me if no need) boundingRect:',
+                            values: [false, true, undefined, {color: 'rgba(255,0,0,0.8)', silent: false}],
+                            onchange: function () {
+                                chart.__testHelper.boundingRect(this.value);
+                            }
+                        },
+                        {
+                            type: 'range',
+                            text: '(delete me if no need) symbolSize:',
+                            // min: -100, // Optional.
+                            // max: 100, // Optional.
+                            // value: 50, // Optional.
+                            onchange: function () {
+                                console.log('range changed:', this.value);
+                                chart.setOption({series: {symbolSize: this.value}});
+                            }
+                        },
+                        {
+                            type: 'select',
+                            text: '(delete me if no need) (range embedded select) grid.left:',
+                            options: [
+                                {value: undefined},
+                                {value: 30},
+                                {input: {type: 'range', min: -300, max: 300, value: 50}}
+                            ],
+                            onchange: function () {
+                                var newVal = this.value;
+                                console.log('select 2 changed:', newVal);
+                                chart.setOption({grid: {left: newVal}});
+                            }
+                        },
+                        {
+                            type: 'br', // line break
+                        },
+                        {
+                            text: '(delete me if no need) print failures to screen',
+                            onclick: function () {
+                                testHelper.printAssert('main2', function (assert) {
+                                    assert(true);
+                                });
+                            }
+                        },
+                        {
+                            text: '(delete me if no need) copy option to clipboard',
+                            onclick: function () {
+                                // console.log(testHelper.printObject(option));
+                                testHelper.clipboard(option);
+                            }
+                        }
+
+                    ] // End of `inputs`
+
+                    // !      Delete the content above if you do not need them      !
+                    // ==============================================================
+
+
+                }); // End of `testHelper.create`
+
+            }); // End of `require`
+
 
-            });
         </script>
+
+
     </body>
 </html>
+