diff --git a/production/apexcharts.html b/production/apexcharts.html
index cc9b20a9..a5d8dbe9 100644
--- a/production/apexcharts.html
+++ b/production/apexcharts.html
@@ -367,6 +367,31 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="col-md-6 col-sm-6  ">
+                            <div class="x_panel">
+                                <div class="x_title">
+                                    <h2>Bar chart</h2>
+                                    <ul class="nav navbar-right panel_toolbox">
+                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                        </li>
+                                        <li class="dropdown">
+                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                                <a class="dropdown-item" href="#">Settings 1</a>
+                                                <a class="dropdown-item" href="#">Settings 2</a>
+                                            </div>
+                                        </li>
+                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                        </li>
+                                    </ul>
+                                    <div class="clearfix"></div>
+                                </div>
+                                <div class="x_content">
+                                    <div id="barChart">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -561,13 +586,43 @@
             }
         };
 
+        var barchartoptions = {
+            series: [{
+                data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
+            }],
+            chart: {
+                type: 'bar',
+                height: 350
+            },
+            colors: ["#00586c", "#00c49d"],
+            plotOptions: {
+                bar: {
+                    borderRadius: 4,
+                    horizontal: true,
+                }
+            },
+            dataLabels: {
+                enabled: false
+            },
+            xaxis: {
+                categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
+                    'United States', 'China', 'Germany'
+                ],
+            }
+        };
+
+
+
+
         var linechart = new ApexCharts(document.querySelector("#lineChart"), linechartoptions);
         var areachart = new ApexCharts(document.querySelector("#areaChart"), areachartoptions);
         var columnchart = new ApexCharts(document.querySelector("#columnChart"), columnchartoptions);
+        var barchart = new ApexCharts(document.querySelector("#barChart"), barchartoptions);
 
         linechart.render();
         areachart.render();
         columnchart.render();
+        barchart.render();
     </script>