Merge pull request #19 from Saranya13/master

config(EJ2-000): V18.4.30 Released
2020-12-22 14:51:32 +05:30 · 2020-12-22 14:51:32 +05:30 · e5d3c15363
--- a/index.html
+++ b/index.html
@ -2,6 +2,12 @@
 <html lang="en">

 <head>
+    <script>
+    var orgin = location.origin;
+    var baseref = location.href.split('#')[0].replace(orgin, '');
+    document.write('<base href=\"' + baseref + '\">');
+    </script>
+
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "@syncfusion/ej2-javascript-samples",
-    "version": "18.3.35",
+    "version": "18.4.30",
    "description": "Examples of JavaScript (ES5) UI Controls",
    "author": "Syncfusion Inc.",
    "license": "SEE LICENSE IN license",
--- a/src/auto-complete/locale.json
+++ b/src/auto-complete/locale.json
@ -2,31 +2,31 @@
    "de": {
        "dropdowns": {
            "noRecordsTemplate": "Keine Aufzeichnungen gefunden",
-            "actionFailureTemplate": "Die Anforderung ist fehlgeschlagen"
+            "actionFailureTemplate": "Anfrage fehlgeschlagen"
        }
    },
    "ar": {
        "dropdowns": {
-            "noRecordsTemplate": "لا توجد سجلات",
-            "actionFailureTemplate": "أخفق الطلب"
+            "noRecordsTemplate": "لا توجد سجلاتلات",
+            "actionFailureTemplate": "الطلب فشل"
        }
    },
    "en": {
        "dropdowns": {
-            "noRecordsTemplate": "No Records Found",
-            "actionFailureTemplate": "The Request Failed"
+            "noRecordsTemplate": "No records found",
+            "actionFailureTemplate": "Request failed"
        }
    },
    "zh": {
        "dropdowns": {
-            "noRecordsTemplate": "没有找到记录",
-            "actionFailureTemplate": "请求失败"
+            "noRecordsTemplate": "沒有找到記錄",
+            "actionFailureTemplate": "請求失敗"
        }
    },
    "fr-CH": {
        "dropdowns": {
            "noRecordsTemplate": "Aucun enregistrement trouvé",
-            "actionFailureTemplate": "La demande a échoué"
+            "actionFailureTemplate": "Demande échoué"
        }
    }
 }
--- a/src/avatar/badge-stack.json
+++ b/src/avatar/badge-stack.json
--- a/src/avatar/card-stack.json
+++ b/src/avatar/card-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/card/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div class=\"sample_container\">\n        <!-- Card Component -->\n        <div class=\"e-card e-custom-card\">\n            <div class=\"e-card-header\">\n                <!-- xLarge Circle Avatar-->\n                <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n                    <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n                </div>\n                &#xA0;\n            </div>\n            <div class=\"e-card-header\">\n                <div class=\"e-card-header-caption center\">\n                    <div class=\"e-card-header-title name\">Laura Callahan</div>\n                    <div class=\"e-card-sub-title\">Sales Coordinator</div>\n                </div>\n            </div>\n            <div class=\"e-card-content\">\n                    <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n                        in business French. She reads and writes French.</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n\n\n<style>\n    .sample_container {\n        max-width: 300px;\n        margin: auto;\n        min-height: 400px;\n    }\n\n    /* Card Customizations */\n\n    .e-custom-card {\n        position: relative;\n        margin-top: 80px;\n        overflow: visible;\n        border-radius: 15px;\n        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n        transition: 0.2s;\n        border-width: 1px;\n        padding: 1px;\n    }\n\n    .e-custom-card.e-card:hover {\n        border-width: 1px;\n        padding: 1px;\n    }\n\n    .e-custom-card :nth-child(2) .e-card-header-title.name {\n        margin-top: 20px;\n    }\n\n    .sample_container p.avatar-content {\n        line-height: 20px;\n        font-family: inherit;\n    }\n\n    .e-custom-card .e-card-header {\n        text-align: center;\n    }\n\n    .e-custom-card .e-avatar {\n        font-size: 40px;\n        position: absolute;\n        top: calc(0% - 1.5em);\n        left: calc(50% - 1.5em);\n        box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n    }\n\n    .e-card.e-custom-card :nth-child(3) {\n        padding: 12px 0px 20px 0px;\n        height: 130px;\n    }\n\n    .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n        font-size: 24px;\n        font-weight: 500;\n        line-height: normal;\n        color: rgba(83, 101, 132, 0.65);\n        text-shadow: 0 0 0.1px;\n    }\n\n    .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n        font-size: 12px;\n        font-weight: 500;\n        line-height: normal;\n        color: rgba(86, 90, 97, 0.65);\n        text-shadow: 0 0 0.1px;\n    }\n\n    .e-custom-card.e-card .e-card-content {\n        overflow: visible;\n        width: auto;\n        margin: -5px 20px 0 20px;\n        word-spacing: 1px;\n    }\n\n    .avatar-content {\n        color: rgba(250, 200, 130, 0.6);\n        margin: 0 auto;\n        text-align: center;\n        color: rgb(94, 94, 94);\n        border: none;\n        padding: 0;\n        font-size: 14px;\n    }\n\n    .avatar-content {\n        margin-bottom: 0;\n    }\n\n    .sample_container .name {\n        margin-top: 10px;\n    }\n\n    .highcontrast .e-custom-card.e-card .avatar-content {\n        color: rgba(255, 255, 255, 0.84);\n    }\n\n    .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n        color: rgba(255, 255, 255, 0.45);\n    }\n\n    .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n        color: rgba(255, 255, 255, 0.84);\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Basic Layout Badge\n */\n\n    //\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/avatar/card/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div class=\"sample_container\">\n        <!-- Card Component -->\n        <div class=\"e-card e-custom-card\">\n            <div class=\"e-card-header\">\n                <!-- xLarge Circle Avatar-->\n                <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n                    <img src=\"//npmci.syncfusion.com/production/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n                </div>\n                &#xA0;\n            </div>\n            <div class=\"e-card-header\">\n                <div class=\"e-card-header-caption center\">\n                    <div class=\"e-card-header-title name\">Laura Callahan</div>\n                    <div class=\"e-card-sub-title\">Sales Coordinator</div>\n                </div>\n            </div>\n            <div class=\"e-card-content\">\n                    <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n                        in business French. She reads and writes French.</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n\n\n<style>\n    .sample_container {\n        max-width: 300px;\n        margin: auto;\n        min-height: 400px;\n    }\n\n    /* Card Customizations */\n\n    .e-custom-card {\n        position: relative;\n        margin-top: 80px;\n        overflow: visible;\n        border-radius: 15px;\n        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n        transition: 0.2s;\n        border-width: 1px;\n        padding: 1px;\n    }\n\n    .e-custom-card.e-card:hover {\n        border-width: 1px;\n        padding: 1px;\n    }\n\n    .e-custom-card :nth-child(2) .e-card-header-title.name {\n        margin-top: 20px;\n    }\n\n    .sample_container p.avatar-content {\n        line-height: 20px;\n        font-family: inherit;\n    }\n\n    .e-custom-card .e-card-header {\n        text-align: center;\n    }\n\n    .e-custom-card .e-avatar {\n        font-size: 40px;\n        position: absolute;\n        top: calc(0% - 1.5em);\n        left: calc(50% - 1.5em);\n        box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n    }\n\n    .e-card.e-custom-card :nth-child(3) {\n        padding: 12px 0px 20px 0px;\n        height: 130px;\n    }\n\n    .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n        font-size: 24px;\n        font-weight: 500;\n        line-height: normal;\n        color: rgba(83, 101, 132, 0.65);\n        text-shadow: 0 0 0.1px;\n    }\n\n    .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n        font-size: 12px;\n        font-weight: 500;\n        line-height: normal;\n        color: rgba(86, 90, 97, 0.65);\n        text-shadow: 0 0 0.1px;\n    }\n\n    .e-custom-card.e-card .e-card-content {\n        overflow: visible;\n        width: auto;\n        margin: -5px 20px 0 20px;\n        word-spacing: 1px;\n    }\n\n    .avatar-content {\n        color: rgba(250, 200, 130, 0.6);\n        margin: 0 auto;\n        text-align: center;\n        color: rgb(94, 94, 94);\n        border: none;\n        padding: 0;\n        font-size: 14px;\n    }\n\n    .avatar-content {\n        margin-bottom: 0;\n    }\n\n    .sample_container .name {\n        margin-top: 10px;\n    }\n\n    .highcontrast .e-custom-card.e-card .avatar-content {\n        color: rgba(255, 255, 255, 0.84);\n    }\n\n    .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n        color: rgba(255, 255, 255, 0.45);\n    }\n\n    .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n        color: rgba(255, 255, 255, 0.84);\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Basic Layout Badge\n */\n\n    //\n"}
--- a/src/avatar/default-stack.json
+++ b/src/avatar/default-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div class=\"sample_container avatar-default\">\n        <div class=\"avatar-block\">\n            <div class=\"e-card e-avatar-showcase\">\n                <div class=\"e-card-content\">\n                    <!-- xSmall Avatar-->\n                    <div class=\"e-avatar e-avatar-xsmall image\"></div>\n                    <!-- Small Avatar-->\n                    <div class=\"e-avatar e-avatar-small image\"></div>\n                    <!-- Avatar-->\n                    <div class=\"e-avatar image\"></div>\n                    <!-- Large Avatar-->\n                    <div class=\"e-avatar e-avatar-large image\"></div>\n                    <!-- xLarge Avatar-->\n                    <div class=\"e-avatar e-avatar-xlarge image\"></div>\n                </div>\n                <div class=\"e-card-content\">\n                    <div>Default</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"circleAvatar avatar-block\">\n            <div class=\"e-card e-avatar-showcase\">\n                <div class=\"e-card-content\">\n                    <!-- xSmall Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n                    <!-- Small Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n                    <!-- Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-circle image\"></div>\n                    <!-- Large Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n                    <!-- xLarge Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n                </div>\n                <div class=\"e-card-content\">\n                    <div>Circle</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n\n\n<style>\n    .control-section {\n        overflow: auto;\n    }\n\n    /* Media Quries for various devices */\n\n    @media only screen and (max-width: 965px) {\n        .sample_container.avatar-default {\n            max-width: 332px;\n            margin: auto;\n            margin-top: 0;\n        }\n        .circleAvatar {\n            margin-top: 15px;\n        }\n        .e-avatar-showcase.e-card {\n            width: 300px;\n        }\n    }\n\n    @media only screen and (min-width: 965px) {\n        .sample_container.avatar-default {\n            max-width: 825px;\n            margin: auto;\n            margin-top: 70px;\n        }\n        .e-avatar-showcase.e-card {\n            width: 400px;\n        }\n    }\n\n    .sample_container.avatar-default .avatar-block {\n        display: inline-block;\n        vertical-align: top;\n    }\n\n    /* Assinging image for avatar in 'background-image' property */\n\n    .e-avatar.image {\n        background-image: url(//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png);\n        background-repeat: no-repeat;\n        background-size: cover;\n        background-position: center;\n    }\n\n    /* Card Customization */\n\n    .e-avatar-showcase.e-card {\n        height: 140px;\n        padding: 5px;\n        margin: 5px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        border-radius: 8px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n        align-self: center;\n        font-size: 18px;\n        letter-spacing: 1px;\n        text-shadow: #eaeaea 1px 1px 2px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n        color: rgba(0, 0, 0, 0.75);\n        white-space: pre-line;\n        font-size: 14px;\n        text-shadow: #eaeaea 1px 1px 2px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n        margin: 0;\n    }\n\n    .e-avatar-showcase.e-card .e-card-content {\n        align-self: center;\n        padding: 10px 0 10px 0;\n        overflow: visible;\n    }\n\n    .bootstrap4 .e-avatar-showcase.e-card {\n        box-shadow: none;\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Basic Layout Badge\n */\n\n    //\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/avatar/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div class=\"sample_container avatar-default\">\n        <div class=\"avatar-block\">\n            <div class=\"e-card e-avatar-showcase\">\n                <div class=\"e-card-content\">\n                    <!-- xSmall Avatar-->\n                    <div class=\"e-avatar e-avatar-xsmall image\"></div>\n                    <!-- Small Avatar-->\n                    <div class=\"e-avatar e-avatar-small image\"></div>\n                    <!-- Avatar-->\n                    <div class=\"e-avatar image\"></div>\n                    <!-- Large Avatar-->\n                    <div class=\"e-avatar e-avatar-large image\"></div>\n                    <!-- xLarge Avatar-->\n                    <div class=\"e-avatar e-avatar-xlarge image\"></div>\n                </div>\n                <div class=\"e-card-content\">\n                    <div>Default</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"circleAvatar avatar-block\">\n            <div class=\"e-card e-avatar-showcase\">\n                <div class=\"e-card-content\">\n                    <!-- xSmall Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n                    <!-- Small Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n                    <!-- Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-circle image\"></div>\n                    <!-- Large Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n                    <!-- xLarge Circle Avatar-->\n                    <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n                </div>\n                <div class=\"e-card-content\">\n                    <div>Circle</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n\n\n<style>\n    .control-section {\n        overflow: auto;\n    }\n\n    /* Media Quries for various devices */\n\n    @media only screen and (max-width: 965px) {\n        .sample_container.avatar-default {\n            max-width: 332px;\n            margin: auto;\n            margin-top: 0;\n        }\n        .circleAvatar {\n            margin-top: 15px;\n        }\n        .e-avatar-showcase.e-card {\n            width: 300px;\n        }\n    }\n\n    @media only screen and (min-width: 965px) {\n        .sample_container.avatar-default {\n            max-width: 825px;\n            margin: auto;\n            margin-top: 70px;\n        }\n        .e-avatar-showcase.e-card {\n            width: 400px;\n        }\n    }\n\n    .sample_container.avatar-default .avatar-block {\n        display: inline-block;\n        vertical-align: top;\n    }\n\n    /* Assinging image for avatar in 'background-image' property */\n\n    .e-avatar.image {\n        background-image: url(//npmci.syncfusion.com/production/demos/src/avatar/images/pic01.png);\n        background-repeat: no-repeat;\n        background-size: cover;\n        background-position: center;\n    }\n\n    /* Card Customization */\n\n    .e-avatar-showcase.e-card {\n        height: 140px;\n        padding: 5px;\n        margin: 5px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        border-radius: 8px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n        align-self: center;\n        font-size: 18px;\n        letter-spacing: 1px;\n        text-shadow: #eaeaea 1px 1px 2px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n        color: rgba(0, 0, 0, 0.75);\n        white-space: pre-line;\n        font-size: 14px;\n        text-shadow: #eaeaea 1px 1px 2px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n        margin: 0;\n    }\n\n    .e-avatar-showcase.e-card .e-card-content {\n        align-self: center;\n        padding: 10px 0 10px 0;\n        overflow: visible;\n    }\n\n    .bootstrap4 .e-avatar-showcase.e-card {\n        box-shadow: none;\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Basic Layout Badge\n */\n\n    //\n"}
--- a/src/avatar/listview-stack.json
+++ b/src/avatar/listview-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/listview/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <!-- Listview element -->\n    <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n    .control-section {\n        overflow: auto;\n    }\n\n    /* Listview Customization */\n\n    #letterAvatarList {\n        max-width: 350px;\n        margin: auto;\n        border: 1px solid #dddddd;\n        border-radius: 3px;\n    }\n\n    #letterAvatarList .listWrapper {\n        width: inherit;\n        height: inherit;\n        position: relative;\n    }\n\n    #letterAvatarList .e-list-header {\n        height: 54px;\n    }\n\n    .material #letterAvatarList .e-list-header .e-text {\n        line-height: 22px;\n    }\n\n    .fabric #letterAvatarList .e-list-header .e-text {\n        line-height: 22px;\n    }\n\n    .bootstrap #letterAvatarList .e-list-header .e-text {\n        line-height: 13px;\n    }\n\n    .highcontrast #letterAvatarList .e-list-header .e-text {\n        line-height: 20px;\n    }\n\n    #letterAvatarList .e-list-item {\n        cursor: pointer;\n        height: 50px;\n        line-height: 44px;\n        border: 0;\n    }\n\n    /* Badge Positioning */\n\n    #letterAvatarList .e-badge {\n        margin-top: 12px;\n    }\n\n    #letterAvatarList .listWrapper .list-text {\n        width: 60%;\n        display: inline-block;\n        vertical-align: middle;\n        margin: 0 50px;\n    }\n\n    /* Avatar Positioning */\n\n    #letterAvatarList .listWrapper .e-avatar {\n        position: absolute;\n        top: calc(100% - 40px);\n        font-size: 10px;\n        left: 5px;\n    }\n\n    /* Avatar Background Customization */\n\n    #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n        background-color: #039BE5;\n    }\n\n    #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n        background-color: #E91E63;\n    }\n\n    #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n        background-color: #009688;\n    }\n\n    /* Avatar images using 'background-image' property */\n\n    .pic01 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png');\n    }\n\n    .pic02 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic02.png');\n    }\n\n    .pic03 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic03.png');\n    }\n\n    .pic04 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic04.png');\n    }\n\n    .bootstrap4 #letterAvatarList .e-list-item {\n        line-height: 30px;\n        padding: 8px 16px 8px 16px;\n    }\n\n    .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n        top: calc(100% - 48px);\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Avatar listview\n */\n\n    var letterAvatarList = new ej.lists.ListView({\n        // Bind listview datasource\n        dataSource: window.dataSource,\n        // Assign header title\n        headerTitle: 'Contacts',\n        // Enable header title\n        showHeader: true,\n        // Assign list-item template\n        template: '<div class=\"listWrapper\">' +\n            '${if(avatar!==\"\")}' +\n            '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n            '${else}' +\n            '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n            '${/if}' +\n            '<span class=\"list-text\">' +\n            '${text} </span> </div>',\n        // Assign sorting order\n        sortOrder: 'Ascending'\n    });\n    letterAvatarList.appendTo('#letterAvatarList');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/avatar/listview/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <!-- Listview element -->\n    <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n    .control-section {\n        overflow: auto;\n    }\n\n    /* Listview Customization */\n\n    #letterAvatarList {\n        max-width: 350px;\n        margin: auto;\n        border: 1px solid #dddddd;\n        border-radius: 3px;\n    }\n\n    #letterAvatarList .listWrapper {\n        width: inherit;\n        height: inherit;\n        position: relative;\n    }\n\n    #letterAvatarList .e-list-header {\n        height: 54px;\n    }\n\n    .material #letterAvatarList .e-list-header .e-text {\n        line-height: 22px;\n    }\n\n    .fabric #letterAvatarList .e-list-header .e-text {\n        line-height: 22px;\n    }\n\n    .bootstrap #letterAvatarList .e-list-header .e-text {\n        line-height: 13px;\n    }\n\n    .highcontrast #letterAvatarList .e-list-header .e-text {\n        line-height: 20px;\n    }\n\n    #letterAvatarList .e-list-item {\n        cursor: pointer;\n        height: 50px;\n        line-height: 44px;\n        border: 0;\n    }\n\n    /* Badge Positioning */\n\n    #letterAvatarList .e-badge {\n        margin-top: 12px;\n    }\n\n    #letterAvatarList .listWrapper .list-text {\n        width: 60%;\n        display: inline-block;\n        vertical-align: middle;\n        margin: 0 50px;\n    }\n\n    /* Avatar Positioning */\n\n    #letterAvatarList .listWrapper .e-avatar {\n        position: absolute;\n        top: calc(100% - 40px);\n        font-size: 10px;\n        left: 5px;\n    }\n\n    /* Avatar Background Customization */\n\n    #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n        background-color: #039BE5;\n    }\n\n    #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n        background-color: #E91E63;\n    }\n\n    #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n        background-color: #009688;\n    }\n\n    /* Avatar images using 'background-image' property */\n\n    .pic01 {\n        background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic01.png');\n    }\n\n    .pic02 {\n        background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic02.png');\n    }\n\n    .pic03 {\n        background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic03.png');\n    }\n\n    .pic04 {\n        background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic04.png');\n    }\n\n    .bootstrap4 #letterAvatarList .e-list-item {\n        line-height: 30px;\n        padding: 8px 16px 8px 16px;\n    }\n\n    .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n        top: calc(100% - 48px);\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Avatar listview\n */\n\n    var letterAvatarList = new ej.lists.ListView({\n        // Bind listview datasource\n        dataSource: window.dataSource,\n        // Assign header title\n        headerTitle: 'Contacts',\n        // Enable header title\n        showHeader: true,\n        // Assign list-item template\n        template: '<div class=\"listWrapper\">' +\n            '${if(avatar!==\"\")}' +\n            '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n            '${else}' +\n            '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n            '${/if}' +\n            '<span class=\"list-text\">' +\n            '${text} </span> </div>',\n        // Assign sorting order\n        sortOrder: 'Ascending'\n    });\n    letterAvatarList.appendTo('#letterAvatarList');\n"}
--- a/src/avatar/types-stack.json
+++ b/src/avatar/types-stack.json
--- a/src/card/basic-stack.json
+++ b/src/card/basic-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/card/basic/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n    <div class=\"e-card-resize-container\">\n        <div class=\"row\">\n            <div class=\"row card-layout\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <!-- Basic Card Layout  -->\n                    <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n                        <div class=\"e-card-header\">\n                            <div class=\"e-card-header-caption\">\n                                <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n                                <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n                            </div>\n                        </div>\n                        <div class=\"e-card-content\">\n                            Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics&#x2014;anything that sounds\n                            like the future and probably involves lots of numbers. Many of these topics can be grouped under\n                            the intimidating term data science.\n                        </div>\n                        <div class=\"e-card-actions\">\n                            <button class=\"e-btn e-outline e-primary\">\n                                Read More\n                            </button>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <!-- Weather Card Layout  -->\n                    <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n                        <div class=\"e-card-header\">\n                            <div class=\"e-card-header-caption\">\n                                <div class=\"e-card-header-title\">Today</div>\n                                <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n                            </div>\n                        </div>\n                        <div class=\"e-card-header weather_report\">\n                            <div class=\"e-card-header-image\"></div>\n                            <div class=\"e-card-header-caption\">\n                                <div class=\"e-card-header-title\">1&#xBA; / -4&#xBA;</div>\n                                <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<style>\n    /* Weather Card Layout Customization */\n\n    .card-control-section.basic_card_layout #weather_card.e-card {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/card/images/weather.png');\n    }\n\n    .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n    .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n        color: white;\n    }\n\n    .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n        border: none;\n    }\n\n    .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n        text-align: right;\n    }\n\n    .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/card/images/rainy.svg');\n    }\n\n    .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n        width: 100%;\n        padding: 10px;\n    }\n\n    .card-control-section.basic_card_layout .card-layout {\n        margin: auto;\n        max-width: 400px;\n    }\n\n    @media (min-width: 870px) {\n        .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n            width: 50%;\n        }\n\n        .card-control-section.basic_card_layout .card-layout {\n            max-width: 870px;\n        }\n    }\n</style></div></body></html>","index.js":"{{ripple}}\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/card/basic/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n    <div class=\"e-card-resize-container\">\n        <div class=\"row\">\n            <div class=\"row card-layout\">\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <!-- Basic Card Layout  -->\n                    <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n                        <div class=\"e-card-header\">\n                            <div class=\"e-card-header-caption\">\n                                <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n                                <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n                            </div>\n                        </div>\n                        <div class=\"e-card-content\">\n                            Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics&#x2014;anything that sounds\n                            like the future and probably involves lots of numbers. Many of these topics can be grouped under\n                            the intimidating term data science.\n                        </div>\n                        <div class=\"e-card-actions\">\n                            <button class=\"e-btn e-outline e-primary\">\n                                Read More\n                            </button>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n                    <!-- Weather Card Layout  -->\n                    <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n                        <div class=\"e-card-header\">\n                            <div class=\"e-card-header-caption\">\n                                <div class=\"e-card-header-title\">Today</div>\n                                <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n                            </div>\n                        </div>\n                        <div class=\"e-card-header weather_report\">\n                            <div class=\"e-card-header-image\"></div>\n                            <div class=\"e-card-header-caption\">\n                                <div class=\"e-card-header-title\">1&#xBA; / -4&#xBA;</div>\n                                <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<style>\n    /* Weather Card Layout Customization */\n\n    .card-control-section.basic_card_layout #weather_card.e-card {\n        background-image: url('//npmci.syncfusion.com/production/demos/src/card/images/weather.png');\n    }\n\n    .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n    .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n        color: white;\n    }\n\n    .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n        border: none;\n    }\n\n    .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n        text-align: right;\n    }\n\n    .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n        background-image: url('//npmci.syncfusion.com/production/demos/src/card/images/rainy.svg');\n    }\n\n    .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n        width: 100%;\n        padding: 10px;\n    }\n\n    .card-control-section.basic_card_layout .card-layout {\n        margin: auto;\n        max-width: 400px;\n    }\n\n    @media (min-width: 870px) {\n        .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n            width: 50%;\n        }\n\n        .card-control-section.basic_card_layout .card-layout {\n            max-width: 870px;\n        }\n    }\n</style></div></body></html>","index.js":"{{ripple}}\n"}
--- a/src/card/flip-stack.json
+++ b/src/card/flip-stack.json
--- a/src/card/horizontal-stack.json
+++ b/src/card/horizontal-stack.json
--- a/src/card/reveal-stack.json
+++ b/src/card/reveal-stack.json
--- a/src/card/swipeable-stack.json
+++ b/src/card/swipeable-stack.json
--- a/src/card/tile-stack.json
+++ b/src/card/tile-stack.json
--- a/src/card/vertical-stack.json
+++ b/src/card/vertical-stack.json
--- a/src/chart/accumulation-distribution-indicator-stack.json
+++ b/src/chart/accumulation-distribution-indicator-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/accumulation-distribution-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"adi-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ADI Indicator\n */\n var _this = this;\n this.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                minimum: 50, maximum: 170,\n                plotOffset: 25,\n                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n            },\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,\n                    interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',\n                    stripLines: [\n                        {\n                            start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,\n                            opacity: 0.1, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n                    period: 3, animation: { enable: true }\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            axisLabelRender: function (args) {\n                if (args.axis.name === 'secondary') {\n                    var value = Number(args.text) / 1000000000;\n                    args.text = String(value) + 'bn';\n                }\n            },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: {\n                visible: false\n            }\n        });\n        chart.appendTo('#adi-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            _this.renderChart(chartData);\n        };\n        \n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/accumulation-distribution-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"adi-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ADI Indicator\n */\n var _this = this;\n this.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                minimum: 50, maximum: 170,\n                plotOffset: 25,\n                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n            },\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,\n                    interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',\n                    stripLines: [\n                        {\n                            start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,\n                            opacity: 0.1, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n                    period: 3, animation: { enable: true }\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            axisLabelRender: function (args) {\n                if (args.axis.name === 'secondary') {\n                    var value = Number(args.text) / 1000000000;\n                    args.text = String(value) + 'bn';\n                }\n            },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: {\n                visible: false\n            }\n        });\n        chart.appendTo('#adi-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            _this.renderChart(chartData);\n        };\n        \n    "}
--- a/src/chart/accumulation-distribution-indicator.html
+++ b/src/chart/accumulation-distribution-indicator.html
@ -3,7 +3,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample illustrates a stock chart with candle series and an accumulation distribution indicator. Trackball shows the information about the stock and signal value of a day.
+        This sample illustrates a stock chart with candle series and an <a href="https://ej2.syncfusion.com/documentation/chart/technical-indicators/">accumulation distribution indicator</a>. Trackball shows the information about the stock and signal value of a day.
   </p>
 </div>
 <div id="description">
--- a/src/chart/area-empty-stack.json
+++ b/src/chart/area-empty-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/area-empty/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series with empty points\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            interval: 2,\n            majorGridLines: { width: 0 },\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Rates',            \n            labelFormat: '{value}M',\n            lineStyle: { width: 0},\n            majorTickLines: { width: 0}\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },//Initializing Chart Series\n        series: [\n            {\n                type: 'Area',\n                dataSource: [{ x: '2002', y: 2 }, { x: '2003', y: 1.7 }, { x: '2004', y: 1.8 }, { x: '2005', y: 2.1 },\n                    { x: '2006', y: 2.3 }, { x: '2007', y: 1.7 }, { x: '2008', y: 1.5 }, { x: '2009', y: 1.8 },\n                    { x: '2010', y: 2 }, { x: 2011, y: 3.1 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'France',\n                opacity: 0.8, marker: { visible : false }\n            }, {\n                type: 'Area',\n                dataSource: [{ x: '2002', y: 2.2 }, { x: '2003', y: 3.4 }, { x: '2004', y: 2.8 }, { x: '2005', y: null },\n                    { x: '2006', y: null }, { x: '2007', y: 2.5 }, { x: '2008', y: 2.9 }, { x: '2009', y: 3.8 },\n                    { x: '2010', y: 1.4 }, { x: 2011, y: 3.1 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'US',\n                opacity: 0.8, marker: { visible : false }\n            },\n        ],\n        //Initializing Chart Title\n        title: 'Inflation Rate',\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#area-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/area-empty/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series with empty points\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            interval: 2,\n            majorGridLines: { width: 0 },\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Rates',            \n            labelFormat: '{value}M',\n            lineStyle: { width: 0},\n            majorTickLines: { width: 0}\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },//Initializing Chart Series\n        series: [\n            {\n                type: 'Area',\n                dataSource: [{ x: '2002', y: 2 }, { x: '2003', y: 1.7 }, { x: '2004', y: 1.8 }, { x: '2005', y: 2.1 },\n                    { x: '2006', y: 2.3 }, { x: '2007', y: 1.7 }, { x: '2008', y: 1.5 }, { x: '2009', y: 1.8 },\n                    { x: '2010', y: 2 }, { x: 2011, y: 3.1 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'France',\n                opacity: 0.8, marker: { visible : false }\n            }, {\n                type: 'Area',\n                dataSource: [{ x: '2002', y: 2.2 }, { x: '2003', y: 3.4 }, { x: '2004', y: 2.8 }, { x: '2005', y: null },\n                    { x: '2006', y: null }, { x: '2007', y: 2.5 }, { x: '2008', y: 2.9 }, { x: '2009', y: 3.8 },\n                    { x: '2010', y: 1.4 }, { x: 2011, y: 3.1 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'US',\n                opacity: 0.8, marker: { visible : false }\n            },\n        ],\n        //Initializing Chart Title\n        title: 'Inflation Rate',\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#area-container');\n"}
--- a/src/chart/area-segments-stack.json
+++ b/src/chart/area-segments-stack.json
--- a/src/chart/area-stack.json
+++ b/src/chart/area-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            majorGridLines: { width: 0 },\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Revenue in Millions',\n            minimum: 2,\n            maximum: 5,\n            interval: 1,\n            lineStyle: { width: 0},\n            majorTickLines: { width: 0},\n            labelFormat: '{value}M'\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Area',\n                dataSource: [{ x: new Date(2000, 0, 1), y: 4 }, { x: new Date(2001, 0, 1), y: 3.0 },\n                    { x: new Date(2002, 0, 1), y: 3.8 }, { x: new Date(2003, 0, 1), y: 3.4 },\n                    { x: new Date(2004, 0, 1), y: 3.2 }, { x: new Date(2005, 0, 1), y: 3.9 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product A',\n                opacity: 0.5, marker: { visible : false }\n            },\n            {\n                type: 'Area',\n                dataSource: [{ x: new Date(2000, 0, 1), y: 2.6 }, { x: new Date(2001, 0, 1), y: 2.8 },\n                    { x: new Date(2002, 0, 1), y: 2.6 }, { x: new Date(2003, 0, 1), y: 3 },\n                    { x: new Date(2004, 0, 1), y: 3.6 }, { x: new Date(2005, 0, 1), y: 3 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product B',\n                opacity: 0.5, marker: { visible : false }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Average Sales Comparison',\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#area-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            majorGridLines: { width: 0 },\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Revenue in Millions',\n            minimum: 2,\n            maximum: 5,\n            interval: 1,\n            lineStyle: { width: 0},\n            majorTickLines: { width: 0},\n            labelFormat: '{value}M'\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Area',\n                dataSource: [{ x: new Date(2000, 0, 1), y: 4 }, { x: new Date(2001, 0, 1), y: 3.0 },\n                    { x: new Date(2002, 0, 1), y: 3.8 }, { x: new Date(2003, 0, 1), y: 3.4 },\n                    { x: new Date(2004, 0, 1), y: 3.2 }, { x: new Date(2005, 0, 1), y: 3.9 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product A',\n                opacity: 0.5, marker: { visible : false }\n            },\n            {\n                type: 'Area',\n                dataSource: [{ x: new Date(2000, 0, 1), y: 2.6 }, { x: new Date(2001, 0, 1), y: 2.8 },\n                    { x: new Date(2002, 0, 1), y: 2.6 }, { x: new Date(2003, 0, 1), y: 3 },\n                    { x: new Date(2004, 0, 1), y: 3.6 }, { x: new Date(2005, 0, 1), y: 3 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product B',\n                opacity: 0.5, marker: { visible : false }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Average Sales Comparison',\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#area-container');\n"}
--- a/src/chart/area.html
+++ b/src/chart/area.html
@ -3,7 +3,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample visualizes the data about average sales comparison of two products by using default area series in the chart. 
+        This <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/area-chart">area chart</a> sample visualizes the data about average sales comparison of two products by using default area series in the chart. 
        Legend in the sample shows the information about the series.
    </p>
 </div>
--- a/src/chart/average-true-range-indicator-stack.json
+++ b/src/chart/average-true-range-indicator-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/average-true-range-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"atr-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ATR Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true },\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                minimum: 50, maximum: 170,\n                interval: 30, rowIndex: 1,\n                plotOffset: 25,\n                majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }\n            },\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },\n                    maximum: 14, minimum: 0, interval: 7, title: 'ATR',\n                    stripLines: [\n                        {\n                            start: 0, end: 14, text: '', color: '#6063ff', visible: true,\n                            opacity: 0.1, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n                    period: 3, animation: { enable: true }\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: {\n                visible: false\n            }\n        });\n        chart.appendTo('#atr-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/average-true-range-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"atr-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ATR Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true },\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                minimum: 50, maximum: 170,\n                interval: 30, rowIndex: 1,\n                plotOffset: 25,\n                majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }\n            },\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },\n                    maximum: 14, minimum: 0, interval: 7, title: 'ATR',\n                    stripLines: [\n                        {\n                            start: 0, end: 14, text: '', color: '#6063ff', visible: true,\n                            opacity: 0.1, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n                    period: 3, animation: { enable: true }\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: {\n                visible: false\n            }\n        });\n        chart.appendTo('#atr-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
--- a/src/chart/axes-crossing-stack.json
+++ b/src/chart/axes-crossing-stack.json
--- a/src/chart/axes-crossing.html
+++ b/src/chart/axes-crossing.html
@ -52,7 +52,7 @@
 </div>
 <div id="description">
    <p>
-        This sample demonstrates the axis crossing behavior in chart. 
+        This sample demonstrates the <a href="https://ej2.syncfusion.com/documentation/chart/axis.customization/">axis crossing</a> behavior in chart. 
        Axis can be positioned anywhere in the chart area by using the <code>crossesAt</code> property of axis. This property specifies where the horizontal axis should intersect or cross the vertical axis and vice-versa.
    </p>
    <p>
--- a/src/chart/bar-stack.json
+++ b/src/chart/bar-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/bar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"bar-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"https://www.gov.uk/\" target=\"_blank\">www.gov.uk</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bar Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            title: 'Food',\n            interval: 1,\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}B',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Bar',\n                dataSource: [\n                    { x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },\n                    { x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Imports', marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600', color:'#ffffff'\n                        }\n                    }\n                }\n            },\n            {\n                type: 'Bar',\n                dataSource: [\n                    { x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },\n                    { x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Exports', marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600', color:'#ffffff'\n                        }\n                    }\n                }\n            }\n        ],\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'UK Trade in Food Groups - 2015',\n\n    });\n    chart.appendTo('#bar-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/bar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"bar-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"https://www.gov.uk/\" target=\"_blank\">www.gov.uk</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bar Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            title: 'Food',\n            interval: 1,\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}B',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Bar',\n                dataSource: [\n                    { x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },\n                    { x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Imports', marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600', color:'#ffffff'\n                        }\n                    }\n                }\n            },\n            {\n                type: 'Bar',\n                dataSource: [\n                    { x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },\n                    { x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Exports', marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600', color:'#ffffff'\n                        }\n                    }\n                }\n            }\n        ],\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'UK Trade in Food Groups - 2015',\n\n    });\n    chart.appendTo('#bar-container');\n"}
--- a/src/chart/bar.html
+++ b/src/chart/bar.html
@ -6,7 +6,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample visualizes the data about UK trade in food groups of the year 2015 with default bar series in the chart. 
+        This <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/bar-chart">bar chart</a> sample visualizes the data about UK trade in food groups of the year 2015 with default bar series in the chart. 
        Data points values are showed by using data label.
    </p>
 </div>
--- a/src/chart/bollinger-stack.json
+++ b/src/chart/bollinger-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/bollinger/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"bollinger-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bollinger Band Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            chartArea: {\n                border: {\n                    width: 0\n                }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}M',\n                minimum: 50, maximum: 170, interval: 30,\n                majorGridLines: { width: 1 },\n                lineStyle: { width: 0 }\n            },\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: false }\n                }],\n            indicators: [{\n                    type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n                    period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 },\n                    lowerLine: { color: '#f2ec2f', width: 1 }\n                }],\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n            title: 'AAPL - 2012-2017',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#bollinger-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/bollinger/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"bollinger-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bollinger Band Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            chartArea: {\n                border: {\n                    width: 0\n                }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}M',\n                minimum: 50, maximum: 170, interval: 30,\n                majorGridLines: { width: 1 },\n                lineStyle: { width: 0 }\n            },\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: false }\n                }],\n            indicators: [{\n                    type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n                    period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 },\n                    lowerLine: { color: '#f2ec2f', width: 1 }\n                }],\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n            title: 'AAPL - 2012-2017',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#bollinger-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
--- a/src/chart/box-and-whisker-stack.json
+++ b/src/chart/box-and-whisker-stack.json
--- a/src/chart/box-and-whisker.html
+++ b/src/chart/box-and-whisker.html
@ -34,7 +34,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample visualizes the employee’s age group in various departments of a country with box and whisker type series in the chart. Mode of box and whisker series can be changed by <code>Mode</code> in property panel. To display the <code>mean</code> value in a series, enable the Mean in the property panel.
+        This sample visualizes the employee’s age group in various departments of a country with <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/box-and-whisker-chart">box and whisker type</a> series in the chart. Mode of box and whisker series can be changed by <code>Mode</code> in property panel. To display the <code>mean</code> value in a series, enable the Mean in the property panel.
    </p>
 </div>
 <div id="description">
--- a/src/chart/bubble-stack.json
+++ b/src/chart/bubble-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/bubble/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"bubble-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n    var selectedTheme = location.hash.split('/')[1];\n    selectedTheme = selectedTheme ? selectedTheme : 'Material';\n    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n        '#ea7a57', '#404041', '#00bdae'];\n    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n    var highContrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n    '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n        args.fill = fabricColors[args.point.index % 10];\n    }\n    else if (selectedTheme === 'material') {\n        args.fill = materialColors[args.point.index % 10];\n    }\n    else if ( selectedTheme === 'highcontrast') {\n        args.fill = highContrastColors[args.point.index % 10];\n    }\n    else {\n        args.fill = bootstrapColors[args.point.index % 10];\n    }\n};\n/**\n * Sample for Bubble Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Literacy Rate',\n            minimum: 60,\n            maximum: 100,\n            interval: 5\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'GDP Growth Rate',\n            minimum: 0,\n            maximum: 10,\n            interval: 2.5\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Bubble',\n                dataSource: [\n                    { x: 92.2, y: 7.8, size: 1.347, text: 'China' },\n                    { x: 74, y: 6.5, size: 1.241, text: 'India' },\n                    { x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },\n                    { x: 99.4, y: 2.2, size: 0.312, text: 'US' },\n                    { x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },\n                    { x: 99, y: 0.7, size: 0.0818, text: 'Germany' },\n                    { x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },\n                    { x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },\n                    { x: 99, y: 0.2, size: 0.128, text: 'Japan' },\n                    { x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },\n                    { x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },\n                    { x: 61.3, y: 1.45, size: 0.162, text: 'Nigeria' },\n                    { x: 82.2, y: 3.97, size: 0.7, text: 'Hong Kong' },\n                    { x: 79.2, y: 3.9, size: 0.162, text: 'Netherland' },\n                    { x: 72.5, y: 4.5, size: 0.7, text: 'Jordan' },\n                    { x: 81, y: 3.5, size: 0.21, text: 'Australia' },\n                    { x: 66.8, y: 3.9, size: 0.028, text: 'Mongolia' },\n                    { x: 78.4, y: 2.9, size: 0.231, text: 'Taiwan' }\n                ],\n                minRadius: 3,\n                maxRadius: ej.base.Browser.isDevice ? 6 : 8,\n                xName: 'x', yName: 'y', size: 'size', name: 'Pound',\n                marker: { dataLabel: { name: 'text' } }\n            },\n        ],\n\n        pointRender: labelRender,\n        //Initializing Chart Series\n        title: 'World Countries Details',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true,\n            format: '${point.text}<br/>Literacy Rate : <b>${point.x}%</b>' +\n            '<br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>'\n        },\n        legendSettings: { visible: false }\n    });\n    chart.appendTo('#bubble-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/bubble/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"bubble-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n    var selectedTheme = location.hash.split('/')[1];\n    selectedTheme = selectedTheme ? selectedTheme : 'Material';\n    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n        '#ea7a57', '#404041', '#00bdae'];\n    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n    var highContrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n    '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n        args.fill = fabricColors[args.point.index % 10];\n    }\n    else if (selectedTheme === 'material') {\n        args.fill = materialColors[args.point.index % 10];\n    }\n    else if ( selectedTheme === 'highcontrast') {\n        args.fill = highContrastColors[args.point.index % 10];\n    }\n    else {\n        args.fill = bootstrapColors[args.point.index % 10];\n    }\n};\n/**\n * Sample for Bubble Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Literacy Rate',\n            minimum: 60,\n            maximum: 100,\n            interval: 5\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'GDP Growth Rate',\n            minimum: 0,\n            maximum: 10,\n            interval: 2.5\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Bubble',\n                dataSource: [\n                    { x: 92.2, y: 7.8, size: 1.347, text: 'China' },\n                    { x: 74, y: 6.5, size: 1.241, text: 'India' },\n                    { x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },\n                    { x: 99.4, y: 2.2, size: 0.312, text: 'US' },\n                    { x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },\n                    { x: 99, y: 0.7, size: 0.0818, text: 'Germany' },\n                    { x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },\n                    { x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },\n                    { x: 99, y: 0.2, size: 0.128, text: 'Japan' },\n                    { x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },\n                    { x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },\n                    { x: 61.3, y: 1.45, size: 0.162, text: 'Nigeria' },\n                    { x: 82.2, y: 3.97, size: 0.7, text: 'Hong Kong' },\n                    { x: 79.2, y: 3.9, size: 0.162, text: 'Netherland' },\n                    { x: 72.5, y: 4.5, size: 0.7, text: 'Jordan' },\n                    { x: 81, y: 3.5, size: 0.21, text: 'Australia' },\n                    { x: 66.8, y: 3.9, size: 0.028, text: 'Mongolia' },\n                    { x: 78.4, y: 2.9, size: 0.231, text: 'Taiwan' }\n                ],\n                minRadius: 3,\n                maxRadius: ej.base.Browser.isDevice ? 6 : 8,\n                xName: 'x', yName: 'y', size: 'size', name: 'Pound',\n                marker: { dataLabel: { name: 'text' } }\n            },\n        ],\n\n        pointRender: labelRender,\n        //Initializing Chart Series\n        title: 'World Countries Details',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true,\n            format: '${point.text}<br/>Literacy Rate : <b>${point.x}%</b>' +\n            '<br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>'\n        },\n        legendSettings: { visible: false }\n    });\n    chart.appendTo('#bubble-container');\n"}
--- a/src/chart/bubble.html
+++ b/src/chart/bubble.html
@ -3,7 +3,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample visualizes the  Literacy Rate and GDP Growth Rate of world countries by using bubble series in the chart. Tooltip shows the information about the  countries.
+        This sample visualizes the  Literacy Rate and GDP Growth Rate of world countries by using <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/bubble-chart">bubble series</a> in the chart. Tooltip shows the information about the  countries.
    </p>
 </div>
 <div id="description">
--- a/src/chart/candle-stick-stack.json
+++ b/src/chart/candle-stick-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/candle-stick/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n     <h4 id=\"days\" style=\"font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;\" align=\"center\">AAPL Historical</h4>\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}\n/**\n * Sample for Candle Series\n */\n    var _this = this;\n    var pointColors = [];\n    var getLabelText = function (value) {\n        return (((value) / 1000000000)).toFixed(1) + 'bn';\n    };\n    this.renderChart2 = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 },\n            },\n            primaryYAxis: {\n                title: 'Volume', valueType: 'Logarithmic', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 },\n                stripLines: [\n                    {\n                        end: 1300000000, startFromAxis: true, text: '', color: 'black', visible: true,\n                        opacity: 0.03, zIndex: 'Behind'\n                    }\n                ]\n            },\n            axes: [{\n                    name: 'secondary', opposedPosition: true, rowIndex: 1, majorGridLines: { width: 1 },\n                    labelFormat: 'n0', title: 'Price', plotOffset: 30, lineStyle: { width: 0 }, rangePadding: 'None'\n                }],\n            rows: [{ height: '30%' }, { height: '70%' }],\n            series: [\n                { type: 'Column', dataSource: chartData, animation: { enable: true }, xName: 'x', yName: 'volume', name: 'Volume' },\n                {\n                    type: 'Candle', yAxisName: 'secondary', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    dataSource: chartData, animation: { enable: true }, volume: 'volume',\n                    xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc',\n                }\n            ], tooltip: { enable: true, shared: true },\n            tooltipRender: function (args) {\n                if (!args.series.index) {\n                    args.text = 'Volume : <b>' + getLabelText(args.text.split('<b>')[1].split('</b>')[0]) + '</b>';\n                }\n            },\n            pointRender: function (args) {\n                if (args.series.type === 'Candle') {\n                    pointColors.push(args.fill);\n                }\n                else {\n                    args.fill = pointColors[args.point.index];\n                }\n            },\n            axisLabelRender: function (args) {\n                if (args.axis.name === 'primaryYAxis') {\n                    args.text = getLabelText(+args.text);\n                }\n                if (args.axis.name === 'secondary') {\n                    args.text = '$' + args.text;\n                }\n            },\n\n            width: ej.base.Browser.isDevice ? '100%' : '80%', chartArea: { border: { width: 0 } },\n            crosshair: { enable: true, lineType: 'Vertical' }\n        });\n        chart.appendTo('#container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            _this.renderChart2(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/candle-stick/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n     <h4 id=\"days\" style=\"font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;\" align=\"center\">AAPL Historical</h4>\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}\n/**\n * Sample for Candle Series\n */\n    var _this = this;\n    var pointColors = [];\n    var getLabelText = function (value) {\n        return (((value) / 1000000000)).toFixed(1) + 'bn';\n    };\n    this.renderChart2 = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 },\n            },\n            primaryYAxis: {\n                title: 'Volume', valueType: 'Logarithmic', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 },\n                stripLines: [\n                    {\n                        end: 1300000000, startFromAxis: true, text: '', color: 'black', visible: true,\n                        opacity: 0.03, zIndex: 'Behind'\n                    }\n                ]\n            },\n            axes: [{\n                    name: 'secondary', opposedPosition: true, rowIndex: 1, majorGridLines: { width: 1 },\n                    labelFormat: 'n0', title: 'Price', plotOffset: 30, lineStyle: { width: 0 }, rangePadding: 'None'\n                }],\n            rows: [{ height: '30%' }, { height: '70%' }],\n            series: [\n                { type: 'Column', dataSource: chartData, animation: { enable: true }, xName: 'x', yName: 'volume', name: 'Volume' },\n                {\n                    type: 'Candle', yAxisName: 'secondary', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    dataSource: chartData, animation: { enable: true }, volume: 'volume',\n                    xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc',\n                }\n            ], tooltip: { enable: true, shared: true },\n            tooltipRender: function (args) {\n                if (!args.series.index) {\n                    args.text = 'Volume : <b>' + getLabelText(args.text.split('<b>')[1].split('</b>')[0]) + '</b>';\n                }\n            },\n            pointRender: function (args) {\n                if (args.series.type === 'Candle') {\n                    pointColors.push(args.fill);\n                }\n                else {\n                    args.fill = pointColors[args.point.index];\n                }\n            },\n            axisLabelRender: function (args) {\n                if (args.axis.name === 'primaryYAxis') {\n                    args.text = getLabelText(+args.text);\n                }\n                if (args.axis.name === 'secondary') {\n                    args.text = '$' + args.text;\n                }\n            },\n\n            width: ej.base.Browser.isDevice ? '100%' : '80%', chartArea: { border: { width: 0 } },\n            crosshair: { enable: true, lineType: 'Vertical' }\n        });\n        chart.appendTo('#container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            _this.renderChart2(chartData);\n        };\n    "}
--- a/src/chart/category-stack.json
+++ b/src/chart/category-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/category/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"category-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n        <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}\nvar labelRender = function (args) {\n    var selectedTheme = location.hash.split('/')[1];\n    selectedTheme = selectedTheme ? selectedTheme : 'Material';\n    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n        '#ea7a57', '#404041', '#00bdae'];\n    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n    var highContrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n    '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n        args.fill = fabricColors[args.point.index % 10];\n    }\n    else if (selectedTheme === 'material') {\n        args.fill = materialColors[args.point.index % 10];\n    }\n    else if (selectedTheme === 'highcontrast') {\n        args.fill = highContrastColors[args.point.index % 10];\n    }\n    else {\n        args.fill = bootstrapColors[args.point.index % 10];\n    }\n};\n\n/**\n * Sample for Catergory Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Country',\n            valueType: 'Category',\n            majorGridLines: { width: 0 },\n            enableTrim: false\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            minimum: 0,\n            maximum: 800,\n            labelFormat: '{value}M',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Bar', tooltipMappingName: 'country',\n                dataSource: [\n                    { x: 'Germany', y: 72, country: 'GER: 72'},\n                    { x: 'Russia', y: 103.1, country: 'RUS: 103.1'},\n                    { x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},\n                    { x: 'India', y: 462.1, country: 'IND: 462.1'},\n                    { x: 'China', y: 721.4, country: 'CHN: 721.4'},\n                    { x: 'United States <br> Of America', y: 286.9, country: 'USA: 286.9'},\n                    { x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},\n                    { x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'},\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top', font: {\n                            fontWeight: '600',\n                            color: '#ffffff'\n                        }\n                    }\n                },\n                name: 'Users'\n            }\n        ],\n        legendSettings: {\n            visible: false\n        },\n        pointRender: labelRender,\n\n        //Initializing Chart Title\n        title: 'Internet Users – 2016',\n        //Initializing Tooltip\n        tooltip: { enable: true, format: '${point.tooltip}' }\n    });\n    chart.appendTo('#category-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/category/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"category-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n        <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}\nvar labelRender = function (args) {\n    var selectedTheme = location.hash.split('/')[1];\n    selectedTheme = selectedTheme ? selectedTheme : 'Material';\n    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n        '#ea7a57', '#404041', '#00bdae'];\n    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n    var highContrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n    '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n        args.fill = fabricColors[args.point.index % 10];\n    }\n    else if (selectedTheme === 'material') {\n        args.fill = materialColors[args.point.index % 10];\n    }\n    else if (selectedTheme === 'highcontrast') {\n        args.fill = highContrastColors[args.point.index % 10];\n    }\n    else {\n        args.fill = bootstrapColors[args.point.index % 10];\n    }\n};\n\n/**\n * Sample for Catergory Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Country',\n            valueType: 'Category',\n            majorGridLines: { width: 0 },\n            enableTrim: false\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            minimum: 0,\n            maximum: 800,\n            labelFormat: '{value}M',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Bar', tooltipMappingName: 'country',\n                dataSource: [\n                    { x: 'Germany', y: 72, country: 'GER: 72'},\n                    { x: 'Russia', y: 103.1, country: 'RUS: 103.1'},\n                    { x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},\n                    { x: 'India', y: 462.1, country: 'IND: 462.1'},\n                    { x: 'China', y: 721.4, country: 'CHN: 721.4'},\n                    { x: 'United States <br> Of America', y: 286.9, country: 'USA: 286.9'},\n                    { x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},\n                    { x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'},\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top', font: {\n                            fontWeight: '600',\n                            color: '#ffffff'\n                        }\n                    }\n                },\n                name: 'Users'\n            }\n        ],\n        legendSettings: {\n            visible: false\n        },\n        pointRender: labelRender,\n\n        //Initializing Chart Title\n        title: 'Internet Users – 2016',\n        //Initializing Tooltip\n        tooltip: { enable: true, format: '${point.tooltip}' }\n    });\n    chart.appendTo('#category-container');\n"}
--- a/src/chart/category.html
+++ b/src/chart/category.html
@ -6,7 +6,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample demonstrates the rendering of category axis in the chart with internet users of different countries.
+        This sample demonstrates the rendering of <a href="https://ej2.syncfusion.com/documentation/chart/category-axis/">category axis</a> in the chart with internet users of different countries.
    </p>
 </div>
 <div id="description">
--- a/src/chart/chart-performance-stack.json
+++ b/src/chart/chart-performance-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/chart-performance/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"performance-container\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div> \n                        <button id=\"load\" style=\"text-transform:none !important\">Load 100K Points</button>\n                    </div>\n                </td>\n            </tr>\n            <tr style=\"height: 50px\">\n                <td style=\"width: 30%\">\n                    <div>Time Taken</div>\n                </td>\n                <td style=\"width: 70%;\">\n                    <div>\n                        <span id=\"performanceTime\">0ms</span>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}var chart;\nvar loaded;\nvar dt1;\nvar dt2;\n/**\n * Sample for Chart Performance\n */\n\n    chart = new ej.charts.Chart({\n        enableCanvas: true,\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            majorGridLines: { color: 'transparent' }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                name: 'Series1',\n                type: 'Line', marker: { visible: false },\n                animation: { enable: false }\n            }\n        ],\n        legendSettings: { visible: false },\n\n    });\n    chart.appendTo('#performance-container');\n    var button = new ej.buttons.Button({ cssClass: 'e-info', isPrimary: true });\n    button.appendTo('#load');\n    document.getElementById('load').onclick = function () {\n        var series1 = [];\n        var point1;\n        var value = 0;\n        var i;\n        for (i = 0; i < 100000; i++) {\n            value += (Math.random() * 10 - 5);\n            point1 = { x: i, y: value };\n            series1.push(point1);\n        }\n        dt1 = new Date().getTime();\n        chart.series[0].dataSource = series1;\n        chart.series[0].xName = 'x';\n        chart.series[0].yName = 'y';\n        chart.legendSettings.visible = false;\n        chart.loaded = loaded;\n        chart.refresh();\n    };\n    loaded = function (args) {\n        dt2 = new Date().getTime();\n        document.getElementById('performanceTime').innerHTML = (dt2 - dt1) + 'ms';\n    };\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/chart-performance/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"performance-container\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div> \n                        <button id=\"load\" style=\"text-transform:none !important\">Load 100K Points</button>\n                    </div>\n                </td>\n            </tr>\n            <tr style=\"height: 50px\">\n                <td style=\"width: 30%\">\n                    <div>Time Taken</div>\n                </td>\n                <td style=\"width: 70%;\">\n                    <div>\n                        <span id=\"performanceTime\">0ms</span>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}var chart;\nvar loaded;\nvar dt1;\nvar dt2;\n/**\n * Sample for Chart Performance\n */\n\n    chart = new ej.charts.Chart({\n        enableCanvas: true,\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            majorGridLines: { color: 'transparent' }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                name: 'Series1',\n                type: 'Line', marker: { visible: false },\n                animation: { enable: false }\n            }\n        ],\n        legendSettings: { visible: false },\n\n    });\n    chart.appendTo('#performance-container');\n    var button = new ej.buttons.Button({ cssClass: 'e-info', isPrimary: true });\n    button.appendTo('#load');\n    document.getElementById('load').onclick = function () {\n        var series1 = [];\n        var point1;\n        var value = 0;\n        var i;\n        for (i = 0; i < 100000; i++) {\n            value += (Math.random() * 10 - 5);\n            point1 = { x: i, y: value };\n            series1.push(point1);\n        }\n        dt1 = new Date().getTime();\n        chart.series[0].dataSource = series1;\n        chart.series[0].xName = 'x';\n        chart.series[0].yName = 'y';\n        chart.legendSettings.visible = false;\n        chart.loaded = loaded;\n        chart.refresh();\n    };\n    loaded = function (args) {\n        dt2 = new Date().getTime();\n        document.getElementById('performanceTime').innerHTML = (dt2 - dt1) + 'ms';\n    };\n"}
--- a/src/chart/column-placement-stack.json
+++ b/src/chart/column-placement-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/column-placement/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Column series series with Side by Side Placement\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n        },\n        chartArea: { border: { width: 0 } },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n        },\n        //Initializing Side by Side Placement\n        enableSideBySidePlacement: false,\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Total',\n                dataSource: [{ x: 'Jamesh', y: 10, text: 'Total 10' },\n                    { x: 'Michael', y: 9, text: 'Total 9' }, { x: 'John', y: 11, text: 'Total 11' }],\n                columnWidth: 0.5,\n                marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Apple',\n                dataSource: [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }],\n                columnWidth: 0.4,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            }, {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Orange',\n                dataSource: [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }],\n                columnWidth: 0.3,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Grapes',\n                dataSource: [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }],\n                columnWidth: 0.2,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Fruit Consumption', tooltip: { enable: true, shared: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/column-placement/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Column series series with Side by Side Placement\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n        },\n        chartArea: { border: { width: 0 } },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n        },\n        //Initializing Side by Side Placement\n        enableSideBySidePlacement: false,\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Total',\n                dataSource: [{ x: 'Jamesh', y: 10, text: 'Total 10' },\n                    { x: 'Michael', y: 9, text: 'Total 9' }, { x: 'John', y: 11, text: 'Total 11' }],\n                columnWidth: 0.5,\n                marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Apple',\n                dataSource: [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }],\n                columnWidth: 0.4,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            }, {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Orange',\n                dataSource: [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }],\n                columnWidth: 0.3,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Grapes',\n                dataSource: [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }],\n                columnWidth: 0.2,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Fruit Consumption', tooltip: { enable: true, shared: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
--- a/src/chart/column-stack.json
+++ b/src/chart/column-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/column/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"column-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Column Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n        },\n        chartArea: { border: { width: 0 } },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',\n                dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',\n                dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',\n                dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#column-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/column/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"column-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Column Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n        },\n        chartArea: { border: { width: 0 } },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',\n                dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',\n                dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n            },\n            {\n                type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',\n                dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#column-container');\n"}
--- a/src/chart/column.html
+++ b/src/chart/column.html
@ -3,7 +3,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample visualizes the Olympic medal count in Rio with default column series in the chart. 
+        This sample visualizes the Olympic medal count in Rio with default <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/column-chart">column series</a> in the chart. 
        Data points values are showed by using data label.
    </p>
 </div>
--- a/src/chart/cross-hair-stack.json
+++ b/src/chart/cross-hair-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/cross-hair/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"crosshair-container\" align=\"center\" style=\"width:92%\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Crosshair in chart\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            majorGridLines: { width: 0 },\n            valueType: 'DateTime',\n            crosshairTooltip: { enable: true },\n            labelFormat: 'MMM'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            minimum: 83, maximum: 87, interval: 1,\n            title: 'Million in USD',\n            labelFormat: '{value}M',\n            rowIndex: 0,\n            crosshairTooltip: {\n                enable: true\n            }\n        },\n        //Initializing Axes\n        axes: [\n            {\n                majorGridLines: { width: 0 },\n                rowIndex: 0,\n                opposedPosition: true,\n                minimum: 82, maximum: 88, interval: 2,\n                name: 'yAxis',\n                title: 'Million in USD (Stock)',\n                crosshairTooltip: { enable: true }\n            }\n        ],\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: window.axesData,\n                border: { width: 1.5 },\n                xName: 'xDate', width: 2,\n                yName: 'High',\n                marker: {\n                    visible: true\n                }\n            },\n            {\n                type: 'HiloOpenClose',\n                dataSource: window.axesData,\n                yAxisName: 'yAxis',\n                border: { width: 1.5 },\n                bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                xName: 'xDate', width: 2,\n                high: 'High', low: 'Low', open: 'Open', close: 'Close'\n            }\n        ],\n        //Initializing Crosshair\n        crosshair: { enable: true },\n        legendSettings: { visible: false },\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n        //Initializing Chart Title\n        title: 'Conns,Inc Stock Details',\n\n    });\n    chart.appendTo('#crosshair-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/cross-hair/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"crosshair-container\" align=\"center\" style=\"width:92%\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Crosshair in chart\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            majorGridLines: { width: 0 },\n            valueType: 'DateTime',\n            crosshairTooltip: { enable: true },\n            labelFormat: 'MMM'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            minimum: 83, maximum: 87, interval: 1,\n            title: 'Million in USD',\n            labelFormat: '{value}M',\n            rowIndex: 0,\n            crosshairTooltip: {\n                enable: true\n            }\n        },\n        //Initializing Axes\n        axes: [\n            {\n                majorGridLines: { width: 0 },\n                rowIndex: 0,\n                opposedPosition: true,\n                minimum: 82, maximum: 88, interval: 2,\n                name: 'yAxis',\n                title: 'Million in USD (Stock)',\n                crosshairTooltip: { enable: true }\n            }\n        ],\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: window.axesData,\n                border: { width: 1.5 },\n                xName: 'xDate', width: 2,\n                yName: 'High',\n                marker: {\n                    visible: true\n                }\n            },\n            {\n                type: 'HiloOpenClose',\n                dataSource: window.axesData,\n                yAxisName: 'yAxis',\n                border: { width: 1.5 },\n                bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                xName: 'xDate', width: 2,\n                high: 'High', low: 'Low', open: 'Open', close: 'Close'\n            }\n        ],\n        //Initializing Crosshair\n        crosshair: { enable: true },\n        legendSettings: { visible: false },\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n        //Initializing Chart Title\n        title: 'Conns,Inc Stock Details',\n\n    });\n    chart.appendTo('#crosshair-container');\n"}
--- a/src/chart/dashed-line-stack.json
+++ b/src/chart/dashed-line-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/dashed-line/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n\n    #container_Series_1,\n    #container_Series_0 {\n        stroke-dasharray: 10;\n        stroke-dasharray: 10px 10px;\n        stroke-linejoin: round; stroke-linecap: round;\n        -webkit-animation: dash 1s linear infinite;\n        animation: dash 1s linear infinite;\n    }\n\n    #container_Series_0_Point_3_Symbol {\n        -webkit-animation: opac 1s ease-out infinite;\n        animation: opac 1s ease-out infinite;\n    }\n\n    @-webkit-keyframes dash {\n        100% {\n            stroke-dashoffset: -20px;\n        }\n    }\n\n    @keyframes dash {\n        100% {\n            stroke-dashoffset: -20px;\n        }\n    }\n\n    @keyframes opac {\n        0% {\n            stroke-opacity: 1;\n            stroke-width: 0px;\n        }\n        100% {\n            stroke-opacity: 0;\n            stroke-width: 10px;\n        }\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for line series with dashed line\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            labelFormat: '{value}%',\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 40,\n            interval: 10,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 12 }, { x: new Date(2006, 0, 1), y: 10.6 },\n                    { x: new Date(2007, 0, 1), y: 15.6 }, { x: new Date(2008, 0, 1), y: 38.6 },\n                    { x: new Date(2009, 0, 1), y: 27.4 }, { x: new Date(2010, 0, 1), y: 23.5 },\n                    { x: new Date(2011, 0, 1), y: 16.6 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                dashArray: '5',\n                yName: 'y', name: 'Banana',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 9.5 }, { x: new Date(2006, 0, 1), y: 19.9 },\n                    { x: new Date(2007, 0, 1), y: 25.2 }, { x: new Date(2008, 0, 1), y: 36 },\n                    { x: new Date(2009, 0, 1), y: 16.6 }, { x: new Date(2010, 0, 1), y: 14.2 }, { x: new Date(2011, 0, 1), y: 10.3 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10,\n                    shape: 'Diamond'\n                },\n                dashArray: '10',\n                yName: 'y', name: 'Apple',\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Fruits Production Statistics',\n        //Initializing Tootlip\n        tooltip: {\n            enable: true,\n            shared: true\n        },\n        //Initializing Crosshair\n        crosshair: {\n            enable: true,\n            line: {\n                color: 'rgba(204,214,235,0.25)',\n                width: ej.base.Browser.isDevice ? 50 : 20,\n            },\n            lineType: 'Vertical'\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/dashed-line/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n\n    #container_Series_1,\n    #container_Series_0 {\n        stroke-dasharray: 10;\n        stroke-dasharray: 10px 10px;\n        stroke-linejoin: round; stroke-linecap: round;\n        -webkit-animation: dash 1s linear infinite;\n        animation: dash 1s linear infinite;\n    }\n\n    #container_Series_0_Point_3_Symbol {\n        -webkit-animation: opac 1s ease-out infinite;\n        animation: opac 1s ease-out infinite;\n    }\n\n    @-webkit-keyframes dash {\n        100% {\n            stroke-dashoffset: -20px;\n        }\n    }\n\n    @keyframes dash {\n        100% {\n            stroke-dashoffset: -20px;\n        }\n    }\n\n    @keyframes opac {\n        0% {\n            stroke-opacity: 1;\n            stroke-width: 0px;\n        }\n        100% {\n            stroke-opacity: 0;\n            stroke-width: 10px;\n        }\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for line series with dashed line\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            labelFormat: '{value}%',\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 40,\n            interval: 10,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 12 }, { x: new Date(2006, 0, 1), y: 10.6 },\n                    { x: new Date(2007, 0, 1), y: 15.6 }, { x: new Date(2008, 0, 1), y: 38.6 },\n                    { x: new Date(2009, 0, 1), y: 27.4 }, { x: new Date(2010, 0, 1), y: 23.5 },\n                    { x: new Date(2011, 0, 1), y: 16.6 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                dashArray: '5',\n                yName: 'y', name: 'Banana',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 9.5 }, { x: new Date(2006, 0, 1), y: 19.9 },\n                    { x: new Date(2007, 0, 1), y: 25.2 }, { x: new Date(2008, 0, 1), y: 36 },\n                    { x: new Date(2009, 0, 1), y: 16.6 }, { x: new Date(2010, 0, 1), y: 14.2 }, { x: new Date(2011, 0, 1), y: 10.3 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10,\n                    shape: 'Diamond'\n                },\n                dashArray: '10',\n                yName: 'y', name: 'Apple',\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Fruits Production Statistics',\n        //Initializing Tootlip\n        tooltip: {\n            enable: true,\n            shared: true\n        },\n        //Initializing Crosshair\n        crosshair: {\n            enable: true,\n            line: {\n                color: 'rgba(204,214,235,0.25)',\n                width: ej.base.Browser.isDevice ? 50 : 20,\n            },\n            lineType: 'Vertical'\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
--- a/src/chart/data-editing-stack.json
+++ b/src/chart/data-editing-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/data-editing/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"dataediting-container\" align=\"center\" style=\"width:92%\"></div>\n </div>\n \n \n </div></body></html>","index.js":"{{ripple}}/**\n * Sample for Data Editing\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            minimum: -0.5,\n            maximum: 6.5,\n            labelPlacement: 'OnTicks',\n            majorGridLines: { width: 0 },\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis:\n        {\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 100,\n            title : 'Sales',\n            labelFormat: '{value}%',\n            interval: 20,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                dragSettings: {enable: true},\n                type: 'Column',\n                dataSource: [\n                    { x: '2005', y: 21 }, { x: '2006', y: 60 },\n                    { x: '2007', y: 45 }, { x: '2008', y: 50 },\n                    { x: '2009', y: 74 }, { x: '2010', y: 65 },\n                    { x: '2011', y: 85 },\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'Product A', fill: '#00BDAE',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: '2005', y: 21 }, { x: '2006', y: 22 },\n                    { x: '2007', y: 36 }, { x: '2008', y: 34 },\n                    { x: '2009', y: 54 }, { x: '2010', y: 55 },\n                    { x: '2011', y: 60 }\n                ],\n                dragSettings: {enable: true},\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'Product B', fill: '#357CD2',\n            },\n\n        ],\n        //Initializing Chart Title\n        title: 'Sales Prediction of Products',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n    });\n    chart.appendTo('#dataediting-container');\n\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/data-editing/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"dataediting-container\" align=\"center\" style=\"width:92%\"></div>\n </div>\n \n \n </div></body></html>","index.js":"{{ripple}}/**\n * Sample for Data Editing\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            minimum: -0.5,\n            maximum: 6.5,\n            labelPlacement: 'OnTicks',\n            majorGridLines: { width: 0 },\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis:\n        {\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 100,\n            title : 'Sales',\n            labelFormat: '{value}%',\n            interval: 20,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                dragSettings: {enable: true},\n                type: 'Column',\n                dataSource: [\n                    { x: '2005', y: 21 }, { x: '2006', y: 60 },\n                    { x: '2007', y: 45 }, { x: '2008', y: 50 },\n                    { x: '2009', y: 74 }, { x: '2010', y: 65 },\n                    { x: '2011', y: 85 },\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'Product A', fill: '#00BDAE',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: '2005', y: 21 }, { x: '2006', y: 22 },\n                    { x: '2007', y: 36 }, { x: '2008', y: 34 },\n                    { x: '2009', y: 54 }, { x: '2010', y: 55 },\n                    { x: '2011', y: 60 }\n                ],\n                dragSettings: {enable: true},\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'Product B', fill: '#357CD2',\n            },\n\n        ],\n        //Initializing Chart Title\n        title: 'Sales Prediction of Products',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n    });\n    chart.appendTo('#dataediting-container');\n\n"}
--- a/src/chart/data-label-template-stack.json
+++ b/src/chart/data-label-template-stack.json
--- a/src/chart/date-time-category-stack.json
+++ b/src/chart/date-time-category-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/date-time-category/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Date time category axis\n */\n\n    var chart = new ej.charts.Chart({\n\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTimeCategory',\n            intervalType: 'Days',\n            skeleton: 'Ed',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 },\n            stripLines: [\n                { visible: true, start: new Date(2017, 11, 20), end: new Date(2017, 11, 27), color: 'skyblue', opacity: 0.5, },\n                { visible: true, start: new Date(2018, 0, 2), end: new Date(2018, 0, 8), color: 'pink', opacity: 0.5 },\n            ],\n            title: 'Business Days'\n        },\n        primaryYAxis: {\n            labelFormat: '{value}M',\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 100,\n            interval: 20,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 },\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: new Date(2017, 11, 20), y: 21 }, { x: new Date(2017, 11, 21), y: 24 },\n                    { x: new Date(2017, 11, 22), y: 24 }, { x: new Date(2017, 11, 26), y: 70 },\n                    { x: new Date(2017, 11, 27), y: 75 }, { x: new Date(2018, 0, 2), y: 82 },\n                    { x: new Date(2018, 0, 3), y: 53 }, { x: new Date(2018, 0, 4), y: 54 },\n                    { x: new Date(2018, 0, 5), y: 53 }, { x: new Date(2018, 0, 8), y: 45 }\n                ],\n                xName: 'x', yName: 'y', name: 'Product',\n            },\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        legendSettings: { visible: false },\n        title: 'Sales Comparison of a Product',\n        tooltip: {\n            enable: true\n        },\n        annotations: [\n            {\n                x: new Date(2017, 11, 22), y: 90, coordinateUnits: 'Point',\n                content: '<div style=\"color:#FF0000;font-family: bold; font-weight: 600\">Christmas Offer<br> Dec 2017</div>',\n            },\n            {\n                x: new Date(2018, 0, 4), y: 90, coordinateUnits: 'Point',\n                content: '<div style=\"color:#FF0000;font-family: bold; font-weight: 800\">New Year Offer<br> Jan 2018</div>',\n            }\n        ],\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/date-time-category/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Date time category axis\n */\n\n    var chart = new ej.charts.Chart({\n\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTimeCategory',\n            intervalType: 'Days',\n            skeleton: 'Ed',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 },\n            stripLines: [\n                { visible: true, start: new Date(2017, 11, 20), end: new Date(2017, 11, 27), color: 'skyblue', opacity: 0.5, },\n                { visible: true, start: new Date(2018, 0, 2), end: new Date(2018, 0, 8), color: 'pink', opacity: 0.5 },\n            ],\n            title: 'Business Days'\n        },\n        primaryYAxis: {\n            labelFormat: '{value}M',\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 100,\n            interval: 20,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 },\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: new Date(2017, 11, 20), y: 21 }, { x: new Date(2017, 11, 21), y: 24 },\n                    { x: new Date(2017, 11, 22), y: 24 }, { x: new Date(2017, 11, 26), y: 70 },\n                    { x: new Date(2017, 11, 27), y: 75 }, { x: new Date(2018, 0, 2), y: 82 },\n                    { x: new Date(2018, 0, 3), y: 53 }, { x: new Date(2018, 0, 4), y: 54 },\n                    { x: new Date(2018, 0, 5), y: 53 }, { x: new Date(2018, 0, 8), y: 45 }\n                ],\n                xName: 'x', yName: 'y', name: 'Product',\n            },\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        legendSettings: { visible: false },\n        title: 'Sales Comparison of a Product',\n        tooltip: {\n            enable: true\n        },\n        annotations: [\n            {\n                x: new Date(2017, 11, 22), y: 90, coordinateUnits: 'Point',\n                content: '<div style=\"color:#FF0000;font-family: bold; font-weight: 600\">Christmas Offer<br> Dec 2017</div>',\n            },\n            {\n                x: new Date(2018, 0, 4), y: 90, coordinateUnits: 'Point',\n                content: '<div style=\"color:#FF0000;font-family: bold; font-weight: 800\">New Year Offer<br> Jan 2018</div>',\n            }\n        ],\n\n    });\n    chart.appendTo('#container');\n"}
--- a/src/chart/date-time-stack.json
+++ b/src/chart/date-time-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/date-time/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"datetime-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://www.yr.no/place/USA/Alaska/Hatcher_Pass/statistics.html\" target=\"_blank\">www.yr.no</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Saample for DateTime Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'MMM',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            minimum: -20,\n            maximum: 30,\n            interval: 10,\n            edgeLabelPlacement: 'Shift',\n            labelFormat: '{value}°C',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2016, 3, 1), y: 6.3 },\n                    { x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },\n                    { x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },\n                    { x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Warmest',\n                marker: {\n                    visible: true,\n                    height: 10, width: 10,\n                    shape: 'Pentagon',\n                    dataLabel: { visible: true, position: 'Top' }\n                }\n            }, {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2016, 3, 1), y: -5.3 },\n                    { x: new Date(2016, 4, 1), y: 1.0 }, { x: new Date(2016, 5, 1), y: 6.9 },\n                    { x: new Date(2016, 6, 1), y: 9.4 }, { x: new Date(2016, 7, 1), y: 7.6 },\n                    { x: new Date(2016, 8, 1), y: 2.6 }, { x: new Date(2016, 9, 1), y: -4.9 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Coldest',\n                marker: {\n                    visible: true, height: 10, width: 10, shape: 'Diamond',\n                    dataLabel: { visible: true, position: 'Bottom' }\n                }\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Alaska Weather Statistics - 2016',\n\n    });\n    chart.appendTo('#datetime-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/date-time/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"datetime-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://www.yr.no/place/USA/Alaska/Hatcher_Pass/statistics.html\" target=\"_blank\">www.yr.no</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Saample for DateTime Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'MMM',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            minimum: -20,\n            maximum: 30,\n            interval: 10,\n            edgeLabelPlacement: 'Shift',\n            labelFormat: '{value}°C',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2016, 3, 1), y: 6.3 },\n                    { x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },\n                    { x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },\n                    { x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Warmest',\n                marker: {\n                    visible: true,\n                    height: 10, width: 10,\n                    shape: 'Pentagon',\n                    dataLabel: { visible: true, position: 'Top' }\n                }\n            }, {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2016, 3, 1), y: -5.3 },\n                    { x: new Date(2016, 4, 1), y: 1.0 }, { x: new Date(2016, 5, 1), y: 6.9 },\n                    { x: new Date(2016, 6, 1), y: 9.4 }, { x: new Date(2016, 7, 1), y: 7.6 },\n                    { x: new Date(2016, 8, 1), y: 2.6 }, { x: new Date(2016, 9, 1), y: -4.9 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Coldest',\n                marker: {\n                    visible: true, height: 10, width: 10, shape: 'Diamond',\n                    dataLabel: { visible: true, position: 'Bottom' }\n                }\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Alaska Weather Statistics - 2016',\n\n    });\n    chart.appendTo('#datetime-container');\n"}
--- a/src/chart/date-time.html
+++ b/src/chart/date-time.html
@ -6,7 +6,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample demonstrates the rendering of date time axis in the chart with weather statistics analysis of Alaska for a year.
+        This sample demonstrates the rendering of <a href="https://ej2.syncfusion.com/documentation/chart/date-time-axis/">date time axis</a> in the chart with weather statistics analysis of Alaska for a year.
    </p>
 </div>
 <div id="description">    
--- a/src/chart/default-doughnut-stack.json
+++ b/src/chart/default-doughnut-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/default-doughnut/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"doughnut-container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}var centerTitle = document.createElement('div');\ncenterTitle.innerHTML = 'Expenses in Year';\ncenterTitle.style.position = 'absolute';\ncenterTitle.style.visibility = 'hidden';\n/**\n * Sample for Doughnut \n */\n\n    var count = 0;\n\tvar pieinterval;\n    var pie = new ej.charts.AccumulationChart({\n        enableSmartLabels: true,\n        //Initializing Selection Mode\n        selectionMode: 'Point',\n        //Initializing Series\n        series: [\n            {\n                dataSource: [\n                    { 'x': 'Net-tution and Fees', y: 21, text: '21%' },\n                    { 'x': 'Self-supporting Operations', y: 21, text: '21%' },\n                    { 'x': 'Private Gifts', y: 8, text: '8%' },\n                    { 'x': 'All Other', y: 8, text: '8%' },\n                    { 'x': 'Local Revenue', y: 4, text: '4%' },\n                    { 'x': 'State Revenue', y: 21, text: '21%' },\n                    { 'x': 'Federal Revenue', y: 16, text: '16%' }\n                ],\n                xName: 'x',\n                yName: 'y',\n                startAngle: 0,\n                endAngle: 360,\n                innerRadius: '40%',\n                dataLabel: {\n                    visible: true, position: 'Inside',\n                    font: {\n                        color: 'white',\n                        fontWeight: '600',\n                        size: '14px'\n                    },\n                },\n                name: 'Revenue'\n            }\n        ],\n        //Initializing Legend\n        legendSettings: {\n            visible: true, toggleVisibility: false,\n            position: 'Right',\n            height: '28%',\n            width: '44%'\n        },\n        animationComplete: function (args) {\n            centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width);\n            var rect = centerTitle.getBoundingClientRect();\n            centerTitle.style.top = (args.accumulation.origin.y - rect.height / 2) + 'px';\n            centerTitle.style.left = (args.accumulation.origin.x - rect.width / 2) + 'px';\n            centerTitle.style.visibility = 'visible';\n            var points = args.accumulation.visibleSeries[0].points;\n            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n                var point = points_1[_i];\n                if (point.labelPosition === 'Outside' && point.labelVisible) {\n                    var label = document.getElementById('doughnut-container_datalabel_Series_0_text_' + point.index);\n                    label.setAttribute('fill', 'black');\n                }\n            }\n        },\n        textRender: function (args) {\n            args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);\n            args.text = args.text + '%';\n        },\n\n    });\n    pie.appendTo('#doughnut-container');\n    document.getElementById('doughnut-container').appendChild(centerTitle);\n    function getFontSize(width) {\n        if (width > 300) {\n            return '13px';\n        }\n        else if (width > 250) {\n            return '8px';\n        }\n        else {\n            return '6px';\n        }\n    }\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/default-doughnut/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"doughnut-container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}var centerTitle = document.createElement('div');\ncenterTitle.innerHTML = 'Expenses in Year';\ncenterTitle.style.position = 'absolute';\ncenterTitle.style.visibility = 'hidden';\n/**\n * Sample for Doughnut \n */\n\n    var count = 0;\n\tvar pieinterval;\n    var pie = new ej.charts.AccumulationChart({\n        enableSmartLabels: true,\n        //Initializing Selection Mode\n        selectionMode: 'Point',\n        //Initializing Series\n        series: [\n            {\n                dataSource: [\n                    { 'x': 'Net-tution and Fees', y: 21, text: '21%' },\n                    { 'x': 'Self-supporting Operations', y: 21, text: '21%' },\n                    { 'x': 'Private Gifts', y: 8, text: '8%' },\n                    { 'x': 'All Other', y: 8, text: '8%' },\n                    { 'x': 'Local Revenue', y: 4, text: '4%' },\n                    { 'x': 'State Revenue', y: 21, text: '21%' },\n                    { 'x': 'Federal Revenue', y: 16, text: '16%' }\n                ],\n                xName: 'x',\n                yName: 'y',\n                startAngle: 0,\n                endAngle: 360,\n                innerRadius: '40%',\n                dataLabel: {\n                    visible: true, position: 'Inside',\n                    font: {\n                        color: 'white',\n                        fontWeight: '600',\n                        size: '14px'\n                    },\n                },\n                name: 'Revenue'\n            }\n        ],\n        //Initializing Legend\n        legendSettings: {\n            visible: true, toggleVisibility: false,\n            position: 'Right',\n            height: '28%',\n            width: '44%'\n        },\n        animationComplete: function (args) {\n            centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width);\n            var rect = centerTitle.getBoundingClientRect();\n            centerTitle.style.top = (args.accumulation.origin.y - rect.height / 2) + 'px';\n            centerTitle.style.left = (args.accumulation.origin.x - rect.width / 2) + 'px';\n            centerTitle.style.visibility = 'visible';\n            var points = args.accumulation.visibleSeries[0].points;\n            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n                var point = points_1[_i];\n                if (point.labelPosition === 'Outside' && point.labelVisible) {\n                    var label = document.getElementById('doughnut-container_datalabel_Series_0_text_' + point.index);\n                    label.setAttribute('fill', 'black');\n                }\n            }\n        },\n        textRender: function (args) {\n            args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);\n            args.text = args.text + '%';\n        },\n\n    });\n    pie.appendTo('#doughnut-container');\n    document.getElementById('doughnut-container').appendChild(centerTitle);\n    function getFontSize(width) {\n        if (width > 300) {\n            return '13px';\n        }\n        else if (width > 250) {\n            return '8px';\n        }\n        else {\n            return '6px';\n        }\n    }\n"}
--- a/src/chart/default-pie-stack.json
+++ b/src/chart/default-pie-stack.json
--- a/src/chart/default-pie.html
+++ b/src/chart/default-pie.html
@ -114,7 +114,7 @@
    </p>
 </div>
 <div id="description">
-    <p> In this example, you can see how to render and configure the pie chart. You can use
+    <p> In this example, you can see how to render and configure the <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/pie-chart">Pie chart</a>. You can use
        <code>border</code>,
        <code>fill</code> properties to customize the pie point.
        <code>dataLabel</code> is used to represent individual data and its value.</p>
--- a/src/chart/donut-stack.json
+++ b/src/chart/donut-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/donut/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for Doughnut chart\n */\n\n    var pie = new ej.charts.AccumulationChart({\n        //Initializing Series\n        series: [\n            {\n                dataSource: [{  x:  'Labour',  y:  18,  text:  '18%'  }, {  x:  'Legal',  y:  8,  text:  '8%'  },\n                {  x:  'Production',  y:  15,  text:  '15%'  }, {  x:  'License',  y:  11,  text:  '11%'  },\n                {  x:  'Facilities',  y:  18,  text:  '18%'  }, {  x:  'Taxes',  y:  14,  text:  '14%'  },\n                {  x:  'Insurance',  y:  16,  text:  '16%'  }],\n                dataLabel: {\n                    visible: true,\n                    name: 'text',\n                    position: 'Inside',\n                    font: {\n                        fontWeight: '600',\n                        color: '#ffffff'\n                    }\n                },\n                radius: '70%', xName: 'x',\n                yName: 'y', startAngle: 0,\n                endAngle: 360, innerRadius: '40%', name: 'Project',\n                explode: true, explodeOffset: '10%', explodeIndex: 3\n            }\n        ],\n        enableSmartLabels: true,\n        legendSettings: {\n            visible: true, position: 'Top'\n        },\n        //Initializing Tooltip\n        tooltip: { enable: true },\n        //Initializing Title\n        title: 'Project Cost Breakdown',\n\n    });\n    pie.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/donut/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for Doughnut chart\n */\n\n    var pie = new ej.charts.AccumulationChart({\n        //Initializing Series\n        series: [\n            {\n                dataSource: [{  x:  'Labour',  y:  18,  text:  '18%'  }, {  x:  'Legal',  y:  8,  text:  '8%'  },\n                {  x:  'Production',  y:  15,  text:  '15%'  }, {  x:  'License',  y:  11,  text:  '11%'  },\n                {  x:  'Facilities',  y:  18,  text:  '18%'  }, {  x:  'Taxes',  y:  14,  text:  '14%'  },\n                {  x:  'Insurance',  y:  16,  text:  '16%'  }],\n                dataLabel: {\n                    visible: true,\n                    name: 'text',\n                    position: 'Inside',\n                    font: {\n                        fontWeight: '600',\n                        color: '#ffffff'\n                    }\n                },\n                radius: '70%', xName: 'x',\n                yName: 'y', startAngle: 0,\n                endAngle: 360, innerRadius: '40%', name: 'Project',\n                explode: true, explodeOffset: '10%', explodeIndex: 3\n            }\n        ],\n        enableSmartLabels: true,\n        legendSettings: {\n            visible: true, position: 'Top'\n        },\n        //Initializing Tooltip\n        tooltip: { enable: true },\n        //Initializing Title\n        title: 'Project Cost Breakdown',\n\n    });\n    pie.appendTo('#container');\n"}
--- a/src/chart/donut.html
+++ b/src/chart/donut.html
@ -3,7 +3,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample visualizes the project cost breakdown statistics by using doughnut series. Datalabel shows the Information about the points.
+        This sample visualizes the project cost breakdown statistics by using <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/donut-chart">doughnut series</a>. Datalabel shows the Information about the points.
        While hovering on the slice, border will be highlighted.
    </p>
 </div>
--- a/src/chart/drill-down-pie-stack.json
+++ b/src/chart/drill-down-pie-stack.json
--- a/src/chart/empty-point-stack.json
+++ b/src/chart/empty-point-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/empty-point/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-8 control-section\">\n        <div id=\"empty-container\"></div>\n    </div>\n    <div class=\"col-lg-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SelectSeriesType\">\t\t\t\t \n                                                <option>Column</option>\n                                                <option>Area</option>\n                                                <option>Spline</option>\n                                            </select>\n                    </div>\n                </td>\n            </tr>\n            <tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Empty Point Mode:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"emptypointmode\">\t\t\t\t \n                                                    <option>Gap</option>\n                                                    <option>Drop</option>\n                                                    <option>Average</option>\n                                                    <option>Zero</option>\n                                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Empty Point\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Product', valueType: 'Category', interval: 1\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'Profit', minimum: 0, maximum: 100, interval: 20,\n            labelFormat: '{value}%'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                dataSource: [\n                    { x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, \n                    { x: 'Oil', y: 70 },{ x: 'Corn', y: 60 }, { x: 'Gram', y: null }, \n                    { x: 'Milk', y: 70 }, { x: 'Peas', y: 80 }, \n                    { x: 'Fruit', y: 60 }, { x: 'Butter', y: null }\n                ],\n                type: 'Column', xName: 'x', yName: 'y', name: 'Profit', width: 2, \n                emptyPointSettings: {\n                    fill: '#e6e6e6',\n                },\n                marker: { visible: true, height: 10, width: 10 },\n            },\n        ],\n        legendSettings: { visible: false },\n        //Initializing Chart title\n        title: 'Annual Product-Wise Profit Analysis',\n        //Initializing Tooltip\n        tooltip: { enable: true },\n\n    });\n    chart.appendTo('#empty-container');\n    var mode = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].emptyPointSettings.mode = mode.value;\n            chart.refresh();\n        }\n    });\n    mode.appendTo('#emptypointmode');\n    var edgeMode = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = edgeMode.value;\n            chart.refresh();\n        }\n    });\n    edgeMode.appendTo('#SelectSeriesType');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/empty-point/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-8 control-section\">\n        <div id=\"empty-container\"></div>\n    </div>\n    <div class=\"col-lg-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SelectSeriesType\">\t\t\t\t \n                                                <option>Column</option>\n                                                <option>Area</option>\n                                                <option>Spline</option>\n                                            </select>\n                    </div>\n                </td>\n            </tr>\n            <tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Empty Point Mode:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"emptypointmode\">\t\t\t\t \n                                                    <option>Gap</option>\n                                                    <option>Drop</option>\n                                                    <option>Average</option>\n                                                    <option>Zero</option>\n                                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Empty Point\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Product', valueType: 'Category', interval: 1\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'Profit', minimum: 0, maximum: 100, interval: 20,\n            labelFormat: '{value}%'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                dataSource: [\n                    { x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, \n                    { x: 'Oil', y: 70 },{ x: 'Corn', y: 60 }, { x: 'Gram', y: null }, \n                    { x: 'Milk', y: 70 }, { x: 'Peas', y: 80 }, \n                    { x: 'Fruit', y: 60 }, { x: 'Butter', y: null }\n                ],\n                type: 'Column', xName: 'x', yName: 'y', name: 'Profit', width: 2, \n                emptyPointSettings: {\n                    fill: '#e6e6e6',\n                },\n                marker: { visible: true, height: 10, width: 10 },\n            },\n        ],\n        legendSettings: { visible: false },\n        //Initializing Chart title\n        title: 'Annual Product-Wise Profit Analysis',\n        //Initializing Tooltip\n        tooltip: { enable: true },\n\n    });\n    chart.appendTo('#empty-container');\n    var mode = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].emptyPointSettings.mode = mode.value;\n            chart.refresh();\n        }\n    });\n    mode.appendTo('#emptypointmode');\n    var edgeMode = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = edgeMode.value;\n            chart.refresh();\n        }\n    });\n    edgeMode.appendTo('#SelectSeriesType');\n"}
--- a/src/chart/error-bar-stack.json
+++ b/src/chart/error-bar-stack.json
--- a/src/chart/exponential-moving-average-indicator-stack.json
+++ b/src/chart/exponential-moving-average-indicator-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/exponential-moving-average-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"ema-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for EMA Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true },\n            }, chartArea: {\n                border: {\n                    width: 0\n                }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}M',\n                minimum: 50, maximum: 170, interval: 30,\n                majorGridLines: { width: 1 },\n                lineStyle: { width: 0 }\n            },\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: false }\n                }],\n            indicators: [{\n                    type: 'Ema', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n                    period: 14, animation: { enable: true }\n                }],\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            title: 'AAPL - 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#ema-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/exponential-moving-average-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"ema-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for EMA Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true },\n            }, chartArea: {\n                border: {\n                    width: 0\n                }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}M',\n                minimum: 50, maximum: 170, interval: 30,\n                majorGridLines: { width: 1 },\n                lineStyle: { width: 0 }\n            },\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: false }\n                }],\n            indicators: [{\n                    type: 'Ema', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n                    period: 14, animation: { enable: true }\n                }],\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            title: 'AAPL - 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#ema-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
--- a/src/chart/export-stack.json
+++ b/src/chart/export-stack.json
--- a/src/chart/funnel-stack.json
+++ b/src/chart/funnel-stack.json
--- a/src/chart/grouping-stack.json
+++ b/src/chart/grouping-stack.json
--- a/src/chart/hilo-open-close-stack.json
+++ b/src/chart/hilo-open-close-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/hilo-open-close/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n     <h4 id=\"days\" style=\"font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;\" align=\"center\">AAPL Historical</h4>\n    <div id=\"container2\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Hilo Open Close Series\n */\nvar _this = this;\nthis.renderChartOhlc = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                crosshairTooltip: { enable: true },\n                majorGridLines: { width: 0 }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: 'n0',\n                lineStyle: { width: 0 }, rangePadding: 'None',\n                majorTickLines: { width: 0 }\n            },\n            chartArea: { border: { width: 0 } },\n            series: [\n                {\n                    type: 'HiloOpenClose',\n                    dataSource: chartData, animation: { enable: true },\n                    bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc'\n                }\n            ],\n            tooltip: { enable: true, shared: true },\n            crosshair: {\n                enable: true, lineType: 'Vertical', line: { width: 0 }\n            },\n            legendSettings: { visible: false }, width: ej.base.Browser.isDevice ? '100%' : '80%',\n            axisLabelRender: function (args) {\n                if (args.axis.title === 'Price') {\n                    args.text = '$' + args.text;\n                }\n            },\n\n        });\n        chart.appendTo('#container2');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            _this.renderChartOhlc(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/hilo-open-close/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n     <h4 id=\"days\" style=\"font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;\" align=\"center\">AAPL Historical</h4>\n    <div id=\"container2\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Hilo Open Close Series\n */\nvar _this = this;\nthis.renderChartOhlc = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                crosshairTooltip: { enable: true },\n                majorGridLines: { width: 0 }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: 'n0',\n                lineStyle: { width: 0 }, rangePadding: 'None',\n                majorTickLines: { width: 0 }\n            },\n            chartArea: { border: { width: 0 } },\n            series: [\n                {\n                    type: 'HiloOpenClose',\n                    dataSource: chartData, animation: { enable: true },\n                    bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc'\n                }\n            ],\n            tooltip: { enable: true, shared: true },\n            crosshair: {\n                enable: true, lineType: 'Vertical', line: { width: 0 }\n            },\n            legendSettings: { visible: false }, width: ej.base.Browser.isDevice ? '100%' : '80%',\n            axisLabelRender: function (args) {\n                if (args.axis.title === 'Price') {\n                    args.text = '$' + args.text;\n                }\n            },\n\n        });\n        chart.appendTo('#container2');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            _this.renderChartOhlc(chartData);\n        };\n    "}
--- a/src/chart/hilo-stack.json
+++ b/src/chart/hilo-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/hilo/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"hilo-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Hilo Series\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                crosshairTooltip: { enable: true },\n                minimum: new Date('2016-12-31'),\n                maximum: new Date('2017-09-30'),\n                majorGridLines: { width: 0 }\n            },\n            chartArea: {\n                border: {\n                    width: 0\n                }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                minimum: 100,\n                maximum: 180,\n                interval: 20,\n                labelFormat: '${value}',\n                lineStyle: { width: 0 },\n                majorTickLines: { width: 0 }\n            },\n            legendSettings: { visible: false },\n            series: [\n                {\n                    type: 'Hilo',\n                    dataSource: chartData, animation: { enable: true },\n                    xName: 'x', low: 'low', high: 'high', name: 'Apple Inc'\n                }\n            ],\n            title: 'AAPL Historical',\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: {\n                enable: true, lineType: 'Vertical', line: {\n                    width: 0,\n                }\n            },\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n        });\n        chart.appendTo('#hilo-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/hilo/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"hilo-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Hilo Series\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                crosshairTooltip: { enable: true },\n                minimum: new Date('2016-12-31'),\n                maximum: new Date('2017-09-30'),\n                majorGridLines: { width: 0 }\n            },\n            chartArea: {\n                border: {\n                    width: 0\n                }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                minimum: 100,\n                maximum: 180,\n                interval: 20,\n                labelFormat: '${value}',\n                lineStyle: { width: 0 },\n                majorTickLines: { width: 0 }\n            },\n            legendSettings: { visible: false },\n            series: [\n                {\n                    type: 'Hilo',\n                    dataSource: chartData, animation: { enable: true },\n                    xName: 'x', low: 'low', high: 'high', name: 'Apple Inc'\n                }\n            ],\n            title: 'AAPL Historical',\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: {\n                enable: true, lineType: 'Vertical', line: {\n                    width: 0,\n                }\n            },\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n        });\n        chart.appendTo('#hilo-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
--- a/src/chart/hilo.html
+++ b/src/chart/hilo.html
@ -16,7 +16,7 @@
        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
    </p>
    <p>
-        More information on the Hilo series can be found in this
+        More information on the <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/hilo-chart">Hilo series</a> can be found in this
        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
    </p>
 </div>
--- a/src/chart/histogram-stack.json
+++ b/src/chart/histogram-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/histogram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Histogram Series\n */\n\n     var chartData = [];\n     var points = [5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,\n        5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,\n        26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,\n        46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,\n        46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,\n        46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,\n        46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,\n        66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,\n        66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,\n        87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250\n    ];\n    points.map(function (value) {\n       chartData.push({\n            y: value\n        });\n    });\n    var chart = new ej.charts.Chart({\n         primaryXAxis: {\n            majorGridLines: { width: 0 }, title: 'Score of Final Examination',\n            minimum: 0, maximum: 100\n        },\n        chartArea: { border: { width: 0 } },\n        legendSettings: { visible: false },\n        primaryYAxis: {\n            title: 'Number of Students',\n            minimum: 0, maximum: 50, interval: 10,\n            majorTickLines: { width: 0 }, lineStyle: { width: 0 }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Histogram', width: 2, yName: 'y', name: 'Score',\n                dataSource: chartData, binInterval: 20,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n                showNormalDistribution: true, columnWidth: 0.99\n            }\n        ],\n        resized: function (args) {\n            location.reload();\n        },\n        //Initializing Chart Title\n        title: 'Examination Result', tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/histogram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Histogram Series\n */\n\n     var chartData = [];\n     var points = [5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,\n        5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,\n        26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,\n        46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,\n        46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,\n        46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,\n        46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,\n        66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,\n        66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,\n        87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250\n    ];\n    points.map(function (value) {\n       chartData.push({\n            y: value\n        });\n    });\n    var chart = new ej.charts.Chart({\n         primaryXAxis: {\n            majorGridLines: { width: 0 }, title: 'Score of Final Examination',\n            minimum: 0, maximum: 100\n        },\n        chartArea: { border: { width: 0 } },\n        legendSettings: { visible: false },\n        primaryYAxis: {\n            title: 'Number of Students',\n            minimum: 0, maximum: 50, interval: 10,\n            majorTickLines: { width: 0 }, lineStyle: { width: 0 }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Histogram', width: 2, yName: 'y', name: 'Score',\n                dataSource: chartData, binInterval: 20,\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n                showNormalDistribution: true, columnWidth: 0.99\n            }\n        ],\n        resized: function (args) {\n            location.reload();\n        },\n        //Initializing Chart Title\n        title: 'Examination Result', tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
--- a/src/chart/histogram.html
+++ b/src/chart/histogram.html
@ -19,7 +19,7 @@
        To see the tooltip in action, hover the mouse over a point or tap a point in touch enabled devices.
    </p>
    <br>
-        More information on the histogram series can be found in this
+        More information on the <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/histogram-chart">Histogram series</a> can be found in this
        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
    </p>
 </div>
--- a/src/chart/indexed-axis-stack.json
+++ b/src/chart/indexed-axis-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/indexed-axis/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"index-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Indexed:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <input type=\"checkbox\" id=\"isIndexed\" checked>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Indexed Category Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            interval: 1,\n            crosshairTooltip: { enable: true },\n            isIndexed: true\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'GDP Growth Rate',\n            labelFormat: '{value}%'\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 'Myanmar', y: 7.3 },\n                    { x: 'India', y: 7.9 },\n                    { x: 'Bangladesh', y: 6.8 },\n                    { x: 'Cambodia', y: 7.0 },\n                    { x: 'China', y: 6.9 }\n                ],\n                xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10 },\n                yName: 'y', name: '2015',\n            },\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 'Poland', y: 2.7 },\n                    { x: 'Australia', y: 2.5 },\n                    { x: 'Singapore', y: 2.0 },\n                    { x: 'Canada', y: 1.4 },\n                    { x: 'Germany', y: 1.8 }\n                ],\n                xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10 },\n                yName: 'y', name: '2016',\n            },\n        ],\n        //Initializing Tooltip\n        tooltip: { enable: true, shared: true },\n        //Initializing Crosshair\n        crosshair: { enable: true, lineType: 'Vertical' },\n        //Initializing Title\n        title: 'Real GDP Growth',\n\n    });\n    chart.appendTo('#index-container');\n    document.getElementById('isIndexed').onchange = function () {\n        var element = (document.getElementById('isIndexed'));\n        chart.primaryXAxis.isIndexed = element.checked;\n        if (chart.primaryXAxis.isIndexed) {\n            chart.series[0].type = 'Column';\n            chart.series[1].type = 'Column';\n            chart.series[0].marker.visible = false;\n            chart.series[1].marker.visible = false;\n            chart.primaryXAxis.labelRotation = 0;\n            chart.crosshair.line.width = 1;\n        }\n        else {\n            chart.series[0].type = 'Line';\n            chart.series[1].type = 'Line';\n            chart.series[0].marker.visible = true;\n            chart.series[1].marker.visible = true;\n            chart.primaryXAxis.labelRotation = 90;\n            chart.crosshair.line.width = 0;\n        }\n        chart.refresh();\n    };\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/indexed-axis/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"index-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Indexed:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <input type=\"checkbox\" id=\"isIndexed\" checked>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Indexed Category Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            interval: 1,\n            crosshairTooltip: { enable: true },\n            isIndexed: true\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'GDP Growth Rate',\n            labelFormat: '{value}%'\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 'Myanmar', y: 7.3 },\n                    { x: 'India', y: 7.9 },\n                    { x: 'Bangladesh', y: 6.8 },\n                    { x: 'Cambodia', y: 7.0 },\n                    { x: 'China', y: 6.9 }\n                ],\n                xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10 },\n                yName: 'y', name: '2015',\n            },\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 'Poland', y: 2.7 },\n                    { x: 'Australia', y: 2.5 },\n                    { x: 'Singapore', y: 2.0 },\n                    { x: 'Canada', y: 1.4 },\n                    { x: 'Germany', y: 1.8 }\n                ],\n                xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10 },\n                yName: 'y', name: '2016',\n            },\n        ],\n        //Initializing Tooltip\n        tooltip: { enable: true, shared: true },\n        //Initializing Crosshair\n        crosshair: { enable: true, lineType: 'Vertical' },\n        //Initializing Title\n        title: 'Real GDP Growth',\n\n    });\n    chart.appendTo('#index-container');\n    document.getElementById('isIndexed').onchange = function () {\n        var element = (document.getElementById('isIndexed'));\n        chart.primaryXAxis.isIndexed = element.checked;\n        if (chart.primaryXAxis.isIndexed) {\n            chart.series[0].type = 'Column';\n            chart.series[1].type = 'Column';\n            chart.series[0].marker.visible = false;\n            chart.series[1].marker.visible = false;\n            chart.primaryXAxis.labelRotation = 0;\n            chart.crosshair.line.width = 1;\n        }\n        else {\n            chart.series[0].type = 'Line';\n            chart.series[1].type = 'Line';\n            chart.series[0].marker.visible = true;\n            chart.series[1].marker.visible = true;\n            chart.primaryXAxis.labelRotation = 90;\n            chart.crosshair.line.width = 0;\n        }\n        chart.refresh();\n    };\n"}
--- a/src/chart/inversed-stack.json
+++ b/src/chart/inversed-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/inversed/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"inverse-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px; margin-top: -5px\">\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var pointRender = function (args) {\n    var inverseTheme = location.hash.split('/')[1];\n    inverseTheme = inverseTheme ? inverseTheme : 'Material';\n    if (inverseTheme && inverseTheme.indexOf('fabric') > -1) {\n        args.fill = window.fabricColors[args.point.index % 10];\n    } else if (inverseTheme === 'material') {\n        args.fill = window.materialColors[args.point.index % 10];\n    } else if (inverseTheme === 'highcontrast') {\n        args.fill = window.highcontrastColors[args.point.index % 10];\n    } else {\n        args.fill = window.bootstrapColors[args.point.index % 10];\n    }\n};\n\n/**\n * Sample for Inversed Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            opposedPosition: true,\n            isInversed: true,\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            edgeLabelPlacement: 'Shift',\n            labelIntersectAction: 'Rotate45',\n            isInversed: true,\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        pointRender: pointRender,\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: '2008', y: 15.1 }, { x: '2009', y: 16 }, { x: '2010', y: 21.4 },\n                    { x: '2011', y: 18 }, { x: '2012', y: 16.2 }, { x: '2013', y: 11 },\n                    { x: '2014', y: 7.6 }, { x: '2015', y: 1.5 }\n                ],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } },\n                xName: 'x',\n                yName: 'y',\n                name: 'Rate'\n            },\n        ],\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        legendSettings: { visible: false },\n        //Initializing Chart Titel\n        title: 'Exchange Rate (INR per USD)',\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#inverse-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/inversed/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"inverse-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px; margin-top: -5px\">\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var pointRender = function (args) {\n    var inverseTheme = location.hash.split('/')[1];\n    inverseTheme = inverseTheme ? inverseTheme : 'Material';\n    if (inverseTheme && inverseTheme.indexOf('fabric') > -1) {\n        args.fill = window.fabricColors[args.point.index % 10];\n    } else if (inverseTheme === 'material') {\n        args.fill = window.materialColors[args.point.index % 10];\n    } else if (inverseTheme === 'highcontrast') {\n        args.fill = window.highcontrastColors[args.point.index % 10];\n    } else {\n        args.fill = window.bootstrapColors[args.point.index % 10];\n    }\n};\n\n/**\n * Sample for Inversed Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            opposedPosition: true,\n            isInversed: true,\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            edgeLabelPlacement: 'Shift',\n            labelIntersectAction: 'Rotate45',\n            isInversed: true,\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        pointRender: pointRender,\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: '2008', y: 15.1 }, { x: '2009', y: 16 }, { x: '2010', y: 21.4 },\n                    { x: '2011', y: 18 }, { x: '2012', y: 16.2 }, { x: '2013', y: 11 },\n                    { x: '2014', y: 7.6 }, { x: '2015', y: 1.5 }\n                ],\n                marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } },\n                xName: 'x',\n                yName: 'y',\n                name: 'Rate'\n            },\n        ],\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        legendSettings: { visible: false },\n        //Initializing Chart Titel\n        title: 'Exchange Rate (INR per USD)',\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#inverse-container');\n"}
--- a/src/chart/large-stack.json
+++ b/src/chart/large-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/large/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"></div></body></html>","index.js":"{{ripple}}"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/large/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"></div></body></html>","index.js":"{{ripple}}"}
--- a/src/chart/lazy-loading-stack.json
+++ b/src/chart/lazy-loading-stack.json
--- a/src/chart/line-multi-color-stack.json
+++ b/src/chart/line-multi-color-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/line-multi-color/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Line series\n */\n\n    var dataValues = [];\n    var colors = ['red', 'green', '#ff0097', 'crimson', 'blue', 'darkorange', 'deepskyblue',\n        'mediumvioletred', 'violet', 'peru', 'gray', 'deeppink', 'navy'];\n        (window.rainFallData).map(function (value, index) {\n            dataValues.push({\n                XValue: new Date(2017, -index, 1), YValue: value.toFixed(2),\n                color: colors[Math.floor(index / 16)]\n            });\n         });\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n\n        //Initializing Primary Y Axis\n        primaryYAxis:\n            {\n                rangePadding: 'None',\n                minimum: 4,\n                maximum: 10,\n                title: 'Particulate Matter(PM)',\n                lineStyle: { width: 0 },\n                majorTickLines: { width: 0 },\n                minorTickLines: { width: 0 }\n            },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                dataSource: dataValues,\n                width: 1.5,\n                name: 'Rainfall', xName: 'XValue', yName: 'YValue', pointColorMapping: 'color',\n                type: 'MultiColoredLine'\n            }\n        ],\n        legendSettings: { visible: false },\n\n        //Initializing Chart title\n        title: 'Particulate Levels in Rainfall',\n        //Initializing User Interaction Tooltip\n        tooltip: {\n            enable: true, shared: true,enableAnimation : false\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/line-multi-color/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Line series\n */\n\n    var dataValues = [];\n    var colors = ['red', 'green', '#ff0097', 'crimson', 'blue', 'darkorange', 'deepskyblue',\n        'mediumvioletred', 'violet', 'peru', 'gray', 'deeppink', 'navy'];\n        (window.rainFallData).map(function (value, index) {\n            dataValues.push({\n                XValue: new Date(2017, -index, 1), YValue: value.toFixed(2),\n                color: colors[Math.floor(index / 16)]\n            });\n         });\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n\n        //Initializing Primary Y Axis\n        primaryYAxis:\n            {\n                rangePadding: 'None',\n                minimum: 4,\n                maximum: 10,\n                title: 'Particulate Matter(PM)',\n                lineStyle: { width: 0 },\n                majorTickLines: { width: 0 },\n                minorTickLines: { width: 0 }\n            },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                dataSource: dataValues,\n                width: 1.5,\n                name: 'Rainfall', xName: 'XValue', yName: 'YValue', pointColorMapping: 'color',\n                type: 'MultiColoredLine'\n            }\n        ],\n        legendSettings: { visible: false },\n\n        //Initializing Chart title\n        title: 'Particulate Levels in Rainfall',\n        //Initializing User Interaction Tooltip\n        tooltip: {\n            enable: true, shared: true,enableAnimation : false\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
--- a/src/chart/line-segments-stack.json
+++ b/src/chart/line-segments-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/line-segments/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n    <script id=\"templateWrap\" type=\"text/x-template\">\n            <div style=\"width:80px; padding: 5px;\">\n                <table style=\"width: 100%\">\n                    <tr>\n                        <td>\n                            <div style='width: 10px; height: 10px; background:blue;border-radius: 15px;'></div>\n                        </td>\n                        <td style=\"padding-left: 5px;\">\n                            High\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>\n                            <div style='width: 10px; height: 10px; background:green;;border-radius: 15px;'></div>\n                        </td>\n                        <td style=\"padding-left: 5px;\">\n                            Medium\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>\n                            <div style='width: 10px; height: 10px; background:red;;border-radius: 15px;'></div>\n                        </td>\n                        <td style=\"padding-left: 5px;\">\n                            Low\n                        </td>\n                    </tr>\n                </table>\n            </div>\n        </script>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Line series\n */\n\n    var dataValues = [];\n    [\n        380, 410, 310, 540, 510, 330, 490, 470, 472, 460, 550, 420, 380, 430, 385, 520, 580, 420, 350, 505,\n        535, 410, 204, 400, 415, 408, 415, 350, 375, 500, 390, 450, 440, 350, 400, 365, 490, 400, 520, 510,\n        395, 380, 404, 400, 500, 390, 610, 380, 390, 420, 440, 570, 600, 380, 410, 405, 480, 320, 420, 440,\n        320, 280, 320, 400, 390, 460, 470, 490, 420, 480, 410, 420, 580, 410, 380, 480, 360, 650, 680, 720,\n        580, 480, 520, 440, 420, 430, 380, 520, 410, 540, 400, 390, 460, 470, 490, 420, 480, 470, 490, 330,\n        520, 480, 580, 590, 600, 310, 480, 500, 400, 508, 480, 460, 700, 705, 480, 410, 480,\n    ].map(function (value, index) {\n        dataValues.push({ XValue: new Date(1900 + index, 0, 1), YValue: value });\n    });\n    var chart = new ej.charts.Chart({\n\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n\n        //Initializing Primary Y Axis\n        primaryYAxis:\n            {\n                labelFormat: '{value}mm',\n                rangePadding: 'None',\n                minimum: 200,\n                maximum: 800,\n                interval: 100,\n                lineStyle: { width: 0 },\n                majorTickLines: { width: 0 },\n                minorTickLines: { width: 0 }\n            },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        annotations: [\n            {\n                content: '#templateWrap',\n                region: 'Series',\n                x: '90%',\n                y: '12%'\n            }\n        ],\n        legendSettings: { visible: false },\n        //Initializing Chart Series\n        series: [\n            {\n                dataSource: dataValues,\n                width: 2, segmentAxis: 'Y',\n                segments: [{\n                        value: 450,\n                        color: 'red'\n                    }, {\n                        value: 500,\n                        color: 'green'\n                    }, {\n                        color: 'blue'\n                    }],\n                name: 'Australia', xName: 'XValue', yName: 'YValue', type: 'MultiColoredLine'\n            }\n        ],\n\n        //Initializing Chart title\n        title: 'Annual Mean Rainfall for Australia',\n        //Initializing User Interaction Tooltip\n        tooltip: {\n            enable: true, shared: true, enableAnimation : false\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/line-segments/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n    <script id=\"templateWrap\" type=\"text/x-template\">\n            <div style=\"width:80px; padding: 5px;\">\n                <table style=\"width: 100%\">\n                    <tr>\n                        <td>\n                            <div style='width: 10px; height: 10px; background:blue;border-radius: 15px;'></div>\n                        </td>\n                        <td style=\"padding-left: 5px;\">\n                            High\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>\n                            <div style='width: 10px; height: 10px; background:green;;border-radius: 15px;'></div>\n                        </td>\n                        <td style=\"padding-left: 5px;\">\n                            Medium\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>\n                            <div style='width: 10px; height: 10px; background:red;;border-radius: 15px;'></div>\n                        </td>\n                        <td style=\"padding-left: 5px;\">\n                            Low\n                        </td>\n                    </tr>\n                </table>\n            </div>\n        </script>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Line series\n */\n\n    var dataValues = [];\n    [\n        380, 410, 310, 540, 510, 330, 490, 470, 472, 460, 550, 420, 380, 430, 385, 520, 580, 420, 350, 505,\n        535, 410, 204, 400, 415, 408, 415, 350, 375, 500, 390, 450, 440, 350, 400, 365, 490, 400, 520, 510,\n        395, 380, 404, 400, 500, 390, 610, 380, 390, 420, 440, 570, 600, 380, 410, 405, 480, 320, 420, 440,\n        320, 280, 320, 400, 390, 460, 470, 490, 420, 480, 410, 420, 580, 410, 380, 480, 360, 650, 680, 720,\n        580, 480, 520, 440, 420, 430, 380, 520, 410, 540, 400, 390, 460, 470, 490, 420, 480, 470, 490, 330,\n        520, 480, 580, 590, 600, 310, 480, 500, 400, 508, 480, 460, 700, 705, 480, 410, 480,\n    ].map(function (value, index) {\n        dataValues.push({ XValue: new Date(1900 + index, 0, 1), YValue: value });\n    });\n    var chart = new ej.charts.Chart({\n\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n\n        //Initializing Primary Y Axis\n        primaryYAxis:\n            {\n                labelFormat: '{value}mm',\n                rangePadding: 'None',\n                minimum: 200,\n                maximum: 800,\n                interval: 100,\n                lineStyle: { width: 0 },\n                majorTickLines: { width: 0 },\n                minorTickLines: { width: 0 }\n            },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        annotations: [\n            {\n                content: '#templateWrap',\n                region: 'Series',\n                x: '90%',\n                y: '12%'\n            }\n        ],\n        legendSettings: { visible: false },\n        //Initializing Chart Series\n        series: [\n            {\n                dataSource: dataValues,\n                width: 2, segmentAxis: 'Y',\n                segments: [{\n                        value: 450,\n                        color: 'red'\n                    }, {\n                        value: 500,\n                        color: 'green'\n                    }, {\n                        color: 'blue'\n                    }],\n                name: 'Australia', xName: 'XValue', yName: 'YValue', type: 'MultiColoredLine'\n            }\n        ],\n\n        //Initializing Chart title\n        title: 'Annual Mean Rainfall for Australia',\n        //Initializing User Interaction Tooltip\n        tooltip: {\n            enable: true, shared: true, enableAnimation : false\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#container');\n"}
--- a/src/chart/line-stack.json
+++ b/src/chart/line-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/line/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"line-container\" align=\"center\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for Line Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            labelFormat: '{value}%',\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 100,\n            interval: 20,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },\n                    { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },\n                    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },\n                    { x: new Date(2011, 0, 1), y: 70 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'Germany',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },\n                    { x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 },\n                    { x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 }, { x: new Date(2011, 0, 1), y: 84 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'England',\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Inflation - Consumer Price',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#line-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/line/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"line-container\" align=\"center\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for Line Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            labelFormat: 'y',\n            intervalType: 'Years',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            labelFormat: '{value}%',\n            rangePadding: 'None',\n            minimum: 0,\n            maximum: 100,\n            interval: 20,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },\n                    { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },\n                    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },\n                    { x: new Date(2011, 0, 1), y: 70 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'Germany',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },\n                    { x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 },\n                    { x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 }, { x: new Date(2011, 0, 1), y: 84 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n                yName: 'y', name: 'England',\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Inflation - Consumer Price',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#line-container');\n"}
--- a/src/chart/line.html
+++ b/src/chart/line.html
@ -3,7 +3,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample visualizes the consumer price data with default line series in the chart. 
+        This <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types">line chart</a> sample visualizes the consumer price data with default line series in the chart. 
        Data points are enhanced with marker and tooltip.
    </p>
 </div>
@ -17,7 +17,7 @@
    </p>
    <br>
    <p>
-        More information on the line series can be found in this
+        More information on the <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/line-chart">line series</a> can be found in this
        <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#type">documentation section</a>.
    </p>
 </div>
--- a/src/chart/local-data-stack.json
+++ b/src/chart/local-data-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div id=\"local-container\" align=\"center\"></div>\n</div>\n\n  \n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var series1 = [];\nvar series2 = [];\nvar point1;\nvar point2;\nvar value = 80;\nvar value1 = 90;\nvar i;\nfor (i = 1; i < 500; i++) {\n    if (Math.random() > 0.5) {\n        value += Math.random();\n        value1 += Math.random();\n    }\n    else {\n        value -= Math.random();\n        value1 -= Math.random();\n    }\n    point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };\n    point2 = { x: new Date(1960, (i + 1), i), y: Math.round(value1) };\n    series1.push(point1);\n    series2.push(point2);\n}\n/**\n * Sample for Local Data binding\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Years',\n            majorGridLines: { width: 0 },\n            skeleton: 'y',\n            valueType: 'DateTime',\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'Price',\n            labelFormat: '${value}',\n            rangePadding: 'None',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: series1,\n                xName: 'x', yName: 'y',\n                width: 2, name: 'Product X',\n                animation: { enable: true }, marker: { visible: false }\n            },\n            {\n                type: 'Line',\n                dataSource: series2,\n                xName: 'x', yName: 'y',\n                width: 2, name: 'Product Y',\n                animation: { enable: true }, marker: { visible: false }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Stock Price Analysis',\n        //Initializing Tooltip and Crosshair\n        tooltip: {\n            enable: true, shared: true\n        },\n        // Initializing the crosshair\n        crosshair: {\n            enable: true,\n            line: {\n                color: 'rgba(204,214,235,0.25)',\n                width: ej.base.Browser.isDevice ? 50 : 20,\n            },\n            lineType: 'Vertical'\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n    });\n    chart.appendTo('#local-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div id=\"local-container\" align=\"center\"></div>\n</div>\n\n  \n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var series1 = [];\nvar series2 = [];\nvar point1;\nvar point2;\nvar value = 80;\nvar value1 = 90;\nvar i;\nfor (i = 1; i < 500; i++) {\n    if (Math.random() > 0.5) {\n        value += Math.random();\n        value1 += Math.random();\n    }\n    else {\n        value -= Math.random();\n        value1 -= Math.random();\n    }\n    point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };\n    point2 = { x: new Date(1960, (i + 1), i), y: Math.round(value1) };\n    series1.push(point1);\n    series2.push(point2);\n}\n/**\n * Sample for Local Data binding\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Years',\n            majorGridLines: { width: 0 },\n            skeleton: 'y',\n            valueType: 'DateTime',\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'Price',\n            labelFormat: '${value}',\n            rangePadding: 'None',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: series1,\n                xName: 'x', yName: 'y',\n                width: 2, name: 'Product X',\n                animation: { enable: true }, marker: { visible: false }\n            },\n            {\n                type: 'Line',\n                dataSource: series2,\n                xName: 'x', yName: 'y',\n                width: 2, name: 'Product Y',\n                animation: { enable: true }, marker: { visible: false }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Stock Price Analysis',\n        //Initializing Tooltip and Crosshair\n        tooltip: {\n            enable: true, shared: true\n        },\n        // Initializing the crosshair\n        crosshair: {\n            enable: true,\n            line: {\n                color: 'rgba(204,214,235,0.25)',\n                width: ej.base.Browser.isDevice ? 50 : 20,\n            },\n            lineType: 'Vertical'\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n    });\n    chart.appendTo('#local-container');\n"}
--- a/src/chart/logarithmic-scale-stack.json
+++ b/src/chart/logarithmic-scale-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/logarithmic-scale/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"log-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Logarithmic Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            labelFormat: 'y',\n            valueType: 'DateTime',\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            valueType: 'Logarithmic',\n            edgeLabelPlacement: 'Shift',\n            minorTicksPerInterval: 5,\n            majorGridLines: { width: 1.5 },\n            minorTickLines: { width: 0, height: 4 },\n            minimum: 0,\n            maximum: 100000,\n            interval: 1,\n            title: ej.base.Browser.isDevice ? '' : 'Profit',\n            labelFormat: '${value}'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(1995, 0, 1), y: 80 },\n                    { x: new Date(1996, 0, 1), y: 200 },\n                    { x: new Date(1997, 0, 1), y: 400 },\n                    { x: new Date(1998, 0, 1), y: 600 },\n                    { x: new Date(1999, 0, 1), y: 700 },\n                    { x: new Date(2000, 0, 1), y: 1400 },\n                    { x: new Date(2001, 0, 1), y: 2000 },\n                    { x: new Date(2002, 0, 1), y: 4000 },\n                    { x: new Date(2003, 0, 1), y: 6000 },\n                    { x: new Date(2004, 0, 1), y: 8000 },\n                    { x: new Date(2005, 0, 1), y: 11000 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product X',\n                marker: {\n                    visible: true, height: 10, width: 10\n                }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Product X Growth [1995-2005]', legendSettings: { visible: false },\n        //Initializing Tooltip\n        tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#log-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/logarithmic-scale/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"log-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Logarithmic Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            labelFormat: 'y',\n            valueType: 'DateTime',\n            edgeLabelPlacement: 'Shift'\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            valueType: 'Logarithmic',\n            edgeLabelPlacement: 'Shift',\n            minorTicksPerInterval: 5,\n            majorGridLines: { width: 1.5 },\n            minorTickLines: { width: 0, height: 4 },\n            minimum: 0,\n            maximum: 100000,\n            interval: 1,\n            title: ej.base.Browser.isDevice ? '' : 'Profit',\n            labelFormat: '${value}'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: new Date(1995, 0, 1), y: 80 },\n                    { x: new Date(1996, 0, 1), y: 200 },\n                    { x: new Date(1997, 0, 1), y: 400 },\n                    { x: new Date(1998, 0, 1), y: 600 },\n                    { x: new Date(1999, 0, 1), y: 700 },\n                    { x: new Date(2000, 0, 1), y: 1400 },\n                    { x: new Date(2001, 0, 1), y: 2000 },\n                    { x: new Date(2002, 0, 1), y: 4000 },\n                    { x: new Date(2003, 0, 1), y: 6000 },\n                    { x: new Date(2004, 0, 1), y: 8000 },\n                    { x: new Date(2005, 0, 1), y: 11000 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product X',\n                marker: {\n                    visible: true, height: 10, width: 10\n                }\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Product X Growth [1995-2005]', legendSettings: { visible: false },\n        //Initializing Tooltip\n        tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#log-container');\n"}
--- a/src/chart/logarithmic-scale.html
+++ b/src/chart/logarithmic-scale.html
@ -3,7 +3,7 @@
 </div>
 <div id="action-description">
    <p>
-        This sample demonstrates the rendering of logarithmic axis in the chart.
+        This sample demonstrates the rendering of <a href="https://ej2.syncfusion.com/documentation/chart/logarithmic-axis/">logarithmic axis</a> in the chart.
    </p>
 </div>
 <div id="description">
--- a/src/chart/marker-chart-stack.json
+++ b/src/chart/marker-chart-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/marker-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"marker-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://www.marketingprofs.com/charts/2012/7064/facebook-stats-five-years-of-worldwide-growth\" target=\"_blank\">www.marketingprofs.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Chart Symbols\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Countries', valueType: 'Category',\n            interval: 1, labelIntersectAction: 'Rotate45',\n            majorGridLines: { width: 0 },\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Penetration', rangePadding: 'None',\n            labelFormat: '{value}%', minimum: 0,\n            lineStyle: { width: 0 },\n            maximum: 75, interval: 15\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [{ x: 'WW', y: 12, text: 'World Wide' },\n                    { x: 'EU', y: 9.9, text: 'Europe' },\n                    { x: 'APAC', y: 4.4, text: 'Asia Pacific' },\n                    { x: 'LATAM', y: 6.4, text: 'Latin America' },\n                    { x: 'MEA', y: 30, text: 'Middle East Africa' },\n                    { x: 'NA', y: 25.3, text: 'North America' }],\n                name: 'December 2007',\n                marker: {\n                    visible: true, width: 10, height: 10,\n                    shape: 'Diamond', dataLabel: { name: 'text' }\n                },\n                xName: 'x', width: 2,\n                yName: 'y',\n            },\n            {\n                type: 'Line',\n                dataSource: [{ x: 'WW', y: 22, text: 'World Wide' },\n                    { x: 'EU', y: 26, text: 'Europe' },\n                    { x: 'APAC', y: 9.3, text: 'Asia Pacific' },\n                    { x: 'LATAM', y: 28, text: 'Latin America' },\n                    { x: 'MEA', y: 45.7, text: 'Middle East Africa' },\n                    { x: 'NA', y: 35.9, text: 'North America' }],\n                xName: 'x', width: 2,\n                marker: {\n                    visible: true, width: 10, height: 10,\n                    shape: 'Pentagon', dataLabel: { name: 'text' }\n                },\n                yName: 'y', name: 'December 2008',\n            },\n            {\n                type: 'Line',\n                dataSource: [{ x: 'WW', y: 38.3, text: 'World Wide' },\n                    { x: 'EU', y: 45.2, text: 'Europe' },\n                    { x: 'APAC', y: 18.2, text: 'Asia Pacific' },\n                    { x: 'LATAM', y: 46.7, text: 'Latin America' },\n                    { x: 'MEA', y: 61.5, text: 'Middle East Africa' },\n                    { x: 'NA', y: 64, text: 'North America' }],\n                xName: 'x', width: 2,\n                marker: {\n                    visible: true,\n                    width: 10, height: 10,\n                    shape: 'Triangle',\n                    dataLabel: { name: 'text' }\n                },\n                yName: 'y', name: 'December 2009',\n            }\n        ],\n        //Initializing Chart Title\n        title: 'FB Penetration of Internet Audience',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        legendSettings: { visible: false },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#marker-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/marker-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"marker-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://www.marketingprofs.com/charts/2012/7064/facebook-stats-five-years-of-worldwide-growth\" target=\"_blank\">www.marketingprofs.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Chart Symbols\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Countries', valueType: 'Category',\n            interval: 1, labelIntersectAction: 'Rotate45',\n            majorGridLines: { width: 0 },\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Penetration', rangePadding: 'None',\n            labelFormat: '{value}%', minimum: 0,\n            lineStyle: { width: 0 },\n            maximum: 75, interval: 15\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [{ x: 'WW', y: 12, text: 'World Wide' },\n                    { x: 'EU', y: 9.9, text: 'Europe' },\n                    { x: 'APAC', y: 4.4, text: 'Asia Pacific' },\n                    { x: 'LATAM', y: 6.4, text: 'Latin America' },\n                    { x: 'MEA', y: 30, text: 'Middle East Africa' },\n                    { x: 'NA', y: 25.3, text: 'North America' }],\n                name: 'December 2007',\n                marker: {\n                    visible: true, width: 10, height: 10,\n                    shape: 'Diamond', dataLabel: { name: 'text' }\n                },\n                xName: 'x', width: 2,\n                yName: 'y',\n            },\n            {\n                type: 'Line',\n                dataSource: [{ x: 'WW', y: 22, text: 'World Wide' },\n                    { x: 'EU', y: 26, text: 'Europe' },\n                    { x: 'APAC', y: 9.3, text: 'Asia Pacific' },\n                    { x: 'LATAM', y: 28, text: 'Latin America' },\n                    { x: 'MEA', y: 45.7, text: 'Middle East Africa' },\n                    { x: 'NA', y: 35.9, text: 'North America' }],\n                xName: 'x', width: 2,\n                marker: {\n                    visible: true, width: 10, height: 10,\n                    shape: 'Pentagon', dataLabel: { name: 'text' }\n                },\n                yName: 'y', name: 'December 2008',\n            },\n            {\n                type: 'Line',\n                dataSource: [{ x: 'WW', y: 38.3, text: 'World Wide' },\n                    { x: 'EU', y: 45.2, text: 'Europe' },\n                    { x: 'APAC', y: 18.2, text: 'Asia Pacific' },\n                    { x: 'LATAM', y: 46.7, text: 'Latin America' },\n                    { x: 'MEA', y: 61.5, text: 'Middle East Africa' },\n                    { x: 'NA', y: 64, text: 'North America' }],\n                xName: 'x', width: 2,\n                marker: {\n                    visible: true,\n                    width: 10, height: 10,\n                    shape: 'Triangle',\n                    dataLabel: { name: 'text' }\n                },\n                yName: 'y', name: 'December 2009',\n            }\n        ],\n        //Initializing Chart Title\n        title: 'FB Penetration of Internet Audience',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n        legendSettings: { visible: false },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n    });\n    chart.appendTo('#marker-container');\n"}
--- a/src/chart/momentum-stack.json
+++ b/src/chart/momentum-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/momentum/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"momentum-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Momentum Indicator\n */\n this.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                plotOffset: 25,\n                minimum: 50, maximum: 170,\n                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },\n            },\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,\n                    majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [\n                        {\n                            start: 80, end: 120, text: '', color: 'black', visible: true,\n                            opacity: 0.03, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n                    period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#momentum-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/momentum/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"momentum-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Momentum Indicator\n */\n this.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                plotOffset: 25,\n                minimum: 50, maximum: 170,\n                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },\n            },\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,\n                    majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [\n                        {\n                            start: 80, end: 120, text: '', color: 'black', visible: true,\n                            opacity: 0.03, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n                    period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#momentum-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
--- a/src/chart/moving-average-convergence-divergence-indicator-stack.json
+++ b/src/chart/moving-average-convergence-divergence-indicator-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/moving-average-convergence-divergence-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"macd-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for MACD Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                plotOffset: 25,\n                minimum: 50, maximum: 170,\n                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n            },\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,\n                    majorTickLines: { width: 0 }, title: 'MACD', stripLines: [\n                        {\n                            start: -3.5, end: 3.5, text: '', color: 'black', visible: true,\n                            opacity: 0.03, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'Macd',\n                    period: 3,\n                    fastPeriod: 8,\n                    slowPeriod: 5,\n                    seriesName: 'Apple Inc',\n                    macdType: 'Both',\n                    width: 2,\n                    macdPositiveColor: '#2ecd71',\n                    macdNegativeColor: '#e74c3d',\n                    fill: '#6063ff',\n                    yAxisName: 'secondary'\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#macd-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/moving-average-convergence-divergence-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"macd-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for MACD Indicator\n */\nthis.renderChart = function (chartData) {\n        var chart = new ej.charts.Chart({\n            primaryXAxis: {\n                valueType: 'DateTime',\n                majorGridLines: { width: 0 },\n                zoomFactor: 0.2, zoomPosition: 0.6,\n                crosshairTooltip: { enable: true }\n            },\n            primaryYAxis: {\n                title: 'Price',\n                labelFormat: '${value}',\n                plotOffset: 25,\n                minimum: 50, maximum: 170,\n                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n            },\n            rows: [\n                {\n                    height: '40%'\n                }, {\n                    height: '60%'\n                }\n            ],\n            axes: [{\n                    name: 'secondary',\n                    opposedPosition: true, rowIndex: 0,\n                    majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,\n                    majorTickLines: { width: 0 }, title: 'MACD', stripLines: [\n                        {\n                            start: -3.5, end: 3.5, text: '', color: 'black', visible: true,\n                            opacity: 0.03, zIndex: 'Behind'\n                        }\n                    ]\n                }],\n            series: [{\n                    dataSource: chartData, width: 2,\n                    xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n                    name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n                    type: 'Candle', animation: { enable: true }\n                }],\n            indicators: [{\n                    type: 'Macd',\n                    period: 3,\n                    fastPeriod: 8,\n                    slowPeriod: 5,\n                    seriesName: 'Apple Inc',\n                    macdType: 'Both',\n                    width: 2,\n                    macdPositiveColor: '#2ecd71',\n                    macdNegativeColor: '#e74c3d',\n                    fill: '#6063ff',\n                    yAxisName: 'secondary'\n                }],\n            zoomSettings: {\n                enableSelectionZooming: true,\n                enablePinchZooming: true,\n                mode: 'XY',\n                enablePan: true\n            },\n            tooltip: {\n                enable: true, shared: true\n            },\n            crosshair: { enable: true, lineType: 'Vertical' },\n            chartArea: { border: { width: 0 } },\n            title: 'AAPL 2012-2017',\n            width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n            legendSettings: { visible: false }\n        });\n        chart.appendTo('#macd-container');\n    };\n    \n        var chartData;\n        var ajax = new ej.base.Ajax('//npmci.syncfusion.com/production/demos/src/chart/data-source/financial-data.json', 'GET', true);\n        ajax.send().then();\n        ajax.onSuccess = function (data) {\n            chartData = JSON.parse(data);\n            chartData.map(function (data) {\n                data.x = new Date(data.x);\n            });\n            renderChart(chartData);\n        };\n    "}
--- a/src/chart/multi-level-label-stack.json
+++ b/src/chart/multi-level-label-stack.json
--- a/src/chart/multi-series-chart-stack.json
+++ b/src/chart/multi-series-chart-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/multi-series-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n    <div id=\"series-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://perspectives.pictet.com/2016/01/29/growth-accelerated-markedly-in-france-and-spain-in-2015/\" target=\"_blank\">perspectives.pictet.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Combination Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Years',\n            interval: 1,\n            labelIntersectAction: 'Rotate45',\n            valueType: 'Category',\n            majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Growth',\n            minimum: -3,\n            maximum: 3,\n            interval: 1,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }, majorGridLines: { width: 1 },\n            minorGridLines: { width: 1 }, minorTickLines: { width: 0 },\n            labelFormat: '{value}B',\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: 1 }, { x: '2008', y: 0.25 },\n                    { x: '2009', y: 0.1 }, { x: '2010', y: 1 },\n                    { x: '2011', y: 0.1 }, { x: '2012', y: -0.25 },\n                    { x: '2013', y: 0.25 }, { x: '2014', y: 0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Private Consumption',\n            }, {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: 0.5 }, { x: '2008', y: 0.35 },\n                    { x: '2009', y: 0.9 }, { x: '2010', y: 0.5 },\n                    { x: '2011', y: 0.25 }, { x: '2012', y: -0.5 },\n                    { x: '2013', y: 0.5 }, { x: '2014', y: 0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Government Consumption',\n            }, {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: 1.5 }, { x: '2008', y: 0.35 },\n                    { x: '2009', y: -2.7 }, { x: '2010', y: 0.5 },\n                    { x: '2011', y: 0.25 }, { x: '2012', y: -0.1 },\n                    { x: '2013', y: -0.3 }, { x: '2014', y: -0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Investment',\n            }, {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: -1 }, { x: '2008', y: -0.35 },\n                    { x: '2009', y: -0.3 }, { x: '2010', y: -0.5 },\n                    { x: '2011', y: 0 }, { x: '2012', y: -0.4 },\n                    { x: '2013', y: 0 }, { x: '2014', y: -0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Net Foreign Trade'\n            }, {\n                type: 'Line',\n                dataSource: [\n                    { x: '2007', y: 2 }, { x: '2008', y: 0.1 },\n                    { x: '2009', y: -2.7 }, { x: '2010', y: 1.8 },\n                    { x: '2011', y: 2 }, { x: '2012', y: 0.4 },\n                    { x: '2013', y: 0.9 }, { x: '2014', y: 0.4 }\n                ],\n                xName: 'x', yName: 'y', name: 'GDP',\n                width: 2,\n                marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Annual Growth GDP in France',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n\n    });\n    chart.appendTo('#series-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/multi-series-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n    <div id=\"series-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://perspectives.pictet.com/2016/01/29/growth-accelerated-markedly-in-france-and-spain-in-2015/\" target=\"_blank\">perspectives.pictet.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Combination Series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Years',\n            interval: 1,\n            labelIntersectAction: 'Rotate45',\n            valueType: 'Category',\n            majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Growth',\n            minimum: -3,\n            maximum: 3,\n            interval: 1,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }, majorGridLines: { width: 1 },\n            minorGridLines: { width: 1 }, minorTickLines: { width: 0 },\n            labelFormat: '{value}B',\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: 1 }, { x: '2008', y: 0.25 },\n                    { x: '2009', y: 0.1 }, { x: '2010', y: 1 },\n                    { x: '2011', y: 0.1 }, { x: '2012', y: -0.25 },\n                    { x: '2013', y: 0.25 }, { x: '2014', y: 0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Private Consumption',\n            }, {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: 0.5 }, { x: '2008', y: 0.35 },\n                    { x: '2009', y: 0.9 }, { x: '2010', y: 0.5 },\n                    { x: '2011', y: 0.25 }, { x: '2012', y: -0.5 },\n                    { x: '2013', y: 0.5 }, { x: '2014', y: 0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Government Consumption',\n            }, {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: 1.5 }, { x: '2008', y: 0.35 },\n                    { x: '2009', y: -2.7 }, { x: '2010', y: 0.5 },\n                    { x: '2011', y: 0.25 }, { x: '2012', y: -0.1 },\n                    { x: '2013', y: -0.3 }, { x: '2014', y: -0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Investment',\n            }, {\n                type: 'StackingColumn',\n                dataSource: [\n                    { x: '2007', y: -1 }, { x: '2008', y: -0.35 },\n                    { x: '2009', y: -0.3 }, { x: '2010', y: -0.5 },\n                    { x: '2011', y: 0 }, { x: '2012', y: -0.4 },\n                    { x: '2013', y: 0 }, { x: '2014', y: -0.6 }\n                ],\n                xName: 'x', yName: 'y', name: 'Net Foreign Trade'\n            }, {\n                type: 'Line',\n                dataSource: [\n                    { x: '2007', y: 2 }, { x: '2008', y: 0.1 },\n                    { x: '2009', y: -2.7 }, { x: '2010', y: 1.8 },\n                    { x: '2011', y: 2 }, { x: '2012', y: 0.4 },\n                    { x: '2013', y: 0.9 }, { x: '2014', y: 0.4 }\n                ],\n                xName: 'x', yName: 'y', name: 'GDP',\n                width: 2,\n                marker: {\n                    visible: true,\n                    width: 10,\n                    height: 10\n                },\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Annual Growth GDP in France',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n\n    });\n    chart.appendTo('#series-container');\n"}
--- a/src/chart/multiple-axis-stack.json
+++ b/src/chart/multiple-axis-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/multiple-axis/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"axes-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Multiple Axes\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            interval: 1,\n            labelIntersectAction: 'Rotate90',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            minimum: 0, maximum: 100, interval: 20,\n            lineStyle: { width: 0 },\n            labelFormat: '{value}°F'\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Axes\n        axes: [\n            {\n                majorGridLines: { width: 0 },\n                rowIndex: 0, opposedPosition: true,\n                lineStyle: { width: 0 }, minorTickLines: { width: 0 },\n                minimum: 24, maximum: 36, interval: 2,\n                name: 'yAxis',\n                labelFormat: '{value}°C',\n                majorTickLines: { width: 0 }\n            }\n        ],\n        //Initializing Chart Annotations\n        annotations: [{\n                content: '<div id=\"chart_cloud\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/chart/images/cloud.png\"  style=\"width: 41px; height: 41px\"/></div>',\n                x: 'Sun', y: 35, coordinateUnits: 'Point', verticalAlignment: 'Top'\n            }, {\n                content: '<div id=\"chart_cloud\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/chart/images/sunny.png\"  style=\"width: 41px; height: 41px\"/></div>',\n                x: 'Sat', y: 34, coordinateUnits: 'Point', yAxisName: 'yAxis'\n            }],\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 'Sun', y: 35 }, { x: 'Mon', y: 40 },\n                    { x: 'Tue', y: 80 }, { x: 'Wed', y: 70 }, { x: 'Thu', y: 65 }, { x: 'Fri', y: 55 },\n                    { x: 'Sat', y: 50 }\n                ],\n                width: 2,\n                xName: 'x', yName: 'y',\n                name: 'Germany',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: 'Sun', y: 30 }, { x: 'Mon', y: 28 },\n                    { x: 'Tue', y: 29 }, { x: 'Wed', y: 30 }, { x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },\n                    { x: 'Sat', y: 34 }\n                ],\n                xName: 'x', yName: 'y',\n                width: 2, yAxisName: 'yAxis',\n                name: 'Japan',\n                marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }\n            }\n        ],\n        legendSettings: {\n            visible: false\n        },\n        //Initializing tooltip\n        tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Weather Condition JPN vs DEU',\n\n    });\n    chart.appendTo('#axes-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/multiple-axis/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"axes-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Multiple Axes\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            interval: 1,\n            labelIntersectAction: 'Rotate90',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            minimum: 0, maximum: 100, interval: 20,\n            lineStyle: { width: 0 },\n            labelFormat: '{value}°F'\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Axes\n        axes: [\n            {\n                majorGridLines: { width: 0 },\n                rowIndex: 0, opposedPosition: true,\n                lineStyle: { width: 0 }, minorTickLines: { width: 0 },\n                minimum: 24, maximum: 36, interval: 2,\n                name: 'yAxis',\n                labelFormat: '{value}°C',\n                majorTickLines: { width: 0 }\n            }\n        ],\n        //Initializing Chart Annotations\n        annotations: [{\n                content: '<div id=\"chart_cloud\"><img src=\"//npmci.syncfusion.com/production/demos/src/chart/images/cloud.png\"  style=\"width: 41px; height: 41px\"/></div>',\n                x: 'Sun', y: 35, coordinateUnits: 'Point', verticalAlignment: 'Top'\n            }, {\n                content: '<div id=\"chart_cloud\"><img src=\"//npmci.syncfusion.com/production/demos/src/chart/images/sunny.png\"  style=\"width: 41px; height: 41px\"/></div>',\n                x: 'Sat', y: 34, coordinateUnits: 'Point', yAxisName: 'yAxis'\n            }],\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 'Sun', y: 35 }, { x: 'Mon', y: 40 },\n                    { x: 'Tue', y: 80 }, { x: 'Wed', y: 70 }, { x: 'Thu', y: 65 }, { x: 'Fri', y: 55 },\n                    { x: 'Sat', y: 50 }\n                ],\n                width: 2,\n                xName: 'x', yName: 'y',\n                name: 'Germany',\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: 'Sun', y: 30 }, { x: 'Mon', y: 28 },\n                    { x: 'Tue', y: 29 }, { x: 'Wed', y: 30 }, { x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },\n                    { x: 'Sat', y: 34 }\n                ],\n                xName: 'x', yName: 'y',\n                width: 2, yAxisName: 'yAxis',\n                name: 'Japan',\n                marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }\n            }\n        ],\n        legendSettings: {\n            visible: false\n        },\n        //Initializing tooltip\n        tooltip: { enable: true },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Weather Condition JPN vs DEU',\n\n    });\n    chart.appendTo('#axes-container');\n"}
--- a/src/chart/numeric-stack.json
+++ b/src/chart/numeric-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/numeric/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"numeric-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://www.espncricinfo.com/icc-world-twenty20-2016/engine/current/match/951373.html\" target=\"_blank\">www.espncricinfo.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n    if (args.axis.orientation === 'Horizontal') {\n        args.cancel = args.value === 15 || args.value === 21;\n    }\n};\n/**\n * Sample for Numerical Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Death Overs',\n            minimum: 15,\n            maximum: 21,\n            interval: 1,\n            majorGridLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        //Initializing Chart Sample\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 16, y: 2 }, { x: 17, y: 14 },\n                    { x: 18, y: 7 }, { x: 19, y: 7 },\n                    { x: 20, y: 10 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'England', fill: '#1e90ff',\n                marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600'\n                        }\n                    }\n                }\n            },\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 16, y: 7 }, { x: 17, y: 7 },\n                    { x: 18, y: 11 }, { x: 19, y: 8 },\n                    { x: 20, y: 24 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'West Indies', fill: '#b22222',\n                marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600'\n                        }\n                    }\n                }\n            }\n        ],\n        axisLabelRender: labelRender,\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n        //Initializing Chart Title\n        title: 'England vs West Indies', tooltip: { enable: true, format: '${point.x}th Over : <b>${point.y} Runs</b>' }\n    });\n    chart.appendTo('#numeric-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/numeric/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"numeric-container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://www.espncricinfo.com/icc-world-twenty20-2016/engine/current/match/951373.html\" target=\"_blank\">www.espncricinfo.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n    if (args.axis.orientation === 'Horizontal') {\n        args.cancel = args.value === 15 || args.value === 21;\n    }\n};\n/**\n * Sample for Numerical Axis\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Death Overs',\n            minimum: 15,\n            maximum: 21,\n            interval: 1,\n            majorGridLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n            labelStyle: {\n                color: 'transparent'\n            }\n        },\n        //Initializing Chart Sample\n        series: [\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 16, y: 2 }, { x: 17, y: 14 },\n                    { x: 18, y: 7 }, { x: 19, y: 7 },\n                    { x: 20, y: 10 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'England', fill: '#1e90ff',\n                marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600'\n                        }\n                    }\n                }\n            },\n            {\n                type: 'Column',\n                dataSource: [\n                    { x: 16, y: 7 }, { x: 17, y: 7 },\n                    { x: 18, y: 11 }, { x: 19, y: 8 },\n                    { x: 20, y: 24 }\n                ],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'West Indies', fill: '#b22222',\n                marker: {\n                    dataLabel: {\n                        visible: true,\n                        position: 'Top',\n                        font: {\n                            fontWeight: '600'\n                        }\n                    }\n                }\n            }\n        ],\n        axisLabelRender: labelRender,\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n        //Initializing Chart Title\n        title: 'England vs West Indies', tooltip: { enable: true, format: '${point.x}th Over : <b>${point.y} Runs</b>' }\n    });\n    chart.appendTo('#numeric-container');\n"}
--- a/src/chart/numeric.html
+++ b/src/chart/numeric.html
@ -6,12 +6,12 @@
 </div>
 <div id="action-description">
    <p>
-        This sample demonstrates the rendering of numeric axis in the chart with England and West indies cricket match data.
+        This sample demonstrates the rendering of <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-axis">numeric axis</a> in the chart with England and West indies cricket match data.
    </p>
 </div>
 <div id="description">
   <p>
-        Numeric axis is used to plot numeric data in chart. To render numeric axis, set <code>valueType</code> in axis to <code>Double</code>.
+        <a href="https://ej2.syncfusion.com/documentation/chart/numeric-axis/">Numeric axis</a> is used to plot numeric data in chart. To render numeric axis, set <code>valueType</code> in axis to <code>Double</code>.
    </p>
    <p>
        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
--- a/src/chart/pareto-stack.json
+++ b/src/chart/pareto-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/pareto/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Pareto chart\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Defects',\n            interval: 1,\n            valueType: 'Category',\n            majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'Frequency',\n            minimum: 0,\n            maximum: 150,\n            interval: 30,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }, majorGridLines: { width: 1 },\n            minorGridLines: { width: 1 }, minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Pareto',\n                dataSource: [\n                    { x: 'Traffic', y: 56 }, { x: 'Child Care', y: 44.8 },\n                    { x: 'Transport', y: 27.2 }, { x: 'Weather', y: 19.6 },\n                    { x: 'Emergency', y: 6.6 }\n                ], marker: { visible: true, width: 10, height: 10 },\n                xName: 'x', yName: 'y', name: 'Defect', width: 2\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Defect vs Frequency',\n        legendSettings: { visible: false },\n        //Initializing Tooltip\n        tooltip: {\n            enable: true,\n            shared: true\n        },\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/pareto/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Pareto chart\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Defects',\n            interval: 1,\n            valueType: 'Category',\n            majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n        },\n        //Initializing Primary X Axis\n        primaryYAxis: {\n            title: 'Frequency',\n            minimum: 0,\n            maximum: 150,\n            interval: 30,\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }, majorGridLines: { width: 1 },\n            minorGridLines: { width: 1 }, minorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Pareto',\n                dataSource: [\n                    { x: 'Traffic', y: 56 }, { x: 'Child Care', y: 44.8 },\n                    { x: 'Transport', y: 27.2 }, { x: 'Weather', y: 19.6 },\n                    { x: 'Emergency', y: 6.6 }\n                ], marker: { visible: true, width: 10, height: 10 },\n                xName: 'x', yName: 'y', name: 'Defect', width: 2\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Defect vs Frequency',\n        legendSettings: { visible: false },\n        //Initializing Tooltip\n        tooltip: {\n            enable: true,\n            shared: true\n        },\n\n    });\n    chart.appendTo('#container');\n"}
--- a/src/chart/pie-annotation-stack.json
+++ b/src/chart/pie-annotation-stack.json
--- a/src/chart/pie-empty-point-stack.json
+++ b/src/chart/pie-empty-point-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/pie-empty-point/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-8 control-section\">\n        <div id=\"pie-empty-container\"></div>\n    </div>\n    <div class=\"col-lg-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Empty Point Mode:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"emptypointmode\">\t\t\t\t \n                                                    <option>Drop</option>\n                                                    <option>Average</option>\n                                                    <option>Zero</option>\n                                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Empty Points in Pie Chart\n */\n\n    var chart = new ej.charts.AccumulationChart({\n        //Initializing Series\n        series: [\n            {\n                xName: 'x', yName: 'y', name: 'Profit',\n                type: 'Pie',\n                dataSource: [{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, { x: 'Oil', y: 70 },\n                    { x: 'Corn', y: 60 }, { x: 'Gram', y: null },\n                    { x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },\n                    { x: 'Fruit', y: 60 }, { x: 'Butter', y: null }],\n                dataLabel: {\n                    visible: true, position: 'Inside', font: {\n                        fontWeight: '600',\n                        color: '#ffffff'\n                    }\n                },\n                emptyPointSettings: {\n                    fill: '#e6e6e6',\n                }\n            },\n        ],\n        //Initializing Title\n        title: 'Annual Product-Wise Profit Analysis',\n        legendSettings: { visible: false },\n        //Initializing Tooltip\n        tooltip: { enable: true, header: 'Profit', format: '${point.x} : <b>${point.y}</b>' },\n\n    });\n    chart.appendTo('#pie-empty-container');\n    var mode = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].emptyPointSettings.mode = mode.value;\n            chart.refresh();\n        }\n    });\n    mode.appendTo('#emptypointmode');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/pie-empty-point/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-8 control-section\">\n        <div id=\"pie-empty-container\"></div>\n    </div>\n    <div class=\"col-lg-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Empty Point Mode:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"emptypointmode\">\t\t\t\t \n                                                    <option>Drop</option>\n                                                    <option>Average</option>\n                                                    <option>Zero</option>\n                                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Empty Points in Pie Chart\n */\n\n    var chart = new ej.charts.AccumulationChart({\n        //Initializing Series\n        series: [\n            {\n                xName: 'x', yName: 'y', name: 'Profit',\n                type: 'Pie',\n                dataSource: [{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, { x: 'Oil', y: 70 },\n                    { x: 'Corn', y: 60 }, { x: 'Gram', y: null },\n                    { x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },\n                    { x: 'Fruit', y: 60 }, { x: 'Butter', y: null }],\n                dataLabel: {\n                    visible: true, position: 'Inside', font: {\n                        fontWeight: '600',\n                        color: '#ffffff'\n                    }\n                },\n                emptyPointSettings: {\n                    fill: '#e6e6e6',\n                }\n            },\n        ],\n        //Initializing Title\n        title: 'Annual Product-Wise Profit Analysis',\n        legendSettings: { visible: false },\n        //Initializing Tooltip\n        tooltip: { enable: true, header: 'Profit', format: '${point.x} : <b>${point.y}</b>' },\n\n    });\n    chart.appendTo('#pie-empty-container');\n    var mode = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].emptyPointSettings.mode = mode.value;\n            chart.refresh();\n        }\n    });\n    mode.appendTo('#emptypointmode');\n"}
--- a/src/chart/pie-radius-stack.json
+++ b/src/chart/pie-radius-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/pie-radius/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"pieradius-container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for Pie with Various Radius\n */\n\n    var pie = new ej.charts.AccumulationChart({\n        enableSmartLabels: true,\n        //Initializing Series\n        series: [\n            {\n                dataSource: [\n                    { x: 'Argentina', y: 505370, r: '100' },\n                    { x: 'Belgium', y: 551500, r: '118.7' },\n                    { x: 'Cuba', y: 312685, r: '124.6' },\n                    { x: 'Dominican Republic', y: 350000, r: '137.5' },\n                    { x: 'Egypt', y: 301000, r: '150.8' },\n                    { x: 'Kazakhstan', y: 300000, r: '155.5' },\n                    { x: 'Somalia', y: 357022, r: '160.6' }\n                ],\n                xName: 'x',\n                yName: 'y',\n                radius: 'r',\n                innerRadius: '20%',\n                dataLabel: {\n                    visible: true, position: 'Outside', name: 'x'\n                },\n            }\n        ],\n        //Initializing Legend\n        legendSettings: {\n            visible: true\n        },\n        enableAnimation: true,\n        tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },\n\n    });\n    pie.appendTo('#pieradius-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/pie-radius/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"pieradius-container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for Pie with Various Radius\n */\n\n    var pie = new ej.charts.AccumulationChart({\n        enableSmartLabels: true,\n        //Initializing Series\n        series: [\n            {\n                dataSource: [\n                    { x: 'Argentina', y: 505370, r: '100' },\n                    { x: 'Belgium', y: 551500, r: '118.7' },\n                    { x: 'Cuba', y: 312685, r: '124.6' },\n                    { x: 'Dominican Republic', y: 350000, r: '137.5' },\n                    { x: 'Egypt', y: 301000, r: '150.8' },\n                    { x: 'Kazakhstan', y: 300000, r: '155.5' },\n                    { x: 'Somalia', y: 357022, r: '160.6' }\n                ],\n                xName: 'x',\n                yName: 'y',\n                radius: 'r',\n                innerRadius: '20%',\n                dataLabel: {\n                    visible: true, position: 'Outside', name: 'x'\n                },\n            }\n        ],\n        //Initializing Legend\n        legendSettings: {\n            visible: true\n        },\n        enableAnimation: true,\n        tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },\n\n    });\n    pie.appendTo('#pieradius-container');\n"}
--- a/src/chart/pie-radius.js
+++ b/src/chart/pie-radius.js
@ -8,13 +8,13 @@ this.default = function () {
        series: [
            {
                dataSource: [
-                    { x: 'Argentina', y: 505370, r: '100' },
-                    { x: 'Belgium', y: 551500, r: '118.7' },
-                    { x: 'Cuba', y: 312685, r: '124.6' },
-                    { x: 'Dominican Republic', y: 350000, r: '137.5' },
-                    { x: 'Egypt', y: 301000, r: '150.8' },
-                    { x: 'Kazakhstan', y: 300000, r: '155.5' },
-                    { x: 'Somalia', y: 357022, r: '160.6' }
+                    { x: 'Argentina', y: 505370, r: '50%' },
+                    { x: 'Belgium', y: 551500, r: '70%' },
+                    { x: 'Cuba', y: 312685, r: '84%' },
+                    { x: 'Dominican Republic', y: 350000, r: '97%' },
+                    { x: 'Egypt', y: 301000, r: '84%' },
+                    { x: 'Kazakhstan', y: 300000, r: '70%' },
+                    { x: 'Somalia', y: 357022, r: '90%' }
                ],
                xName: 'x',
                yName: 'y',
@ -31,15 +31,15 @@ this.default = function () {
        },
        enableAnimation: true,
        tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },
-           // custom code start
+        // custom code start
        load: function (args) {
            var selectedTheme = location.hash.split('/')[1];
            selectedTheme = selectedTheme ? selectedTheme : 'Material';
-            args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + 
-                selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
+            args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() +
+                selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
            args.accumulation.legendSettings.position = ej.base.Browser.isDevice ? 'Bottom' : 'Right';
        }
-           // custom code end
+        // custom code end
    });
    pie.appendTo('#pieradius-container');
 };
--- a/src/chart/polar-area-stack.json
+++ b/src/chart/polar-area-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/polar-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polar-area-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SelectSeriesType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Area \n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            labelPlacement: 'OnTicks',\n            interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Revenue in Millions',\n            labelFormat: '{value}M'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'Area',\n                dataSource: [{ x: '2000', y: 4 }, { x: '2001', y: 3.0 },\n                    { x: '2002', y: 3.8 }, { x: '2003', y: 3.4 },\n                    { x: '2004', y: 3.2 }, { x: '2005', y: 3.9 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product A',\n                border: { color: 'transparent' },\n                opacity: 0.5,\n            },\n            {\n                type: 'Polar', drawType: 'Area',\n                dataSource: [{ x: '2000', y: 2.6 }, { x: '2001', y: 2.8 },\n                    { x: '2002', y: 2.6 }, { x: '2003', y: 3 },\n                    { x: '2004', y: 3.6 }, { x: '2005', y: 3 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product B',\n                opacity: 0.5,\n                border: { color: 'transparent' },\n            },\n            {\n                type: 'Polar', drawType: 'Area',\n                dataSource: [{ x: '2000', y: 2.8 }, { x: '2001', y: 2.5 },\n                    { x: '2002', y: 2.8 }, { x: '2003', y: 3.2 },\n                    { x: '2004', y: 2.9 }, { x: '2005', y: 2 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product C',\n                opacity: 0.5,\n                border: { color: 'transparent' },\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Average Sales Comparison',\n\n    });\n    chart.appendTo('#polar-area-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#SelectSeriesType');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/polar-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polar-area-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SelectSeriesType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Area \n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            labelPlacement: 'OnTicks',\n            interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Revenue in Millions',\n            labelFormat: '{value}M'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'Area',\n                dataSource: [{ x: '2000', y: 4 }, { x: '2001', y: 3.0 },\n                    { x: '2002', y: 3.8 }, { x: '2003', y: 3.4 },\n                    { x: '2004', y: 3.2 }, { x: '2005', y: 3.9 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product A',\n                border: { color: 'transparent' },\n                opacity: 0.5,\n            },\n            {\n                type: 'Polar', drawType: 'Area',\n                dataSource: [{ x: '2000', y: 2.6 }, { x: '2001', y: 2.8 },\n                    { x: '2002', y: 2.6 }, { x: '2003', y: 3 },\n                    { x: '2004', y: 3.6 }, { x: '2005', y: 3 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product B',\n                opacity: 0.5,\n                border: { color: 'transparent' },\n            },\n            {\n                type: 'Polar', drawType: 'Area',\n                dataSource: [{ x: '2000', y: 2.8 }, { x: '2001', y: 2.5 },\n                    { x: '2002', y: 2.8 }, { x: '2003', y: 3.2 },\n                    { x: '2004', y: 2.9 }, { x: '2005', y: 2 }],\n                xName: 'x', width: 2,\n                yName: 'y', name: 'Product C',\n                opacity: 0.5,\n                border: { color: 'transparent' },\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Average Sales Comparison',\n\n    });\n    chart.appendTo('#polar-area-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#SelectSeriesType');\n"}
--- a/src/chart/polar-column-stack.json
+++ b/src/chart/polar-column-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/polar-column/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polar-column-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SeriesType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Column\n */\n\n    var data = [\n        { text: 'Japan', x: 'JPN', y: 137.9, y1: 127.6, y2: 108.8 },\n        { text: 'Indonesia', x: 'IDN', y: 85.0, y1: 246.9, y2: 45.5 },\n        { text: 'Russia', x: 'RUS', y: 237.1, y1: 143.5, y2: 41.2 },\n        { text: 'Vietnam', x: 'VNM', y: 127.7, y1: 88.8, y2: 18.0 },\n        { text: 'Pakistan', x: 'PAK', y: 126.1, y1: 179.2, y2: null },\n        { text: 'Nigeria', x: 'NGA', y: 175.0, y1: 168.8, y2: 12.7 },\n        { text: 'Germany', x: 'DEU', y: 113.6, y1: 81.9, y2: 46.0 },\n        { text: 'Bangladesh', x: 'BGS', y: 116.0, y1: 154.7, y2: 34.6 },\n        { text: 'Philippines', x: 'PHL', y: 109.5, y1: 96.7, y2: 16.6 },\n        { text: 'Mexico', x: 'MEX', y: 102.7, y1: 120.8, y2: 19.8 }\n    ];\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            labelPlacement: 'OnTicks', interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}M'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'Column', dataSource: data,\n                animation: { enable: true }, border: { width: 1, color: 'white' },\n                xName: 'x', yName: 'y', name: 'Mobile Subscriptions',\n                marker: { dataLabel: { name: 'text' } }\n            },\n            {\n                type: 'Polar', drawType: 'Column', dataSource: data,\n                animation: { enable: true }, border: { width: 1, color: 'white' },\n                xName: 'x', yName: 'y1', name: 'Population in Millions',\n                marker: { dataLabel: { name: 'text' } }\n            },\n            {\n                type: 'Polar', drawType: 'Column', dataSource: data,\n                animation: { enable: true }, border: { width: 1, color: 'white' },\n                xName: 'x', yName: 'y2', name: '3G/4G Subscriptions',\n                marker: { dataLabel: { name: 'text' } }\n            },\n        ],\n        //Initializing Chart Title\n        title: 'Top 10 Mobile Markets by Number of Subscriptions',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true,\n            format: '${point.text} : <b>${point.y}%</b>'\n        },\n\n    });\n    chart.appendTo('#polar-column-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#SeriesType');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/polar-column/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polar-column-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SeriesType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Column\n */\n\n    var data = [\n        { text: 'Japan', x: 'JPN', y: 137.9, y1: 127.6, y2: 108.8 },\n        { text: 'Indonesia', x: 'IDN', y: 85.0, y1: 246.9, y2: 45.5 },\n        { text: 'Russia', x: 'RUS', y: 237.1, y1: 143.5, y2: 41.2 },\n        { text: 'Vietnam', x: 'VNM', y: 127.7, y1: 88.8, y2: 18.0 },\n        { text: 'Pakistan', x: 'PAK', y: 126.1, y1: 179.2, y2: null },\n        { text: 'Nigeria', x: 'NGA', y: 175.0, y1: 168.8, y2: 12.7 },\n        { text: 'Germany', x: 'DEU', y: 113.6, y1: 81.9, y2: 46.0 },\n        { text: 'Bangladesh', x: 'BGS', y: 116.0, y1: 154.7, y2: 34.6 },\n        { text: 'Philippines', x: 'PHL', y: 109.5, y1: 96.7, y2: 16.6 },\n        { text: 'Mexico', x: 'MEX', y: 102.7, y1: 120.8, y2: 19.8 }\n    ];\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            labelPlacement: 'OnTicks', interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}M'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'Column', dataSource: data,\n                animation: { enable: true }, border: { width: 1, color: 'white' },\n                xName: 'x', yName: 'y', name: 'Mobile Subscriptions',\n                marker: { dataLabel: { name: 'text' } }\n            },\n            {\n                type: 'Polar', drawType: 'Column', dataSource: data,\n                animation: { enable: true }, border: { width: 1, color: 'white' },\n                xName: 'x', yName: 'y1', name: 'Population in Millions',\n                marker: { dataLabel: { name: 'text' } }\n            },\n            {\n                type: 'Polar', drawType: 'Column', dataSource: data,\n                animation: { enable: true }, border: { width: 1, color: 'white' },\n                xName: 'x', yName: 'y2', name: '3G/4G Subscriptions',\n                marker: { dataLabel: { name: 'text' } }\n            },\n        ],\n        //Initializing Chart Title\n        title: 'Top 10 Mobile Markets by Number of Subscriptions',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true,\n            format: '${point.text} : <b>${point.y}%</b>'\n        },\n\n    });\n    chart.appendTo('#polar-column-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#SeriesType');\n"}
--- a/src/chart/polar-line-stack.json
+++ b/src/chart/polar-line-stack.json
--- a/src/chart/polar-range-column-stack.json
+++ b/src/chart/polar-range-column-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/polar-range-column/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-8 control-section\">\n        <div id=\"polar-range-container\"></div>\n    </div>\n    <div class=\"col-lg-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SelectType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType RangeColumn\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            title: 'Months',\n            labelPlacement: 'OnTicks',\n            startAngle: 90, interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}˚C',\n            minimum: 0, maximum: 15, interval: 5\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'RangeColumn', name: 'Germany', xName: 'x', high: 'high', low: 'low',\n                dataSource: [\n                    { x: 'Jan', low: 2, high: 7 }, { x: 'Feb', low: 3, high: 7 },\n                    { x: 'Mar', low: 3, high: 7 }, { x: 'Apr', low: 4, high: 9 },\n                    { x: 'May', low: 6, high: 11 }, { x: 'June', low: 8, high: 14 },\n                ],\n                border: { width: 3, color: 'white' },\n                marker: {\n                    dataLabel: { \n                        visible: true,\n                        position: 'Top',\n                        font: { color: '#ffffff', fontWeight: '600'},\n                        enableRotation: true\n                    }\n                }\n            },\n        ],\n        textRender: function (args) {\n            args.text = args.text.replace('˚C', '');\n        },\n        legendSettings: { visible: false },\n        //Initializing Chart Title\n        title: 'Maximum and Minimum Temperature',\n\n    });\n    chart.appendTo('#polar-range-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#SelectType');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/polar-range-column/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-8 control-section\">\n        <div id=\"polar-range-container\"></div>\n    </div>\n    <div class=\"col-lg-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"SelectType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType RangeColumn\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            title: 'Months',\n            labelPlacement: 'OnTicks',\n            startAngle: 90, interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}˚C',\n            minimum: 0, maximum: 15, interval: 5\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'RangeColumn', name: 'Germany', xName: 'x', high: 'high', low: 'low',\n                dataSource: [\n                    { x: 'Jan', low: 2, high: 7 }, { x: 'Feb', low: 3, high: 7 },\n                    { x: 'Mar', low: 3, high: 7 }, { x: 'Apr', low: 4, high: 9 },\n                    { x: 'May', low: 6, high: 11 }, { x: 'June', low: 8, high: 14 },\n                ],\n                border: { width: 3, color: 'white' },\n                marker: {\n                    dataLabel: { \n                        visible: true,\n                        position: 'Top',\n                        font: { color: '#ffffff', fontWeight: '600'},\n                        enableRotation: true\n                    }\n                }\n            },\n        ],\n        textRender: function (args) {\n            args.text = args.text.replace('˚C', '');\n        },\n        legendSettings: { visible: false },\n        //Initializing Chart Title\n        title: 'Maximum and Minimum Temperature',\n\n    });\n    chart.appendTo('#polar-range-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#SelectType');\n"}
--- a/src/chart/polar-scatter-stack.json
+++ b/src/chart/polar-scatter-stack.json
--- a/src/chart/polar-spline-stack.json
+++ b/src/chart/polar-spline-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/polar-spline/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polar-spline-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"seriestype\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Spline\n */\n\n    var cardData = [];\n    var biDirData = [];\n    var omniDirData = [];\n    var point1;\n    var point2;\n    for (var x = -180; x < 180; x++) {\n        point1 = { x: x, y: -12.6 * (1 - Math.cos(x * 3.14 / 180)) };\n        cardData.push(point1);\n        point2 = { x: x, y: -3 };\n        omniDirData.push(point2);\n    }\n    for (var x1 = -180; x1 < -90; x1++) {\n        point1 = { x: x1, y: -26 * (1 + Math.cos(x1 * 3.14 / 180)) };\n        biDirData.push(point1);\n    }\n    for (var x2 = -90; x2 < 90; x2++) {\n        point1 = { x: x2, y: -26 * (1 - Math.cos(x2 * 3.14 / 180)) };\n        biDirData.push(point1);\n    }\n    for (var x3 = 90; x3 < 180; x3++) {\n        point1 = { x: x3, y: -26 * (1 + Math.cos(x3 * 3.14 / 180)) };\n        biDirData.push(point1);\n    }\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            minimum: -180,\n            maximum: 180,\n            interval: 30,\n            labelFormat: '{value}°',\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'Spline', dataSource: cardData,\n                animation: { enable: true }, width: 2, isClosed: false,\n                xName: 'x', yName: 'y', name: 'Cardioid (unidirectional)', dashArray: '5 5 2'\n            },\n            {\n                type: 'Polar', drawType: 'Spline', dataSource: omniDirData,\n                animation: { enable: true }, dashArray: '2', width: 2,\n                xName: 'x', yName: 'y', name: 'Omnidirectional', isClosed: false\n            },\n            {\n                type: 'Polar', drawType: 'Spline', dataSource: biDirData,\n                animation: { enable: true }, width: 2, isClosed: false,\n                xName: 'x', yName: 'y', name: 'Bidirectional'\n            },\n        ],\n        //Initializing Chart Title\n        title: 'Microphone Types Polar Patterns',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n\n    });\n    chart.appendTo('#polar-spline-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#seriestype');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/polar-spline/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polar-spline-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"seriestype\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Spline\n */\n\n    var cardData = [];\n    var biDirData = [];\n    var omniDirData = [];\n    var point1;\n    var point2;\n    for (var x = -180; x < 180; x++) {\n        point1 = { x: x, y: -12.6 * (1 - Math.cos(x * 3.14 / 180)) };\n        cardData.push(point1);\n        point2 = { x: x, y: -3 };\n        omniDirData.push(point2);\n    }\n    for (var x1 = -180; x1 < -90; x1++) {\n        point1 = { x: x1, y: -26 * (1 + Math.cos(x1 * 3.14 / 180)) };\n        biDirData.push(point1);\n    }\n    for (var x2 = -90; x2 < 90; x2++) {\n        point1 = { x: x2, y: -26 * (1 - Math.cos(x2 * 3.14 / 180)) };\n        biDirData.push(point1);\n    }\n    for (var x3 = 90; x3 < 180; x3++) {\n        point1 = { x: x3, y: -26 * (1 + Math.cos(x3 * 3.14 / 180)) };\n        biDirData.push(point1);\n    }\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            minimum: -180,\n            maximum: 180,\n            interval: 30,\n            labelFormat: '{value}°',\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'Spline', dataSource: cardData,\n                animation: { enable: true }, width: 2, isClosed: false,\n                xName: 'x', yName: 'y', name: 'Cardioid (unidirectional)', dashArray: '5 5 2'\n            },\n            {\n                type: 'Polar', drawType: 'Spline', dataSource: omniDirData,\n                animation: { enable: true }, dashArray: '2', width: 2,\n                xName: 'x', yName: 'y', name: 'Omnidirectional', isClosed: false\n            },\n            {\n                type: 'Polar', drawType: 'Spline', dataSource: biDirData,\n                animation: { enable: true }, width: 2, isClosed: false,\n                xName: 'x', yName: 'y', name: 'Bidirectional'\n            },\n        ],\n        //Initializing Chart Title\n        title: 'Microphone Types Polar Patterns',\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n\n    });\n    chart.appendTo('#polar-spline-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#seriestype');\n"}
--- a/src/chart/polar-stacking-area-stack.json
+++ b/src/chart/polar-stacking-area-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/polar-stacking-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polarStack-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"seriesType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType StackingArea\n */\n\n    var data = [\n        { x: 'JPN', text: 'Japan', y: 5156, y1: 4849, y2: 4382, y3: 4939 },\n        { x: 'DEU', text: 'Germany', y: 3754, y1: 3885, y2: 3365, y3: 3467 },\n        { x: 'FRA', text: 'France', y: 2809, y1: 2844, y2: 2420, y3: 2463 },\n        { x: 'GBR', text: 'UK', y: 2721, y1: 3002, y2: 2863, y3: 2629 },\n        { x: 'BRA', text: 'Brazil', y: 2472, y1: 2456, y2: 1801, y3: 1799 },\n        { x: 'RUS', text: 'Russia', y: 2231, y1: 2064, y2: 1366, y3: 1281 },\n        { x: 'ITA', text: 'Italy', y: 2131, y1: 2155, y2: 1826, y3: 1851 },\n        { x: 'IND', text: 'India', y: 1857, y1: 2034, y2: 2088, y3: 2256 },\n        { x: 'CAN', text: 'Canada', y: 1843, y1: 1793, y2: 1553, y3: 1529 }\n    ];\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            labelPlacement: 'OnTicks',\n            interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y', name: '2013'\n            },\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y1', name: '2014'\n            },\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y2', name: '2015'\n            },\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y3', name: '2016'\n            },\n        ],\n        //Initializing Chart Title\n        title: 'GDP, Current Prices (in Billions)',\n        legendSettings: {\n            visible: true\n        },\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n\n    });\n    chart.appendTo('#polarStack-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[3].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.series[3].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#seriesType');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/polar-stacking-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div id=\"polarStack-container\"></div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 50%\">\n                    <div>Series Type:\n                    </div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"seriesType\">\t\t\t\t \n                                    <option>Polar</option>\n                                    <option>Radar</option>\n                                </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType StackingArea\n */\n\n    var data = [\n        { x: 'JPN', text: 'Japan', y: 5156, y1: 4849, y2: 4382, y3: 4939 },\n        { x: 'DEU', text: 'Germany', y: 3754, y1: 3885, y2: 3365, y3: 3467 },\n        { x: 'FRA', text: 'France', y: 2809, y1: 2844, y2: 2420, y3: 2463 },\n        { x: 'GBR', text: 'UK', y: 2721, y1: 3002, y2: 2863, y3: 2629 },\n        { x: 'BRA', text: 'Brazil', y: 2472, y1: 2456, y2: 1801, y3: 1799 },\n        { x: 'RUS', text: 'Russia', y: 2231, y1: 2064, y2: 1366, y3: 1281 },\n        { x: 'ITA', text: 'Italy', y: 2131, y1: 2155, y2: 1826, y3: 1851 },\n        { x: 'IND', text: 'India', y: 1857, y1: 2034, y2: 2088, y3: 2256 },\n        { x: 'CAN', text: 'Canada', y: 1843, y1: 1793, y2: 1553, y3: 1529 }\n    ];\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            labelPlacement: 'OnTicks',\n            interval: 1,\n            coefficient: ej.base.Browser.isDevice ? 80 : 100\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y', name: '2013'\n            },\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y1', name: '2014'\n            },\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y2', name: '2015'\n            },\n            {\n                type: 'Polar', drawType: 'StackingArea', dataSource: data,\n                animation: { enable: true },\n                xName: 'x', yName: 'y3', name: '2016'\n            },\n        ],\n        //Initializing Chart Title\n        title: 'GDP, Current Prices (in Billions)',\n        legendSettings: {\n            visible: true\n        },\n        //Initializing Tooltip\n        tooltip: {\n            enable: true\n        },\n\n    });\n    chart.appendTo('#polarStack-container');\n    var polarType = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select Range Bar Color',\n        width: 120,\n        change: function () {\n            chart.series[0].type = polarType.value;\n            chart.series[1].type = polarType.value;\n            chart.series[2].type = polarType.value;\n            chart.series[3].type = polarType.value;\n            chart.series[0].animation.enable = true;\n            chart.series[1].animation.enable = true;\n            chart.series[2].animation.enable = true;\n            chart.series[3].animation.enable = true;\n            chart.refresh();\n        }\n    });\n    polarType.appendTo('#seriesType');\n"}
--- a/src/chart/polar-stacking-column-stack.json
+++ b/src/chart/polar-stacking-column-stack.json
--- a/src/chart/print-stack.json
+++ b/src/chart/print-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/print/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"print-container\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr id=\"button-control\" style=\"height: 50px\">\n                <td align=\"center\">\n                    <div> \n                        <button id=\"togglebtn\">Print</button>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n     #button-control {\n        width: 100%;\n        text-align: center;\n    }\n    #control-container {\n        padding: 0px !important;\n    }\n    .e-play-icon::before {\n        content: '\\e34b';\n    }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n    var selectedTheme = location.hash.split('/')[1];\n    selectedTheme = selectedTheme ? selectedTheme : 'Material';\n    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n        '#ea7a57', '#404041', '#00bdae'];\n    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n    var highcontrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n        '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n        args.fill = fabricColors[args.point.index];\n    }\n    else if (selectedTheme === 'material') {\n        args.fill = materialColors[args.point.index];\n    }\n    else if (selectedTheme === 'highcontrast'){\n        args.fill = highcontrastColors[args.point.index];\n    }\n    else {\n        args.fill = bootstrapColors[args.point.index % 10];\n    }\n};\n/**\n * Sample for chart print\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Manager',\n            valueType: 'Category',\n            majorGridLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        pointRender: labelRender,\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Sales',\n            minimum: 0,\n            maximum: 20000,\n            majorGridLines: { width: 0 }\n        },\n        chartMouseClick: function (args) {\n            if (args.target.indexOf('print') > -1) {\n                chart.print();\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [{ x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },\n                { x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }],\n                xName: 'x', width: 2,\n                yName: 'y'\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Sales Comparision',\n\n    });\n    chart.appendTo('#print-container');\n    var togglebtn = new ej.buttons.Button({\n        iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n    });\n    togglebtn.appendTo('#togglebtn');\n    document.getElementById('togglebtn').onclick = function () {\n        chart.print();\n    };\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/print/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n    <div class=\"col-lg-9 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"print-container\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr id=\"button-control\" style=\"height: 50px\">\n                <td align=\"center\">\n                    <div> \n                        <button id=\"togglebtn\">Print</button>\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n<style>\n     #button-control {\n        width: 100%;\n        text-align: center;\n    }\n    #control-container {\n        padding: 0px !important;\n    }\n    .e-play-icon::before {\n        content: '\\e34b';\n    }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n    var selectedTheme = location.hash.split('/')[1];\n    selectedTheme = selectedTheme ? selectedTheme : 'Material';\n    var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n        '#ea7a57', '#404041', '#00bdae'];\n    var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n        '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n    var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n        '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n    var highcontrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n        '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n    if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n        args.fill = fabricColors[args.point.index];\n    }\n    else if (selectedTheme === 'material') {\n        args.fill = materialColors[args.point.index];\n    }\n    else if (selectedTheme === 'highcontrast'){\n        args.fill = highcontrastColors[args.point.index];\n    }\n    else {\n        args.fill = bootstrapColors[args.point.index % 10];\n    }\n};\n/**\n * Sample for chart print\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Manager',\n            valueType: 'Category',\n            majorGridLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        pointRender: labelRender,\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            title: 'Sales',\n            minimum: 0,\n            maximum: 20000,\n            majorGridLines: { width: 0 }\n        },\n        chartMouseClick: function (args) {\n            if (args.target.indexOf('print') > -1) {\n                chart.print();\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Column',\n                dataSource: [{ x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },\n                { x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }],\n                xName: 'x', width: 2,\n                yName: 'y'\n            }\n        ],\n        //Initializing Chart Title\n        title: 'Sales Comparision',\n\n    });\n    chart.appendTo('#print-container');\n    var togglebtn = new ej.buttons.Button({\n        iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n    });\n    togglebtn.appendTo('#togglebtn');\n    document.getElementById('togglebtn').onclick = function () {\n        chart.print();\n    };\n"}
--- a/src/chart/pyramid-stack.json
+++ b/src/chart/pyramid-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/pyramid/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"pyramid-container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Samples for Pyramid chart\n */\n\n    var data = [{ x: 'Sweet Treats', y: 120, text: '120 cal' },\n        { x: 'Milk, Youghnut, Cheese', y: 435, text: '435 cal' },\n        { x: 'Vegetables', y: 470, text: '470 cal' },\n        { x: 'Meat, Poultry, Fish', y: 475, text: '475 cal' },\n        { x: 'Fruits', y: 520, text: '520 cal' },\n        { x: 'Bread, Rice, Pasta', y: 930, text: '930 cal' }];\n    var chart = new ej.charts.AccumulationChart({\n        //Initializing Series\n        series: [{\n                type: 'Pyramid', dataSource: data, xName: 'x', yName: 'y', width: '45%', height: '80%',\n                neckWidth: '15%', gapRatio: 0.03,\n                dataLabel: {\n                    name: 'text', visible: true, position: 'Inside', font: {\n                        fontWeight: '600'\n                    }\n                }, explode: true, emptyPointSettings: { mode: 'Drop', fill: 'red' }, name: 'Food'\n            }],\n        legendSettings: {\n            visible: false\n        },\n        tooltip: { enable: true, header: 'Food', format: '${point.x} : <b>${point.y} cal</b>' },\n        textRender: function (args) {\n            args.text = args.text;\n        },\n\n        resized: function (args) {\n            var bounds = document.getElementById('pyramid-container').getBoundingClientRect();\n            if (bounds.width < bounds.height) {\n                args.accumulation.series[0].width = '80%';\n                args.accumulation.series[0].height = '60%';\n            }\n            else {\n                args.accumulation.series[0].width = '45%';\n                args.accumulation.series[0].height = '80%';\n            }\n        },\n        //Initializing Chart Title\n        title: 'Food Comparison Chart',\n    });\n    chart.appendTo('#pyramid-container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/pyramid/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"pyramid-container\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Samples for Pyramid chart\n */\n\n    var data = [{ x: 'Sweet Treats', y: 120, text: '120 cal' },\n        { x: 'Milk, Youghnut, Cheese', y: 435, text: '435 cal' },\n        { x: 'Vegetables', y: 470, text: '470 cal' },\n        { x: 'Meat, Poultry, Fish', y: 475, text: '475 cal' },\n        { x: 'Fruits', y: 520, text: '520 cal' },\n        { x: 'Bread, Rice, Pasta', y: 930, text: '930 cal' }];\n    var chart = new ej.charts.AccumulationChart({\n        //Initializing Series\n        series: [{\n                type: 'Pyramid', dataSource: data, xName: 'x', yName: 'y', width: '45%', height: '80%',\n                neckWidth: '15%', gapRatio: 0.03,\n                dataLabel: {\n                    name: 'text', visible: true, position: 'Inside', font: {\n                        fontWeight: '600'\n                    }\n                }, explode: true, emptyPointSettings: { mode: 'Drop', fill: 'red' }, name: 'Food'\n            }],\n        legendSettings: {\n            visible: false\n        },\n        tooltip: { enable: true, header: 'Food', format: '${point.x} : <b>${point.y} cal</b>' },\n        textRender: function (args) {\n            args.text = args.text;\n        },\n\n        resized: function (args) {\n            var bounds = document.getElementById('pyramid-container').getBoundingClientRect();\n            if (bounds.width < bounds.height) {\n                args.accumulation.series[0].width = '80%';\n                args.accumulation.series[0].height = '60%';\n            }\n            else {\n                args.accumulation.series[0].width = '45%';\n                args.accumulation.series[0].height = '80%';\n            }\n        },\n        //Initializing Chart Title\n        title: 'Food Comparison Chart',\n    });\n    chart.appendTo('#pyramid-container');\n"}
--- a/src/chart/pyramid.html
+++ b/src/chart/pyramid.html
@ -8,7 +8,7 @@
    </p>
 </div>
 <div id="description">
-    <p> In this example, you can see how to render pyramid chart.<code>dataLabel</code> is used to represent individual data and its value.</p>
+    <p> In this example, you can see how to render <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/pyramid-chart">pyramid chart</a>.<code>dataLabel</code> is used to represent individual data and its value.</p>
    <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p> <code>Legends</code> are disabled in this example, the information about it can be read using <code>Tooltip</code>.</p>
 </div>
--- a/src/chart/range-area-stack.json
+++ b/src/chart/range-area-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/range-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"range-container1\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Range Area series\n */\n\n    var series1 = [];\n    var value = 35;\n    var point1;\n    for (var i = 1; i < 360; i++) {\n        if (Math.random() > 0.5) {\n            value += Math.random();\n        }\n        else {\n            value -= Math.random();\n        }\n        point1 = {\n            x: new Date(2015, 0, i),\n            high: value, low: value - 10\n        };\n        series1.push(point1);\n    }\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}˚C',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }\n        },\n        //Initializing Zooming\n        zoomSettings: {\n            enableSelectionZooming: true,\n            mode: 'X'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'RangeArea', marker: { visible : false },\n                name: 'India',\n                dataSource: series1,\n                xName: 'x', high: 'high', low: 'low', opacity: 0.4,\n                border: { width: 2 }\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n        //Initializing Chart Title\n        title: 'Temperature Variation',\n        seriesRender: function (args) {\n            var theme = args.series.chart.theme;\n            var color;\n            if (theme === 'Material') {\n                color = '#008E83';\n            } else if (theme === 'Bootstrap') {\n                color = '#7953AC';\n            } else {\n                color = '#335693';\n            }\n            args.series.border.color = color;\n        },\n        legendSettings: { visible: false },\n\n    });\n    chart.appendTo('#range-container1');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/range-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"range-container1\" align=\"center\"></div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Range Area series\n */\n\n    var series1 = [];\n    var value = 35;\n    var point1;\n    for (var i = 1; i < 360; i++) {\n        if (Math.random() > 0.5) {\n            value += Math.random();\n        }\n        else {\n            value -= Math.random();\n        }\n        point1 = {\n            x: new Date(2015, 0, i),\n            high: value, low: value - 10\n        };\n        series1.push(point1);\n    }\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            edgeLabelPlacement: 'Shift',\n            majorGridLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}˚C',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }\n        },\n        //Initializing Zooming\n        zoomSettings: {\n            enableSelectionZooming: true,\n            mode: 'X'\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'RangeArea', marker: { visible : false },\n                name: 'India',\n                dataSource: series1,\n                xName: 'x', high: 'high', low: 'low', opacity: 0.4,\n                border: { width: 2 }\n            }\n        ],\n        width: ej.base.Browser.isDevice ? '100%' : '80%',\n        //Initializing Chart Title\n        title: 'Temperature Variation',\n        seriesRender: function (args) {\n            var theme = args.series.chart.theme;\n            var color;\n            if (theme === 'Material') {\n                color = '#008E83';\n            } else if (theme === 'Bootstrap') {\n                color = '#7953AC';\n            } else {\n                color = '#335693';\n            }\n            args.series.border.color = color;\n        },\n        legendSettings: { visible: false },\n\n    });\n    chart.appendTo('#range-container1');\n"}
--- a/src/chart/range-area.html
+++ b/src/chart/range-area.html
@ -8,7 +8,7 @@
 </div>
 <div id="description">
    <p>
-        In this example, you can see how to render and configure the range area type chart. You can use <code>border</code>,
+        In this example, you can see how to render and configure the <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/range-area-chart">Range Area Type chart</a>. You can use <code>border</code>,
        <code>fill</code> properties to customize the area.
    </p>
    <p>
--- a/src/chart/range-bar-stack.json
+++ b/src/chart/range-bar-stack.json
@ -1 +1 @@
-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/range-bar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"https://www.usclimatedata.com/climate/united-states/us\" target=\"_blank\">www.worldweatheronline.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Range Bar series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}˚F',\n            edgeLabelPlacement: 'Shift',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'RangeColumn', name: 'California', xName: 'x', high: 'high', low: 'low',\n                dataSource: [\n                    { x: 'Jul', low: 28, high: 72 },\n                    { x: 'Aug', low: 18, high: 65 }, { x: 'Sep', low: 56, high: 87 },\n                    { x: 'Oct', low: 40, high: 78 },\n                    { x: 'Nov', low: 43, high: 64 }, { x: 'Dec', low: 28, high: 54 }\n                ],\n            }, {\n                type: 'RangeColumn', name: 'Colorado', xName: 'x', high: 'high', low: 'low',\n                dataSource: [\n                    { x: 'Jul', low: 38, high: 78 },\n                    { x: 'Aug', low: 27, high: 78 }, { x: 'Sep', low: 28, high: 79 },\n                    { x: 'Oct', low: 37, high: 66 },\n                    { x: 'Nov', low: 25, high: 52 }, { x: 'Dec', low: 20, high: 60 }\n                ]\n            }\n        ],\n        isTransposed: true,\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Temperature Variation',\n\n    });\n    chart.appendTo('#container');\n"}
+{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/chart/range-bar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"https://www.usclimatedata.com/climate/united-states/us\" target=\"_blank\">www.worldweatheronline.com</a>\n    </div>\n</div>\n\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Range Bar series\n */\n\n    var chart = new ej.charts.Chart({\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            majorGridLines: { width: 0 }\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis: {\n            labelFormat: '{value}˚F',\n            edgeLabelPlacement: 'Shift',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'RangeColumn', name: 'California', xName: 'x', high: 'high', low: 'low',\n                dataSource: [\n                    { x: 'Jul', low: 28, high: 72 },\n                    { x: 'Aug', low: 18, high: 65 }, { x: 'Sep', low: 56, high: 87 },\n                    { x: 'Oct', low: 40, high: 78 },\n                    { x: 'Nov', low: 43, high: 64 }, { x: 'Dec', low: 28, high: 54 }\n                ],\n            }, {\n                type: 'RangeColumn', name: 'Colorado', xName: 'x', high: 'high', low: 'low',\n                dataSource: [\n                    { x: 'Jul', low: 38, high: 78 },\n                    { x: 'Aug', low: 27, high: 78 }, { x: 'Sep', low: 28, high: 79 },\n                    { x: 'Oct', low: 37, high: 66 },\n                    { x: 'Nov', low: 25, high: 52 }, { x: 'Dec', low: 20, high: 60 }\n                ]\n            }\n        ],\n        isTransposed: true,\n        tooltip: {\n            enable: true\n        },\n        width: ej.base.Browser.isDevice ? '100%' : '60%',\n        //Initializing Chart Title\n        title: 'Temperature Variation',\n\n    });\n    chart.appendTo('#container');\n"}
--- a/Показать больше
+++ b/Показать больше