diff --git a/html/m_visualize/seaborn.html b/html/m_visualize/seaborn.html
index 21208027..0e39d194 100644
--- a/html/m_visualize/seaborn.html
+++ b/html/m_visualize/seaborn.html
@@ -114,29 +114,34 @@
                                                 <!-- Auto-create -->
                                             </select>
                                         </div>
-                                        <div class="vp-grid-box sb-option">
-                                            <label><input type="checkbox" id="showValues" class="vp-state"/><span>Show values</span></label>
-                                            <input type="number" id="showValuesPrecision" class="vp-state" placeholder="Type precision (0 ~ 5)" min="0" max="5"/>
-                                        </div>
-                                        <div class="vp-grid-col-p50 sb-option" style="grid-column-start: 1;grid-column-end: 3;">
-                                            <div class="vp-grid-box">
-                                                <label class="vp-bold">Sort values by 
-                                                    <select id="sortBy" class="vp-state vp-select" style="width: 75px;height:25px;">
+                                        <div class="vp-grid-box sb-option" style="grid-column-start: 1;grid-column-end: 3;">
+                                            <hr style="margin:5px;"/>
+                                            <label class="vp-tab-group-title">Sort</label>
+                                            <div class="vp-grid-col-p50">
+                                                <div class="vp-grid-col-95">
+                                                    <label for="sortType">Order</label>
+                                                    <select id="sortType" class="vp-state vp-select m">
+                                                        <option value="">No sorting</option>
+                                                        <option value="descending">Sort in descending order</option>
+                                                        <option value="ascending">Sort in ascending order</option>
+                                                    </select>
+                                                </div>
+                                                <div class="vp-grid-col-95">
+                                                    <label for="sortBy">Sort by</label>
+                                                    <select id="sortBy" class="vp-state vp-select m">
                                                         <option value="y">y axis</option>
                                                         <option value="x">x axis</option>
                                                     </select>
-                                                </label>
-                                                <select id="sortType" class="vp-state">
-                                                    <option value="">No sorting</option>
-                                                    <option value="descending">Sort in descending order</option>
-                                                    <option value="ascending">Sort in ascending order</option>
-                                                </select>
+                                                </div>
                                             </div>
-                                            <div class="vp-grid-box">
-                                                <label class="vp-bold">Sort condition</label>
-                                                <input type="text" id="sortHue" class="vp-input vp-state" placeholder="Type hue condition"/>
-                                                <label><input type="checkbox" id="sortHueText" class="vp-state"/><span>Text</span></label>
+                                            <div class="vp-grid-col-95 sb-option">
+                                                <label for="sortHue">Hue condition</label>
+                                                <div>
+                                                    <input type="text" id="sortHue" class="vp-input vp-state" placeholder="Type hue condition"/>
+                                                    <label><input type="checkbox" id="sortHueText" class="vp-state" checked/><span>Text</span></label>
+                                                </div>
                                             </div>
+                                            <hr style="margin:5px;"/>
                                         </div>
                                     </div>
                                     <label for="userOption" class="vp-bold">User Option</label>
@@ -207,7 +212,16 @@
                                             <input type="text" id="y_label" class="vp-input vp-state" placeholder="Type Y Label" />
                                         </div>
                                     </div>
-                                    
+                                    <div class="vp-grid-box sb-option">
+                                        <hr style="margin:5px;"/>
+                                        <label class="vp-tab-group-title">Show values</label>
+                                        <label><input type="checkbox" id="showValues" class="vp-state"/><span>Show values on the top of bar</span></label>
+                                        <div class="vp-grid-col-95">
+                                            <label for="showValuesPrecision">Decimal place</label>
+                                            <input type="number" id="showValuesPrecision" class="vp-state" placeholder="Type decimal places(0~5)" min="0" max="5"/>
+                                        </div>
+                                        <hr style="margin:5px;"/>
+                                    </div>
                                     <label for="useLegend" class="vp-bold">Legend</label>
                                     <div class="vp-grid-col-p50">
                                         <select id="legendPos" class="vp-select vp-state">
diff --git a/js/com/com_Config.js b/js/com/com_Config.js
index 40377d72..f6e29477 100644
--- a/js/com/com_Config.js
+++ b/js/com/com_Config.js
@@ -104,7 +104,14 @@ define([
                             '%matplotlib inline'
                         ]
                     },
-                    { library: 'seaborn', alias:'sns' }
+                    { library: 'seaborn', alias:'sns' },
+                    {
+                        library: 'plotly.express', alias: 'px',
+                        include: [
+                            'from plotly.offline import init_notebook_mode',
+                            'init_notebook_mode(connected=True)'
+                        ]
+                    }
                 ]
             }
 
@@ -142,7 +149,7 @@ define([
                     type: 'package'
                 },
                 'px': {
-                    code: 'import plotly.express as px',
+                    code: 'import plotly.express as px\nfrom plotly.offline import init_notebook_mode\ninit_notebook_mode(connected=True)',
                     type: 'package'
                 },
                 'WordCloud': {
@@ -251,6 +258,7 @@ define([
                 'fileNaviCommand.py',
                 'pandasCommand.py',
                 'variableCommand.py',
+                'visualizationCommand.py',
                 // 'userCommand.py'
             ];
             let promiseList = [];
@@ -579,7 +587,7 @@ define([
     /**
      * Version
      */
-    Config.version = "2.2.5";
+    Config.version = "2.2.7";
 
     /**
      * Type of mode
diff --git a/js/com/com_Const.js b/js/com/com_Const.js
index 786ba5cb..1fd5deb1 100644
--- a/js/com/com_Const.js
+++ b/js/com/com_Const.js
@@ -19,7 +19,7 @@ define ([
     class Constants { }
 
     Constants.TOOLBAR_BTN_INFO = {
-        HELP: "Visual Python 2.2.5"
+        HELP: "Visual Python 2.2.7"
         , ICON: "vp-main-icon"
         , ID: "vpBtnToggle"
         , NAME: "toggle-vp"
diff --git a/js/com/component/PopupComponent.js b/js/com/component/PopupComponent.js
index 35e02fcc..012baf34 100644
--- a/js/com/component/PopupComponent.js
+++ b/js/com/component/PopupComponent.js
@@ -709,7 +709,9 @@ define([
          */
         checkRequiredOption() {
             let requiredFilled = true;
-            let requiredTags = $(this.wrapSelector('input[required=true],input[required=required]'));
+            let requiredTags = $(this.wrapSelector('input[required=true]') + ',' + this.wrapSelector('input[required=required]'));
+
+            vpLog.display(VP_LOG_TYPE.DEVELOP, 'checkRequiredOption', this, requiredTags);
 
             if (requiredTags) {
                 for (let i = 0; i < requiredTags.length; i++) {
diff --git a/js/m_apps/Import.js b/js/m_apps/Import.js
index e023b307..4d8ab01b 100644
--- a/js/m_apps/Import.js
+++ b/js/m_apps/Import.js
@@ -29,6 +29,14 @@ define([
                 , include: [
                     '%matplotlib inline'
                 ]
+            },
+            { i0: 'seaborn', i1: 'sns', type: 'module'},
+            {
+                i0: 'plotly.express', i1: 'px', type: 'module'
+                , include: [
+                    'from plotly.offline import init_notebook_mode',
+                    'init_notebook_mode(connected=True)'
+                ]
             }
         ],
         'machine-learning': [
@@ -46,7 +54,6 @@ define([
             /** Write codes executed before rendering */
             this.config.dataview = false;
             this.config.sizeLevel = 1;
-            this.config.checkModules = ['pd'];
 
             let savedData = vpConfig.getDataSimple('', 'vpimport');
             // Reset abnormal data
@@ -243,14 +250,19 @@ define([
                         // module
                         sbCode.appendFormat("import {0}{1}", pacI0, ((pacI1 === undefined || pacI1 === "") ? "" : (" as " + pacI1)));
                     }
-                }
 
-                // Need additional code?
-                if (pacI0 == 'matplotlib.pyplot' || pacI0 == 'matplotlib') {
-                    sbCode.appendLine();
-                    sbCode.append('%matplotlib inline');
+                    // Need additional code?
+                    if (pacI0 == 'matplotlib.pyplot' || pacI0 == 'matplotlib') {
+                        sbCode.appendLine();
+                        sbCode.append('%matplotlib inline');
+                    }
+                    if (pacI0 == 'plotly.express' || pacI0 == 'plotly') {
+                        sbCode.appendLine();
+                        sbCode.appendLine('from plotly.offline import init_notebook_mode');
+                        sbCode.append('init_notebook_mode(connected=True)');
+                    }
                 }
-
+                
                 importMeta.push({ i0: pacI0, i1: pacI1, type: pacType, checked: pacChecked });
             }
             this.state.importMeta = importMeta;
diff --git a/js/m_apps/Profiling.js b/js/m_apps/Profiling.js
index 2052a433..5dcd3643 100644
--- a/js/m_apps/Profiling.js
+++ b/js/m_apps/Profiling.js
@@ -82,8 +82,10 @@ define([
                         code.append(saveas);
                         break;
                 }
-                com_interface.insertCell('code', code.toString(), true, 'Data Analysis > Profiling');
-                that.loadReportList();
+                that.checkAndRunModules(true).then(function() {
+                    com_interface.insertCell('code', code.toString(), true, 'Data Analysis > Profiling');
+                    that.loadReportList();
+                });
             });
         }
 
diff --git a/js/m_ml/DataSets.js b/js/m_ml/DataSets.js
index b5f2acf3..1849dfd5 100644
--- a/js/m_ml/DataSets.js
+++ b/js/m_ml/DataSets.js
@@ -30,6 +30,7 @@ define([
             super._init();
             this.config.sizeLevel = 2;
             this.config.dataview = false;
+            this.config.checkModules = ['pd'];
 
             this.state = {
                 loadType: 'load_boston',
diff --git a/js/m_ml/ModelInfo.js b/js/m_ml/ModelInfo.js
index 43482fbd..0d13f337 100644
--- a/js/m_ml/ModelInfo.js
+++ b/js/m_ml/ModelInfo.js
@@ -438,7 +438,7 @@ define([
                     options: [
                         { name: 'fi_featureData', label: 'Feature Data', component: ['data_select'], var_type: ['DataFrame', 'Series', 'ndarray', 'list', 'dict'], value: 'X_train' },
                         { name: 'sort', label: 'Sort data', component: ['bool_checkbox'], value: true, usePair: true },
-                        { name: 'top_count', label: 'Top count', component: ['input_number'], min: 0, max: 5, usePair: true },
+                        { name: 'top_count', label: 'Top count', component: ['input_number'], min: 0, usePair: true },
                     ]
                 }
             }
diff --git a/js/m_visualize/Chart.js b/js/m_visualize/Chart.js
index 0922e276..e71e0e15 100644
--- a/js/m_visualize/Chart.js
+++ b/js/m_visualize/Chart.js
@@ -570,10 +570,11 @@ define([
             var fontSize = $(this.wrapSelector('#vp_plFontSize')).val();
     
             code.appendLine('import matplotlib.pyplot as plt');
-            code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figWidth, figHeight);
+            code.appendLine('%matplotlib inline');
             if (styleName && styleName.length > 0) {
                 code.appendFormatLine("plt.style.use('{0}')", styleName);
             }
+            code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figWidth, figHeight);
             code.appendLine();
     
             code.appendLine('from matplotlib import rcParams');
diff --git a/js/m_visualize/ChartSetting.js b/js/m_visualize/ChartSetting.js
index 612bd2e8..34102551 100644
--- a/js/m_visualize/ChartSetting.js
+++ b/js/m_visualize/ChartSetting.js
@@ -29,11 +29,11 @@ define([
             this.config.dataview = false;
 
             this.state = {
-                figureWidth: 12,
-                figureHeight: 8,
+                figureWidth: '12',
+                figureHeight: '8',
                 styleSheet: '',
                 fontName: '',
-                fontSize: 10,
+                fontSize: '10',
                 ...this.state
             }
         }
@@ -124,7 +124,7 @@ define([
         generateImportCode() {
             var code = new com_String();
             code.appendLine('import matplotlib.pyplot as plt');
-            code.append('%matplotlib inline');
+            code.appendLine('%matplotlib inline');
             code.appendLine('import seaborn as sns');
             return [code.toString()];
         }
@@ -144,10 +144,10 @@ define([
                 code.appendLine('import matplotlib.pyplot as plt');
                 code.appendLine('%matplotlib inline');
                 code.appendLine('import seaborn as sns');
-                code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figureWidth, figureHeight);
                 if (styleSheet && styleSheet.length > 0) {
                     code.appendFormatLine("plt.style.use('{0}')", styleSheet);
                 }
+                code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figureWidth, figureHeight);
                 code.appendLine();
         
                 code.appendLine('from matplotlib import rcParams');
diff --git a/js/m_visualize/Plotly.js b/js/m_visualize/Plotly.js
index 511e4ae0..45d962d1 100644
--- a/js/m_visualize/Plotly.js
+++ b/js/m_visualize/Plotly.js
@@ -549,6 +549,11 @@ define([
                 // let height = $(this.wrapSelector('#vp_ptPreview')).height();
                 // console.log(width, height);
                 etcOptionCode.push(com_util.formatString('width={0}, height={1}', width, height));
+
+                // no auto-import for preview
+                this.config.checkModules = [];
+            } else {
+                this.config.checkModules = ['px'];
             }
 
             let generatedCode = com_generator.vp_codeGenerator(this, config, this.state
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
index eb92cf84..95370158 100644
--- a/js/m_visualize/Seaborn.js
+++ b/js/m_visualize/Seaborn.js
@@ -54,7 +54,7 @@ define([
                 sortBy: 'y',
                 sortType: '',
                 sortHue: '',
-                sortHueText: false,
+                sortHueText: true,
                 // axes options
                 x_limit_from: '',
                 x_limit_to: '',
@@ -199,10 +199,20 @@ define([
                     $(that.wrapSelector('#stat')).closest('.sb-option').show();
                 } else if (chartType == 'barplot') {
                     $(that.wrapSelector('#showValues')).closest('.sb-option').show();
-                    $(that.wrapSelector('#sortBy')).closest('.sb-option').show();
+                    if (that.state.setXY === false) {
+                        $(that.wrapSelector('#sortBy')).closest('.sb-option').show();
+                        if (that.state.hue !== '') {
+                            $(that.wrapSelector('#sortHue')).closest('.sb-option').show();
+                        }
+                    }
                 } else if (chartType == 'countplot') {
                     $(that.wrapSelector('#showValues')).closest('.sb-option').show();
-                    $(that.wrapSelector('#sortBy')).closest('.sb-option').show();
+                    if (that.state.setXY === false) {
+                        $(that.wrapSelector('#sortBy')).closest('.sb-option').show();
+                        if (that.state.hue !== '') {
+                            $(that.wrapSelector('#sortHue')).closest('.sb-option').show();
+                        }
+                    }
                 }
             });
             
@@ -243,36 +253,46 @@ define([
                     // FIXME: hide sort values for barplot/countplot (as temporary)
                     if (that.state.chartType == 'barplot' || that.state.chartType == 'countplot') {
                         $(that.wrapSelector('#sortBy')).closest('.sb-option').hide();
+                        $(that.wrapSelector('#sortHue')).closest('.sb-option').hide();
                     }
                     
                 }
             });
 
             // change hue
-            $(document).off('change', this.wrapSelector('.vp-state'));
+            $(document).off('change', this.wrapSelector('#hue'));
             $(document).on('change', this.wrapSelector('#hue'), function() {
                 let { chartType, data } = that.state;
                 let hue = $(this).val();
-                if (chartType == 'barplot' || chartType == 'countplot') {
-                    let colDtype = $(that.wrapSelector('#hue')).find('option:selected').data('type');
-                    console.log(data, hue);
-                    // get result and load column list
-                    vpKernel.getColumnCategory(data, hue).then(function (resultObj) {
-                        let { result } = resultObj;
-                        try {
-                            var category = JSON.parse(result);
-                            if (category && category.length > 0 && colDtype == 'object') {
-                                // if it's categorical column and its dtype is object, check 'Text' as default
-                                $(that.wrapSelector('#sortHueText')).prop('checked', true);
-                            } else {
+                if (hue !== '') {
+                    if (chartType == 'barplot' || chartType == 'countplot') {
+                        let colDtype = $(that.wrapSelector('#hue')).find('option:selected').data('type');
+                        console.log(data, hue);
+                        // get result and load column list
+                        vpKernel.getColumnCategory(data, hue).then(function (resultObj) {
+                            let { result } = resultObj;
+                            try {
+                                var category = JSON.parse(result);
+                                if (category && category.length > 0 && colDtype == 'object') {
+                                    // if it's categorical column and its dtype is object, check 'Text' as default
+                                    $(that.wrapSelector('#sortHueText')).prop('checked', true);
+                                    that.state.sortHueText = true;
+                                } else {
+                                    $(that.wrapSelector('#sortHueText')).prop('checked', false);
+                                    that.state.sortHueText = false;
+                                }
+                                $(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition(category, colDtype));
+                            } catch {
                                 $(that.wrapSelector('#sortHueText')).prop('checked', false);
+                                that.state.sortHueText = false;
+
+                                $(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition([], colDtype));
                             }
-                            $(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition(category, colDtype));
-                        } catch {
-                            $(that.wrapSelector('#sortHueText')).prop('checked', false);
-                            $(that.wrapSelector('#sortHue')).replaceWith(that.templateForHueCondition([], colDtype));
-                        }
-                    });
+                        });
+                    }
+                    $(that.wrapSelector('#sortHue')).closest('.sb-option').show();
+                } else {
+                    $(that.wrapSelector('#sortHue')).closest('.sb-option').hide();
                 }
             });
 
@@ -280,10 +300,8 @@ define([
             $(this.wrapSelector('#showValues')).on('change', function() {
                 let checked = $(this).prop('checked');
                 if (checked === true) {
-                    that.config.checkModules = ['plt', 'sns', 'np', 'vp_seaborn_show_values'];
                     $(that.wrapSelector('#showValuesPrecision')).attr('disabled', false);
                 } else {
-                    that.config.checkModules = ['plt', 'sns'];
                     $(that.wrapSelector('#showValuesPrecision')).attr('disabled', true);
                 }
             });
@@ -468,8 +486,20 @@ define([
                 $(page).find('#stat').closest('.sb-option').show();
             } else if (this.state.chartType == 'barplot') {
                 $(page).find('#showValues').closest('.sb-option').show();
+                if (this.state.setXY === false) {
+                    $(page).find('#sortBy').closest('.sb-option').show();
+                    if (this.state.hue !== '') {
+                        $(page).find('#sortHue').closest('.sb-option').show();
+                    }
+                }
             } else if (this.state.chartType == 'countplot') {
                 $(page).find('#showValues').closest('.sb-option').show();
+                if (this.state.setXY === false) {
+                    $(page).find('#sortBy').closest('.sb-option').show();
+                    if (this.state.hue !== '') {
+                        $(page).find('#sortHue').closest('.sb-option').show();
+                    }
+                }
             }
 
             //================================================================
@@ -696,6 +726,9 @@ define([
             });
 
             this.closeInnerPopup();
+
+            // load preview
+            this.loadPreview();
         }
 
         loadPreview() {
@@ -763,10 +796,10 @@ define([
                 code.appendLine('import matplotlib.pyplot as plt');
                 code.appendLine('%matplotlib inline');
                 code.appendLine('import seaborn as sns');
-                code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figWidth, figHeight);
                 if (styleName && styleName.length > 0) {
                     code.appendFormatLine("plt.style.use('{0}')", styleName);
                 }
+                code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figWidth, figHeight);
                 code.appendLine();
         
                 code.appendLine('from matplotlib import rcParams');
@@ -802,7 +835,19 @@ define([
             let config = this.chartConfig[chartType];
             let state = JSON.parse(JSON.stringify(this.state));
 
-            if (preview && useSampling) {
+            // set checkmodules
+            if (preview === true) {
+                // no auto-import for preview
+                this.config.checkModules = [];
+            } else {
+                if (showValues && showValues === true) {
+                    this.config.checkModules = ['plt', 'sns', 'np', 'vp_seaborn_show_values'];
+                } else {
+                    this.config.checkModules = ['plt', 'sns'];
+                }
+            }
+
+            if (preview === true && useSampling) {
                 // data sampling code for preview
                 // convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';
                 // convertedData = com_util.formatString('_vp_sample({0}, {1})', data, sampleCount);
@@ -838,7 +883,7 @@ define([
             if (showValues === true && chartType === 'barplot') {
                 etcOptionCode.push('ci=None');
             }
-            if (sortType != '') {
+            if (setXY === false && sortType !== '') {
                 let sortCode = '';
                 let sortTypeStr = (sortType === 'descending'? 'ascending=False': 'ascending=True');
                 let sortX = state.x;
@@ -847,35 +892,20 @@ define([
                     sortX = state.y;
                     sortY = state.x;
                 }
-                if (chartType === 'barplot') {
-                    if (setXY === true) {
-                        // TODO: sort on setXY
-                        // if (hue !== '' && sortHue !== '') {
-                        //     sortCode = com_util.formatString("{}.groupby({})[{}].mean().sort_values({}).index")
-                        // } else {
-                        //     sortCode = com_util.formatString("pd.concat([{0},{1}], axis=1).groupby({2})[{3}].mean().sort_values({4}).index"
-                        //                         , sortX, sortY, sortX)
-                        // }
+                if (chartType === 'barplot' && sortX !== '' && sortY !== '') {
+                    if (hue !== '' && sortHue !== '') {
+                        sortCode = com_util.formatString("{0}[{1}[{2}]=={3}].groupby({4})[{5}].mean().sort_values({6}).index"
+                                            , state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), sortX, sortY, sortTypeStr);
                     } else {
-                        if (hue !== '' && sortHue !== '') {
-                            sortCode = com_util.formatString("{0}[{1}[{2}]=={3}].groupby({4})[{5}].mean().sort_values({6}).index"
-                                                , state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), sortX, sortY, sortTypeStr);
-                        } else {
-                            sortCode = com_util.formatString("{0}.groupby({1})[{2}].mean().sort_values({3}).index", state.data, sortX, sortY, sortTypeStr);
-                        }
+                        sortCode = com_util.formatString("{0}.groupby({1})[{2}].mean().sort_values({3}).index", state.data, sortX, sortY, sortTypeStr);
                     }
-                } else if (chartType === 'countplot') {
+                } else if (chartType === 'countplot' && (sortX !== '' || sortY !== '')) {
                     let countVar = sortX === ''? sortY: sortX;
-                    if (setXY === true) {
-                        // TODO: sort on setXY
-                        ;
+                    if (hue !== '' && sortHue !== '') {
+                        sortCode = com_util.formatString("{0}[{1}[{2}]=={3}][{4}].value_counts({5}).index"
+                                            , state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), countVar, sortTypeStr);
                     } else {
-                        if (hue !== '' && sortHue !== '') {
-                            sortCode = com_util.formatString("{0}[{1}[{2}]=={3}][{4}].value_counts({5}).index"
-                                                , state.data, state.data, state.hue, com_util.convertToStr(sortHue, sortHueText), countVar, sortTypeStr);
-                        } else {
-                            sortCode = com_util.formatString("{0}[{1}].value_counts({2}).index", state.data, countVar, sortTypeStr);
-                        }
+                        sortCode = com_util.formatString("{0}[{1}].value_counts({2}).index", state.data, countVar, sortTypeStr);
                     }
                 }
 
@@ -965,7 +995,7 @@ define([
                 chartCode.appendFormatLine("plt.grid({0})", gridCodeList.join(', '));
             }
 
-            if (preview) {
+            if (preview === true) {
                 // Ignore warning
                 code.appendLine('import warnings');
                 code.appendLine('with warnings.catch_warnings():');
@@ -978,7 +1008,7 @@ define([
 
                 if (showValues && showValues === true) {
                     code.appendLine('ax = ' + generatedCode);
-                    code.append("vp_seaborn_show_values(ax");
+                    code.append("_vp_seaborn_show_values(ax");
                     if (showValuesPrecision !== '') {
                         code.appendFormat(", precision={0}", showValuesPrecision);
                     }
diff --git a/js/m_visualize/WordCloud.js b/js/m_visualize/WordCloud.js
index fad25ba2..4c8b53cd 100644
--- a/js/m_visualize/WordCloud.js
+++ b/js/m_visualize/WordCloud.js
@@ -31,7 +31,7 @@ define([
             this.config.installButton = true;
             this.config.importButton = true;
             this.config.dataview = false;
-            this.config.checkModules = ['Counter', 'plt', 'Wordcloud'];
+            this.config.checkModules = ['Counter', 'plt', 'WordCloud'];
 
             this.state = {
                 data: '',
@@ -304,11 +304,16 @@ define([
             let code = new com_String();
             
             // preview option
-            if (preview) {
+            if (preview === true) {
                 // Ignore warning
                 code.appendLine('import warnings');
                 code.appendLine('with warnings.catch_warnings():');
                 code.appendLine("    warnings.simplefilter('ignore')");
+
+                // no auto-import for preview
+                this.config.checkModules = [];
+            } else {
+                this.config.checkModules = ['Counter', 'plt', 'WordCloud'];
             }
 
             // counter for top limit
diff --git a/python/userCommand.py b/python/userCommand.py
index 96307fc6..6383f560 100644
--- a/python/userCommand.py
+++ b/python/userCommand.py
@@ -119,14 +119,16 @@ def _single(ax):
             for p in ax.patches:
                 _x = p.get_x() + p.get_width() / 2
                 _y = p.get_y() + p.get_height() + (p.get_height()*space)
-                value = pstr.format(p.get_height())
-                ax.text(_x, _y, value, ha='center') 
+                if not _vp_np.isnan(_x) and not _vp_np.isnan(_y):
+                    value = pstr.format(p.get_height())
+                    ax.text(_x, _y, value, ha='center') 
         elif orient == 'h':
             for p in ax.patches:
                 _x = p.get_x() + p.get_width() + (space - 0.01)
                 _y = p.get_y() + p.get_height() / 2
-                value = pstr.format(p.get_width())
-                ax.text(_x, _y, value, ha='left')
+                if not _vp_np.isnan(_x) and not _vp_np.isnan(_y):
+                    value = pstr.format(p.get_width())
+                    ax.text(_x, _y, value, ha='left')
 
     if isinstance(axs, _vp_np.ndarray):
         for idx, ax in _vp_np.ndenumerate(axs):
diff --git a/python/visualizationCommand.py b/python/visualizationCommand.py
new file mode 100644
index 00000000..25775d61
--- /dev/null
+++ b/python/visualizationCommand.py
@@ -0,0 +1,42 @@
+import numpy as _vp_np
+def _vp_seaborn_show_values(axs, precision=1, space=0.01):
+    """
+    Show values on Seaborn plots
+    - inner function for showing preview on Seaborn app
+    """
+    pstr = '{:.' + str(precision) + 'f}'
+    
+    def _single(ax):
+        # check orient
+        orient = 'v'
+        if len(ax.patches) == 1:
+            # check if 0
+            if ax.patches[0].get_x() == 0:
+                orient = 'h'
+        else:
+            # compare 0, 1 patches
+            p0 = ax.patches[0]
+            p1 = ax.patches[1]
+            if p0.get_x() == p1.get_x():
+                orient = 'h'
+                
+        if orient == 'v':
+            for p in ax.patches:
+                _x = p.get_x() + p.get_width() / 2
+                _y = p.get_y() + p.get_height() + (p.get_height()*space)
+                if not _vp_np.isnan(_x) and not _vp_np.isnan(_y):
+                    value = pstr.format(p.get_height())
+                    ax.text(_x, _y, value, ha='center') 
+        elif orient == 'h':
+            for p in ax.patches:
+                _x = p.get_x() + p.get_width() + (space - 0.01)
+                _y = p.get_y() + p.get_height() / 2
+                if not _vp_np.isnan(_x) and not _vp_np.isnan(_y):
+                    value = pstr.format(p.get_width())
+                    ax.text(_x, _y, value, ha='left')
+
+    if isinstance(axs, _vp_np.ndarray):
+        for idx, ax in _vp_np.ndenumerate(axs):
+            _single(ax)
+    else:
+        _single(axs)
\ No newline at end of file