{"id":17210,"date":"2018-12-12T14:20:04","date_gmt":"2018-12-12T13:20:04","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?page_id=17210"},"modified":"2026-03-04T11:44:35","modified_gmt":"2026-03-04T11:44:35","slug":"download","status":"publish","type":"page","link":"https:\/\/www.highcharts.com\/blog\/download\/","title":{"rendered":"Download"},"content":{"rendered":"\n<section class=\"wp-block-highsoft-section neutral-0-light transparent hero-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-a29f7d37 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9c22b1e3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-global-padding is-content-justification-left is-layout-constrained wp-container-core-column-is-layout-4aa91cc0 wp-block-column-is-layout-constrained\" style=\"flex-basis:70%\">\n<h1 class=\"wp-block-heading\" style=\"line-height:1.0\">Try Highcharts now<\/h1>\n\n\n\n<p>Choose the product you wish to try, and we\u2019ll help you <br>get started with install and download instructions<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-global-padding is-content-justification-right is-layout-constrained wp-container-core-column-is-layout-f1f2ed93 wp-block-column-is-layout-constrained\" style=\"flex-basis:50%\">\n<div class=\"wp-block-highsoft-hs-box hs-box success-50-light success-600-dark\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:1rem;padding-bottom:var(--wp--preset--spacing--40);padding-left:1rem;--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-success-200);--border-color-dark:var(--primitives-success-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-e5d494a5 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-e1300cac wp-block-group-is-layout-flex\">\n<p class=\"has-dark-mode-text-color\" style=\"--dark-text-color:var(--primitives-neutral-0)\"><strong>Ready to purchase?<\/strong><\/p>\n\n\n\n<p class=\"has-dark-mode-text-color\" style=\"--dark-text-color:var(--primitives-neutral-0)\">Get the Highcharts license that fits your project.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/shop.highcharts.com\/\" class=\"hc-button hc-button--success hc-button--size-300\" data-link-template=\"https:\/\/shop.highcharts.com\/\" aria-label=\"Buy now \">Buy now <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 16a4 4 0 0 0 4 4h4a4 4 0 0 0 0-8h-4a4 4 0 0 1 0-8h4a4 4 0 0 1 4 4m-6-6v20\"><\/path><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent download-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-style-default is-layout-flex wp-container-core-columns-is-layout-08c01c1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-119bc444 wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\" id=\"content1\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-69253529 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-fc054d2d wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon hc-icon--size-m\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.5 7.278 12 12m0 0L3.5 7.278M12 12v9.5m9-5.441V7.942c0-.343 0-.514-.05-.667a1 1 0 0 0-.215-.364c-.109-.119-.258-.202-.558-.368l-7.4-4.111c-.284-.158-.425-.237-.575-.267a1 1 0 0 0-.403 0c-.15.03-.292.11-.576.267l-7.4 4.11c-.3.167-.45.25-.558.369a1 1 0 0 0-.215.364C3 7.428 3 7.599 3 7.942v8.117c0 .342 0 .514.05.666a1 1 0 0 0 .215.364c.109.119.258.202.558.368l7.4 4.111c.284.158.425.237.576.268.133.027.27.027.402 0 .15-.031.292-.11.576-.268l7.4-4.11c.3-.167.45-.25.558-.369a1 1 0 0 0 .215-.364c.05-.152.05-.324.05-.666\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.5 7.278 12 12m0 0L3.5 7.278M12 12v9.5m9-5.441V7.942c0-.343 0-.514-.05-.667a1 1 0 0 0-.215-.364c-.109-.119-.258-.202-.558-.368l-7.4-4.111c-.284-.158-.425-.237-.575-.267a1 1 0 0 0-.403 0c-.15.03-.292.11-.576.267l-7.4 4.11c-.3.167-.45.25-.558.369a1 1 0 0 0-.215.364C3 7.428 3 7.599 3 7.942v8.117c0 .342 0 .514.05.666a1 1 0 0 0 .215.364c.109.119.258.202.558.368l7.4 4.111c.284.158.425.237.576.268.133.027.27.027.402 0 .15-.031.292-.11.576-.268l7.4-4.11c.3-.167.45-.25.558-.369a1 1 0 0 0 .215-.364c.05-.152.05-.324.05-.666\"><\/path><\/svg><\/span><\/span><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Select product<\/h5>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-da70f3a0 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-300 hc-button--tab is-toggle-active\" data-tab-group=\"product-tabs\" data-tab-target=\"highchartsdataviz\" data-tab-initial=\"true\" aria-controls=\"highchartsdataviz\" role=\"tab\" aria-selected=\"true\" aria-expanded=\"true\" tabindex=\"0\" data-tab-orientation=\"horizontal\" aria-label=\"Highcharts Charting\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"#8791FF\" fill-rule=\"evenodd\" d=\"M12 2.714c5.325 0 9.643 4.318 9.643 9.643S17.325 22 12 22a9.643 9.643 0 0 1-9.643-9.643c0-5.325 4.317-9.643 9.643-9.643m0 4.5A5.143 5.143 0 1 0 12 17.5 5.143 5.143 0 0 0 12 7.214\" clip-rule=\"evenodd\"><\/path><path fill=\"#151733\" d=\"M12 14.5a2.143 2.143 0 1 0 0-4.286 2.143 2.143 0 0 0 0 4.286\"><\/path><path fill=\"#151733\" d=\"M12 2a10.36 10.36 0 0 1 9.604 6.472l-9.574 3.885-4.451-9.369C8.919 2.355 10.419 2 12 2\"><\/path><path fill=\"#fff\" d=\"M12 10.214c.902 0 1.672.558 1.988 1.348l-1.958.795-.925-1.946c.273-.125.575-.197.895-.197\"><\/path><\/svg>Highcharts Charting<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-300 hc-button--tab\" data-tab-group=\"product-tabs\" data-tab-target=\"highchartsdashboards\" aria-controls=\"highchartsdashboards\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"Highcharts Dashboards\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"#8791FF\" d=\"M12 11.1c0-.607.504-1.1 1.125-1.1h6.75c.621 0 1.125.492 1.125 1.1v8.8c0 .608-.504 1.1-1.125 1.1h-6.75A1.113 1.113 0 0 1 12 19.9z\"><\/path><path fill=\"#151733\" d=\"M3 16.734c0-.785.522-1.422 1.167-1.422h4.666c.645 0 1.167.637 1.167 1.422v2.844C10 20.363 9.478 21 8.833 21H4.167C3.522 21 3 20.363 3 19.578zM12 4.25c0-.69.504-1.25 1.125-1.25h6.75C20.496 3 21 3.56 21 4.25v2.5C21 7.44 20.496 8 19.875 8h-6.75C12.504 8 12 7.44 12 6.75z\"><\/path><path fill=\"#8791FF\" d=\"M3 4c0-.552.522-1 1.167-1h4.666C9.478 3 10 3.448 10 4v8c0 .552-.522 1-1.167 1H4.167C3.522 13 3 12.552 3 12z\"><\/path><\/svg>Highcharts Dashboards<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-300 hc-button--tab\" data-tab-group=\"product-tabs\" data-tab-target=\"highchartsgrid\" aria-controls=\"highchartsgrid\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"Highcharts Grid\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"#151733\" d=\"M11.119 8.533c.488-.292 1.271-.277 1.75.035l6.933 4.507c.48.31.472.8-.016 1.093l-7.068 4.23c-.488.293-1.273.278-1.751-.033l-6.934-4.507c-.479-.312-.47-.801.018-1.094zm1.179 7.22a.91.91 0 0 0-.876-.026l-.889.518c-.245.142-.251.386-.013.543l.864.57c.238.157.63.169.876.026l.888-.516c.246-.143.251-.387.013-.544zm2.667-1.551a.91.91 0 0 0-.876-.027l-.889.518c-.245.142-.251.386-.013.543l.864.57a.91.91 0 0 0 .876.027l.888-.517c.246-.143.251-.386.013-.544zm-5.257-.16a.91.91 0 0 0-.876-.025l-.889.517c-.245.143-.25.386-.013.544l.864.57a.91.91 0 0 0 .876.026l.888-.517c.246-.143.252-.386.013-.544zm7.924-1.391a.91.91 0 0 0-.876-.027l-.889.518c-.245.143-.251.386-.013.543l.864.57c.238.157.63.169.875.026l.89-.516c.245-.143.25-.386.012-.544zm-5.257-.159a.91.91 0 0 0-.876-.026l-.889.516c-.245.143-.25.386-.012.544l.863.57c.238.157.63.17.876.026l.888-.517c.246-.143.252-.385.013-.543zm-5.256-.159a.91.91 0 0 0-.877-.027l-.889.517c-.245.143-.25.386-.012.544l.863.57c.238.157.63.17.876.027l.889-.518c.245-.143.25-.386.012-.544zm7.924-1.393a.91.91 0 0 0-.877-.026l-.889.517c-.245.143-.25.386-.013.544l.864.57a.91.91 0 0 0 .876.027l.888-.518c.246-.143.252-.386.014-.544zm-5.257-.159a.91.91 0 0 0-.877-.026l-.889.517c-.245.143-.25.386-.012.544l.863.57a.91.91 0 0 0 .876.027l.889-.518c.245-.142.251-.386.013-.543zm2.667-1.552a.91.91 0 0 0-.876-.026l-.89.517c-.245.143-.25.386-.012.544l.863.57c.238.158.63.17.876.027l.889-.518c.245-.142.252-.386.013-.543z\"><\/path><path fill=\"#8791FF\" d=\"M11.213 5.27c.488-.292 1.271-.277 1.75.034l6.933 4.507c.479.311.471.8-.016 1.093l-7.069 4.231c-.488.292-1.272.277-1.75-.034l-6.934-4.507c-.479-.311-.47-.8.017-1.093zm1.178 7.22a.91.91 0 0 0-.876-.026l-.888.517c-.246.143-.251.386-.013.544l.863.569a.91.91 0 0 0 .876.026l.889-.516c.245-.143.251-.386.013-.544zm2.667-1.552a.91.91 0 0 0-.876-.026l-.888.517c-.246.143-.251.386-.013.544l.863.57a.91.91 0 0 0 .876.027l.889-.518c.245-.143.251-.386.013-.543zm-5.256-.159a.91.91 0 0 0-.876-.026l-.89.517c-.245.143-.25.387-.012.544l.863.57a.91.91 0 0 0 .876.027l.89-.518c.245-.142.25-.386.012-.543zm7.923-1.392a.91.91 0 0 0-.876-.026l-.888.517c-.246.143-.251.387-.013.544l.863.57c.239.157.63.168.876.026l.889-.517c.245-.142.251-.386.013-.543zm-5.257-.158a.91.91 0 0 0-.875-.027l-.89.516c-.245.143-.25.387-.012.544l.864.57c.238.158.63.17.876.027l.888-.518c.246-.142.251-.385.013-.542zm-5.255-.16a.91.91 0 0 0-.877-.027l-.889.517c-.245.143-.251.387-.013.544l.864.57a.91.91 0 0 0 .876.027l.888-.517c.246-.143.251-.387.013-.544zm7.924-1.392a.91.91 0 0 0-.877-.027l-.89.517c-.244.143-.25.387-.012.544l.864.57a.91.91 0 0 0 .876.027l.888-.517c.245-.143.252-.387.014-.544zm-5.257-.16a.91.91 0 0 0-.877-.026l-.889.518c-.245.142-.251.386-.013.543l.864.57a.91.91 0 0 0 .876.027l.888-.517c.246-.143.252-.387.014-.544zm2.667-1.551a.91.91 0 0 0-.876-.027l-.89.518c-.245.142-.251.386-.013.543l.864.57c.238.158.63.17.876.027l.888-.517c.246-.143.252-.386.014-.544z\"><\/path><\/svg>Highcharts Grid<\/button><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark hs-box--mobile-hidden\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\" id=\"blog-newsletter\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-3dd7c42b wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-fc054d2d wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon hc-icon--size-m\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m13.744 2.634 7.528 4.893c.266.173.399.26.495.374a1 1 0 0 1 .189.348c.044.143.044.302.044.62V16.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C19.72 21 18.88 21 17.2 21H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 18.72 2 17.88 2 16.2V8.868c0-.317 0-.476.044-.62a1 1 0 0 1 .189-.347c.096-.115.229-.201.495-.374l7.528-4.893m3.488 0c-.631-.41-.947-.616-1.287-.696a2 2 0 0 0-.914 0c-.34.08-.656.285-1.287.696m3.488 0 6.192 4.024c.688.448 1.032.671 1.151.955a1 1 0 0 1 0 .774c-.12.284-.463.507-1.15.955l-6.193 4.024c-.631.41-.947.616-1.287.696-.3.07-.613.07-.914 0-.34-.08-.656-.285-1.287-.696L4.064 9.342c-.688-.448-1.032-.671-1.151-.955a1 1 0 0 1 0-.774c.12-.284.463-.507 1.15-.955l6.193-4.024M21.5 19l-6.643-6m-5.714 0L2.5 19\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m13.744 2.634 7.528 4.893c.266.173.399.26.495.374a1 1 0 0 1 .189.348c.044.143.044.302.044.62V16.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C19.72 21 18.88 21 17.2 21H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 18.72 2 17.88 2 16.2V8.868c0-.317 0-.476.044-.62a1 1 0 0 1 .189-.347c.096-.115.229-.201.495-.374l7.528-4.893m3.488 0c-.631-.41-.947-.616-1.287-.696a2 2 0 0 0-.914 0c-.34.08-.656.285-1.287.696m3.488 0 6.192 4.024c.688.448 1.032.671 1.151.955a1 1 0 0 1 0 .774c-.12.284-.463.507-1.15.955l-6.193 4.024c-.631.41-.947.616-1.287.696-.3.07-.613.07-.914 0-.34-.08-.656-.285-1.287-.696L4.064 9.342c-.688-.448-1.032-.671-1.151-.955a1 1 0 0 1 0-.774c.12-.284.463-.507 1.15-.955l6.193-4.024M21.5 19l-6.643-6m-5.714 0L2.5 19\"><\/path><\/svg><\/span><\/span><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Join our newsletter<\/h4>\n<\/div>\n\n\n\n<p>Get Highcharts updates, expert tips, and optimization tricks in your inbox. We\u2019ll never share your information.<\/p>\n\n\n<style id=\"wpforms-css-vars-23361\">\n\t\t\t\t#wpforms-23361 {\n\t\t\t\t--wpforms-field-size-input-height: 43px;\n--wpforms-field-size-input-spacing: 15px;\n--wpforms-field-size-font-size: 16px;\n--wpforms-field-size-line-height: 19px;\n--wpforms-field-size-padding-h: 14px;\n--wpforms-field-size-checkbox-size: 16px;\n--wpforms-field-size-sublabel-spacing: 5px;\n--wpforms-field-size-icon-size: 1;\n--wpforms-label-size-font-size: 16px;\n--wpforms-label-size-line-height: 19px;\n--wpforms-label-size-sublabel-font-size: 14px;\n--wpforms-label-size-sublabel-line-height: 17px;\n--wpforms-button-size-font-size: 17px;\n--wpforms-button-size-height: 41px;\n--wpforms-button-size-padding-h: 15px;\n--wpforms-button-size-margin-top: 10px;\n--wpforms-container-shadow-size-box-shadow: none;\n\t\t\t}\n\t\t\t<\/style><div class=\"wpforms-container wpforms-container-full hsform wpforms-render-modern\" id=\"wpforms-23361\"><form id=\"wpforms-form-23361\" class=\"wpforms-validate wpforms-form wpforms-ajax-form\" data-formid=\"23361\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/blog\/wp-json\/wp\/v2\/pages\/17210\" data-token=\"e09105e2a9a3aa25a39de92b20389d9c\" data-token-time=\"1775658626\"><noscript class=\"wpforms-error-noscript\">Please enable JavaScript in your browser to complete this form.<\/noscript><div id=\"wpforms-error-noscript\" style=\"display: none;\">Please enable JavaScript in your browser to complete this form.<\/div><div class=\"wpforms-field-container\"><div id=\"wpforms-23361-field_1-container\" class=\"wpforms-field wpforms-field-email\" data-field-id=\"1\"><label class=\"wpforms-field-label\" for=\"wpforms-23361-field_1\">Email <span class=\"wpforms-required-label\" aria-hidden=\"true\">*<\/span><\/label><input type=\"email\" id=\"wpforms-23361-field_1\" class=\"wpforms-field-large wpforms-field-required\" name=\"wpforms[fields][1]\" placeholder=\"Email address\" spellcheck=\"false\" aria-errormessage=\"wpforms-23361-field_1-error\" required><\/div><div id=\"wpforms-23361-field_2-container\" class=\"wpforms-field wpforms-field-hidden ac-form-id-container\" data-field-id=\"2\"><input type=\"hidden\" id=\"wpforms-23361-field_2\" name=\"wpforms[fields][2]\" value=\"5\"><\/div><div id=\"wpforms-23361-field_3-container\" class=\"wpforms-field wpforms-field-hidden ac-tags-container\" data-field-id=\"3\"><input type=\"hidden\" id=\"wpforms-23361-field_3\" name=\"wpforms[fields][3]\"><\/div><\/div><!-- .wpforms-field-container --><div class=\"wpforms-recaptcha-container wpforms-is-turnstile\" ><div class=\"wpforms-turnstile\" data-sitekey=\"0x4AAAAAAAw4EP3QFig1aA4x\" data-action=\"FormID-23361\"><\/div><input type=\"text\" name=\"g-recaptcha-hidden\" class=\"wpforms-recaptcha-hidden\" style=\"position:absolute!important;clip:rect(0,0,0,0)!important;height:1px!important;width:1px!important;border:0!important;overflow:hidden!important;padding:0!important;margin:0!important;\" data-rule-turnstile=\"1\"><\/div><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"23361\"><input type=\"hidden\" name=\"page_title\" value=\"\"><input type=\"hidden\" name=\"page_url\" value=\"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/pages\/17210\"><input type=\"hidden\" name=\"url_referer\" value=\"\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-23361\" class=\"wpforms-submit hc-button hs-submit\" data-alt-text=\"Sending\" data-submit-text=\"Submit\" aria-live=\"assertive\" value=\"wpforms-submit\">Submit<\/button><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/plugins\/wpforms\/assets\/images\/submit-spin.svg\" class=\"wpforms-submit-spinner\" style=\"display: none;\" width=\"26\" height=\"26\" alt=\"Loading\"><\/div><\/form><\/div>  <!-- .wpforms-container -->\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-119bc444 wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\" id=\"highchartsdataviz\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-afc903cf wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-3ec2841e wp-block-group-is-layout-flex\">\n<h3 class=\"wp-block-heading\">Installing Highcharts<\/h3>\n\n\n\n<p>These instructions are for installing Highcharts Core, our core data visualization library with 40+ chart types. For product-specific instructions, check out our documentation for <a href=\"https:\/\/www.highcharts.com\/docs\/stock\/getting-started-stock\">Highcharts Stock<\/a>, <a href=\"https:\/\/www.highcharts.com\/docs\/maps\/getting-started\">Highcharts Maps<\/a> and <a href=\"https:\/\/www.highcharts.com\/docs\/gantt\/getting-started-gantt\">Highcharts Gantt<\/a>.<\/p>\n\n\n\n<p class=\"has-font-size-100-font-size\">Highcharts usage is covered by our <a href=\"http:\/\/shop.highcharts.com\/license-eula\">End User License Agreement<\/a>. Production and commercial use require a commercial license.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flex wp-container-core-group-is-layout-b371d99e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab is-toggle-active\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"javascript\" data-tab-initial=\"true\" aria-controls=\"javascript\" role=\"tab\" aria-selected=\"true\" aria-expanded=\"true\" tabindex=\"0\" data-tab-orientation=\"horizontal\" aria-label=\"JavaScript\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 21\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><g clip-path=\"url(#a)\"><path fill=\"currentColor\" d=\"M20 .5H0v20h20z\"><\/path><path fill=\"#fff\" d=\"M13.435 16.125c.403.658.927 1.141 1.854 1.141.779 0 1.276-.389 1.276-.927 0-.644-.511-.872-1.368-1.247l-.47-.202c-1.356-.578-2.257-1.302-2.257-2.832 0-1.41 1.074-2.482 2.752-2.482 1.195 0 2.054.416 2.673 1.505l-1.463.94c-.322-.578-.67-.806-1.21-.806-.55 0-.9.35-.9.805 0 .564.35.792 1.157 1.142l.47.2c1.596.686 2.498 1.384 2.498 2.953 0 1.692-1.33 2.62-3.114 2.62-1.746 0-2.874-.832-3.425-1.923zm-6.64.163c.296.524.565.966 1.21.966.618 0 1.007-.241 1.007-1.18v-6.39h1.88v6.415c0 1.946-1.141 2.832-2.807 2.832-1.504 0-2.376-.779-2.819-1.717z\" class=\"icon-fill-adaptive\"><\/path><\/g><defs><clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 .5h20v20H0z\"><\/path><\/clipPath><\/defs><\/svg>JavaScript<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"typescript\" aria-controls=\"typescript\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"TypeScript\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 21\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><g clip-path=\"url(#a)\"><path fill=\"currentColor\" d=\"M20 20.5H0V.5h20zm-3.872-8a4.5 4.5 0 0 0-.96.1 2.6 2.6 0 0 0-.798.308q-.344.211-.545.536a1.46 1.46 0 0 0-.2.78q0 .578.367.987.367.408 1.113.691.294.11.547.215.255.105.439.219.185.113.29.246a.47.47 0 0 1 .04.536.6.6 0 0 1-.201.187q-.135.078-.338.123-.202.045-.474.045-.463 0-.916-.149a2.8 2.8 0 0 1-.84-.442v1.295q.345.161.82.242.473.081.998.081.511 0 .971-.089.461-.09.808-.294.346-.203.549-.533.202-.33.202-.815 0-.352-.115-.618a1.4 1.4 0 0 0-.334-.471 2.4 2.4 0 0 0-.523-.37 6 6 0 0 0-.686-.31 9 9 0 0 1-.503-.204 2.6 2.6 0 0 1-.378-.202 1 1 0 0 1-.24-.219.43.43 0 0 1-.01-.501.6.6 0 0 1 .215-.184q.138-.077.338-.12a2 2 0 0 1 .444-.043 3 3 0 0 1 .773.1q.201.05.39.127t.349.179v-1.21a3.8 3.8 0 0 0-.71-.168 6 6 0 0 0-.882-.055M8 13.691h1.815v4.732h1.446V13.69h1.824V12.63H8z\"><\/path><\/g><defs><clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 .5h20v20H0z\"><\/path><\/clipPath><\/defs><\/svg>TypeScript<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"react\" aria-controls=\"react\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"React\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 21 20\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><path fill=\"currentColor\" d=\"M17.17 6.833q-.317-.108-.633-.205.051-.222.097-.446c.48-2.394.164-4.319-.902-4.953-1.027-.607-2.703.024-4.398 1.542a11 11 0 0 0-.489.462 12 12 0 0 0-.324-.31C8.744 1.302 6.962.619 5.896 1.258c-1.023.61-1.328 2.422-.898 4.688q.064.335.144.671c-.25.072-.496.153-.726.237C2.33 7.596.833 8.77.833 9.983c0 1.253 1.594 2.511 3.762 3.274q.263.092.532.173c-.06.241-.11.478-.157.723-.41 2.23-.09 3.998.934 4.605 1.055.626 2.828-.017 4.555-1.571q.204-.187.41-.39.26.258.53.498c1.673 1.478 3.325 2.077 4.345 1.47 1.054-.626 1.398-2.527.953-4.84a18 18 0 0 0-.117-.543 10 10 0 0 0 .367-.117c2.254-.767 3.887-2.008 3.887-3.282 0-1.217-1.54-2.399-3.665-3.15m-5.286-3.41c1.453-1.303 2.809-1.813 3.426-1.447.66.39.914 1.964.5 4.034q-.039.204-.09.401a19.5 19.5 0 0 0-2.629-.426 20 20 0 0 0-1.664-2.133c.153-.149.301-.29.457-.43m-4.52 8.645c.2.35.403.7.618 1.04a17 17 0 0 1-1.812-.3 19 19 0 0 1 .636-1.788c.18.353.363.703.559 1.048M6.182 7.235a19 19 0 0 1 1.782-.314q-.312.502-.602 1.021c-.191.341-.379.691-.555 1.045a20 20 0 0 1-.625-1.752m1.07 2.768a24.33 24.33 0 0 1 1.79-3.194 24 24 0 0 1 3.585 0q.499.759.95 1.555t.847 1.623a27 27 0 0 1-1.789 3.206c-.582.044-1.187.064-1.8.064q-.921-.001-1.782-.056a24.5 24.5 0 0 1-1.8-3.198m7.055 2.057c.2-.354.387-.711.57-1.073q.375.874.66 1.78-.909.212-1.835.322a27 27 0 0 0 .605-1.029m.563-3.073a34 34 0 0 0-.567-1.053q-.287-.513-.597-1.013.903.114 1.793.322-.27.889-.63 1.744m-4.028-4.52q.615.688 1.157 1.438a25 25 0 0 0-2.325 0c.383-.518.778-1 1.168-1.438m-4.53-2.463c.655-.394 2.112.169 3.648 1.567.097.088.195.185.297.281A20 20 0 0 0 8.58 5.985q-1.326.122-2.625.418-.075-.309-.137-.623c-.367-1.944-.125-3.41.492-3.776m-.958 10.59a10 10 0 0 1-.484-.156 7.9 7.9 0 0 1-2.461-1.254 1.8 1.8 0 0 1-.487-.523 1.8 1.8 0 0 1-.248-.678c0-.735 1.235-1.675 3.016-2.314q.336-.12.676-.221.398 1.309.957 2.555-.565 1.264-.969 2.591m4.555 3.938a7.1 7.1 0 0 1-2.203 1.418 1.7 1.7 0 0 1-1.38.052c-.62-.37-.878-1.788-.527-3.696q.064-.338.145-.671 1.313.29 2.652.394.776 1.129 1.688 2.145-.188.188-.375.358m.957-.977a19 19 0 0 1-1.184-1.458 27 27 0 0 0 2.34-.004q-.54.764-1.156 1.462m5.105 1.206a1.8 1.8 0 0 1-.195.697c-.111.217-.264.407-.45.56-.62.37-1.945-.112-3.374-1.374a17 17 0 0 1-.496-.462 20 20 0 0 0 1.648-2.153 19 19 0 0 0 2.664-.422q.059.249.106.49c.19.874.223 1.777.097 2.664m.711-4.32q-.164.056-.332.105a21 21 0 0 0-.996-2.563q.56-1.231.957-2.527.305.09.586.189c1.82.642 3.098 1.599 3.098 2.33 0 .787-1.364 1.804-3.313 2.467m-5.847-.602c.353 0 .7-.108.994-.31s.523-.49.658-.826a1.9 1.9 0 0 0 .102-1.063 1.86 1.86 0 0 0-.49-.942 1.78 1.78 0 0 0-.916-.504 1.74 1.74 0 0 0-1.033.105 1.8 1.8 0 0 0-.803.678 1.88 1.88 0 0 0 .222 2.323 1.748 1.748 0 0 0 1.265.539\"><\/path><\/svg>React<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"angular\" aria-controls=\"angular\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"Angular\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 21 20\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><path fill=\"currentColor\" d=\"m10.833 0-10 3.32 1.525 12.31L10.833 20l8.475-4.37 1.525-12.31z\"><\/path><path fill=\"currentColor\" d=\"M10.834 0v2.22-.01V20l8.474-4.37 1.525-12.31z\"><\/path><path fill=\"#fff\" d=\"m10.845 2.104-6.29 13.053H6.9l1.264-2.92h5.34l1.264 2.92h2.345zm1.837 8.332H9.007l1.838-4.09z\" class=\"icon-fill-adaptive\"><\/path><\/svg>Angular<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"vue\" aria-controls=\"vue\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"Vue\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 21\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><path fill=\"currentColor\" d=\"m12 3.167-2 3.387-2.002-3.387H1.333l8.666 14.666 8.667-14.666z\"><\/path><path fill=\"currentColor\" d=\"m12 3.167-2 3.387-2.002-3.387H4.8l5.2 8.8 5.2-8.8z\"><\/path><path fill=\"#fff\" d=\"M14.805 3.163 10 11 5.313 3.163h-.508L10 12l5.266-8.837z\" class=\"icon-fill-adaptive\"><\/path><\/svg>Vue<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"flutter\" aria-controls=\"flutter\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"Flutter\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 21\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><g fill=\"currentColor\" clip-path=\"url(#a)\"><path d=\"m5.272 13.157-2.676-2.676 8.7-8.701h5.355zM8.953 16.839l2.343 2.342h5.353L11.965 14.5zM16.65 9.812h-5.354l-2.343 2.341 3.012 2.347z\"><\/path><path fill-rule=\"evenodd\" d=\"m6.61 14.5 2.678-2.68 2.677 2.68-2.677 2.673z\" clip-rule=\"evenodd\"><\/path><path d=\"m9.288 17.173 2.677-2.677 1.339 1.339z\"><\/path><\/g><defs><clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 .5h20v20H0z\"><\/path><\/clipPath><\/defs><\/svg>Flutter<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"svelte\" aria-controls=\"svelte\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"Svelte\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 21\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><g clip-path=\"url(#a)\"><path fill=\"currentColor\" d=\"M18.716 3.045C16.494.384 12.07-.395 8.889 1.282L3.283 4.265C1.753 5.062.693 6.367.388 7.842a4.74 4.74 0 0 0 .672 3.61 4.66 4.66 0 0 0-.958 2c-.326 1.508.102 3.068 1.162 4.305 2.243 2.66 6.647 3.44 9.827 1.762l5.607-2.966c1.529-.796 2.589-2.101 2.895-3.576a4.74 4.74 0 0 0-.673-3.61c.489-.61.815-1.288.958-2 .346-1.525-.082-3.085-1.162-4.322\"><\/path><path fill=\"#fff\" d=\"M8.338 18.011c-1.814.39-3.71-.203-4.77-1.475-.653-.745-.898-1.678-.714-2.593.04-.152.082-.288.122-.44l.102-.272.286.17a8.1 8.1 0 0 0 2.202.915l.203.05-.02.17a1 1 0 0 0 .224.695c.326.39.897.577 1.448.458.122-.034.244-.068.346-.119l5.587-2.966c.285-.152.468-.373.53-.644a.91.91 0 0 0-.204-.78c-.326-.39-.897-.559-1.448-.44a2 2 0 0 0-.346.118l-2.141 1.136a4.2 4.2 0 0 1-1.142.407c-1.814.39-3.71-.203-4.77-1.475-.632-.745-.897-1.678-.694-2.593.184-.881.836-1.678 1.754-2.152l5.606-2.967a5 5 0 0 1 1.142-.423c1.814-.39 3.71.203 4.77 1.474.653.746.898 1.678.714 2.593a4 4 0 0 1-.143.441l-.101.271-.286-.17a8.1 8.1 0 0 0-2.202-.914l-.204-.051.02-.17a1 1 0 0 0-.223-.695c-.327-.39-.898-.559-1.448-.44a2 2 0 0 0-.347.118L6.605 8.214c-.285.153-.469.373-.53.644-.061.272.02.56.204.78.326.39.897.56 1.448.44.122-.033.244-.067.346-.118l2.14-1.135a5 5 0 0 1 1.143-.424c1.814-.39 3.71.203 4.77 1.474.652.746.897 1.678.714 2.594-.184.881-.836 1.678-1.754 2.152L9.48 17.587a5 5 0 0 1-1.142.424\" class=\"icon-fill-adaptive\"><\/path><\/g><defs><clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 .5h20v20H0z\"><\/path><\/clipPath><\/defs><\/svg>Svelte<\/button><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200 hc-button--tab\" data-tab-group=\"Frameworks-tabs\" data-tab-target=\"python\" aria-controls=\"python\" role=\"tab\" aria-selected=\"false\" aria-expanded=\"false\" tabindex=\"-1\" data-tab-orientation=\"horizontal\" aria-label=\"Python\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 21\" width=\"16\" height=\"16\" style=\"color:var(--icon-color-gray)\"><g fill=\"currentColor\" clip-path=\"url(#a)\"><path d=\"M10.074.501c-.763.004-1.492.072-2.133.19-1.889.35-2.232 1.079-2.232 2.424v1.777h4.464v.592H4.034c-1.298 0-2.434.815-2.789 2.364-.41 1.776-.428 2.884 0 4.738.317 1.38 1.075 2.364 2.373 2.364h1.534v-2.13c0-1.539 1.275-2.896 2.79-2.896H12.4c1.24 0 2.232-1.068 2.232-2.37V3.116c0-1.263-1.02-2.213-2.232-2.423a13.3 13.3 0 0 0-2.326-.19M7.66 1.931c.461 0 .838.4.838.89s-.377.886-.838.886c-.463 0-.838-.396-.838-.885 0-.492.375-.892.838-.892\"><\/path><path d=\"M15.189 5.484v2.07c0 1.606-1.303 2.957-2.79 2.957H7.942c-1.221 0-2.232 1.091-2.232 2.369v4.44c0 1.263 1.052 2.006 2.232 2.368 1.413.434 2.768.513 4.459 0 1.124-.34 2.232-1.023 2.232-2.369v-1.777h-4.459v-.592h6.691c1.297 0 1.78-.945 2.232-2.364.466-1.46.446-2.865 0-4.738-.32-1.349-.933-2.364-2.232-2.364zM12.68 16.727c.463 0 .837.396.837.886 0 .491-.375.89-.837.89s-.838-.399-.838-.89c0-.49.377-.886.838-.886\"><\/path><\/g><defs><clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 .5h20v20H0z\"><\/path><\/clipPath><\/defs><\/svg>Python<\/button><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"javascript\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Quick start with the Highcharts CDN<\/h4>\n\n\n\n<p>Use our public CDN for local development, product evaluation, and other non-production use. If you\u2019re building something for production, see our <a href=\"https:\/\/shop.highcharts.com\/\">licensing option<\/a>s for the correct way to deploy Highcharts. Details about CDN usage are covered in our <a href=\"https:\/\/shop.highcharts.com\/license-eula\">Acceptable Use Policy<\/a>.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt; &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Install with NPM<\/h4>\n\n\n\n<p><a href=\"https:\/\/www.npmjs.com\/package\/highcharts\">The official Highcharts NPM package<\/a> comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages. Read more about <a href=\"https:\/\/www.highcharts.com\/docs\/getting-started\/install-from-npm\">how to install Highcharts with NPM<\/a>.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install highcharts --save<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7fc3d43a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-f5bb311e wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Load as modules or create your own build<\/h4>\n\n\n\n<p>Highcharts can also be loaded as ECMAScript modules from our CDN, as AMD modules, as UMD modules or as TypeScript. You can also create your own tailored build to include only the features you need.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"\/docs\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"\/docs\" aria-label=\"Read more in the docs\">Read more in the docs<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 11H8m2 4H8m8-8H8m12-.2v10.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h6.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C20 4.28 20 5.12 20 6.8\"><\/path><\/svg><\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-f5bb311e wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Download Our Libaries<\/h4>\n\n\n\n<p>The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/code.highcharts.com\/zips\/Highcharts-12.5.0.zip\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/code.highcharts.com\/zips\/Highcharts-12.5.0.zip\" data-hc-preset-group=\"hc_twentyfour_products_cache_formatted_short\" data-hc-preset-key=\"Core\" aria-label=\"Core 12.5.0\">Core 12.5.0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-5-5 5m0 0-5-5m5 5V3\"><\/path><\/svg><\/a><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Stock-12.5.0.zip\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Stock-12.5.0.zip\" data-hc-preset-group=\"hc_twentyfour_products_cache_formatted_short\" data-hc-preset-key=\"Stock\" aria-label=\"Stock 12.5.0\">Stock 12.5.0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-5-5 5m0 0-5-5m5 5V3\"><\/path><\/svg><\/a><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Maps-12.5.0.zip\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Maps-12.5.0.zip\" data-hc-preset-group=\"hc_twentyfour_products_cache_formatted_short\" data-hc-preset-key=\"Maps\" aria-label=\"Maps 12.5.0\">Maps 12.5.0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-5-5 5m0 0-5-5m5 5V3\"><\/path><\/svg><\/a><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Gantt-12.5.0.zip\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Gantt-12.5.0.zip\" data-hc-preset-group=\"hc_twentyfour_products_cache_formatted_short\" data-hc-preset-key=\"Gantt\" aria-label=\"Gantt 12.5.0\">Gantt 12.5.0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-5-5 5m0 0-5-5m5 5V3\"><\/path><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"typescript\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<p>Highcharts comes with TypeScript support.<\/p>\n\n\n\n<p>Highcharts in your favorite TypeScript-Editor provides auto-completion, integrated documentation, and type checking.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Use Highcharts in your TypeScript project<\/h4>\n\n\n\n<p>Install Highcharts from the NPM registry to use the latest TypeScript definitions.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install highcharts<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Extend the Highcharts definitions for customizations<\/h4>\n\n\n\n<p>If you do customization on Highcharts code, you can also extend the TypeScript definitions.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>declare module `highcharts` {\n\tinterface Options {\n\t\tmyCustomOption: Record;\n\t}\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"react\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Install with NPM<\/h4>\n\n\n\n<p>Install the Highcharts package along with our React integration from npm.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/react<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Add Chart, Series and Title components<\/h4>\n\n\n\n<p>In your JSX file, import the necessary components.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import {\n    Chart,\n    Series,\n    Title\n} from \u2018@highcharts\/react\u2019;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Create your chart<\/h4>\n\n\n\n<p>Now you can create a simple chart, like this:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>function ChartComponent () {\n  return (\n    &lt;Chart&gt;\n      &lt;Title&gt;Line Chart&lt;\/Title&gt;      \n      &lt;Series type=\u201dline\u201d data={&#091;1, 2, 3]} \/&gt;&lt;\/Series&gt;\n    &lt;\/Chart&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"angular\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Install<\/h4>\n\n\n\n<p>By using npm<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install highcharts-angular<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>Make sure the Highcharts library is added by installing it<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install highcharts<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>Add HighchartsChartModule to your app.module.ts imports<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>TypeScript\nimport { HighchartsChartModule } from 'highcharts-angular';\n\n@NgModule({\n\timports: &#091;\n\t\t...\n\t\tHighchartsChartModule<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Import<\/h4>\n\n\n\n<p>In the component where you like to add the chart import the Highcharts library like<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>TypeScript\nimport * as Highcharts from 'highcharts';<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Usage<\/h4>\n\n\n\n<p>In HTML file, add highcharts-chart component and use property binding to assign the Highcharts library and your chartOptions<\/p>\n\n\n\n<p>The charts options can be stored in your component TS file<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>TypeScript\nexport class YourComponent {\n\tHighcharts: typeof Highcharts = Highcharts;\n\tchartOptions: Highcharts.Options = {\n\t\tseries: &#091;{\n\t\t\tdata: &#091;1, 2, 3]\n\t\t}]\n\t};<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>Documentation:&nbsp;<a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\">https:\/\/github.com\/highcharts\/highcharts-angular<\/a><br><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"vue\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Install<\/h4>\n\n\n\n<p>By using npm<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install highcharts-vue<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>By using yarn<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>yarn add highcharts-vue<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>Add using a script tag<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>&lt;script\nsrc=\"https:\/\/cdn.jsdelivr.net\/npm\/highcharts-vue\/dist\/highcharts-vue.min.js\"&gt;\n&lt;\/script&gt;&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>Live demo:&nbsp;<a href=\"https:\/\/jsfiddle.net\/BlackLabel\/21nb5u98\/\">https:\/\/jsfiddle.net\/BlackLabel\/21nb5u98\/<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Import and register<\/h4>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>Javascript\nimport HighchartsVue from 'highcharts-vue'\n\n\/\/ Vue 2\nVue.use(HighchartsVue)\n\n\/\/ Vue 3\ncreateApp(App).use(HighchartsVue)<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Usage<\/h4>\n\n\n\n<p>Use the highcharts component with your options<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>JavaScript\n&lt;highcharts\n\t:options=\"chartOptions\"\n\/&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>Documentation:&nbsp;<a href=\"https:\/\/github.com\/highcharts\/highcharts-react\">https:\/\/github.com\/highcharts\/highcharts-react<\/a><\/p>\n\n\n\n<p>The readme on this GitHub repository contains all the essential information required to utilize this wrapper. Follow the provided link for further details. Feel free to post feature requests or report bugs on this repository.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"flutter\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<p>Installing Highcharts in your Flutter project is a straightforward process and typically involves just a single command. This quick guide will walk you through the basic steps of adding the Flutter package to your project.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Use pub.dev<\/h4>\n\n\n\n<p>This is the official Flutter way of installing additional packages.<\/p>\n\n\n\n<p>Run the following command in your project folder to install the latest Highcharts for Flutter:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>flutter pub add highcharts_flutter<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>You can also limit the process to a specific version of the Flutter integration<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>flutter pub add highcharts_flutter:0.1.0<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>More information about the Highcharts for Flutter package can be found on&nbsp;<a href=\"https:\/\/pub.dev\/packages\/highcharts_flutter\">[our pub.dev profile]<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Use GitHub<\/h4>\n\n\n\n<p>Use the following command, to test out an experimental version of Highcharts for Flutter:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>dart pub add 'highcharts_flutter:{\"git\":\"https:\/\/github.com\/highcharts\/highcharts_flutter.git\"}'<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>You can also add a specific version (tag):<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>dart pub add 'highcharts_flutter:{\"git\":{\"url\":\"https:\/\/github.com\/highcharts\/highcharts_flutter.git\",\"tag\":\"v0.1.0\"}}'<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>Or use an experimental branch:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>dart pub add 'highcharts_flutter:{\"git\":{\"url\":\"https:\/\/github.com\/highcharts\/highcharts_flutter.git\",\"ref\":\"main\"}}'<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"svelte\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Install<\/h4>\n\n\n\n<p>By using NPM<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/svelte<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>By using yarn<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>yarn add @highcharts\/svelte<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Usage<\/h4>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nimport Chart from \u2018@highcharts\/svelte\u2019;\n\t\t\t\t\t\t\t\t\t  \n\/\/ these options are reactive\nlet options = {\n\tseries: &#091;{\n\t\ttype: \u2018line\u2019,\n\t\tdata: &#091;1, 2, 3]\n\t}]\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Highcharts modules<\/h4>\n\n\n\n<p>In order to use different charts (stock, map, gantt), you can import the appropriate component:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import { StockChart, MapChart, GanttChart } from \u2018@highcharts\/svelte\u2019;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>You can also import &amp; apply other Highcharts modules:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import Highcharts from \u2018highcharts\u2019;\nimport Exporting from \u2018highcharts\/modules\/exporting\u2019;\n\t\t\nExporting(Highcharts);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Documentation<\/h4>\n\n\n\n<p>For all the possible props and options, refer to the documentation:&nbsp;<a href=\"https:\/\/github.com\/highcharts\/highcharts-svelte?tab=readme-ov-file#readme\">https:\/\/github.com\/highcharts\/highcharts-svelte<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\" id=\"python\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Install<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Highcharts Core for Python<\/h5>\n\n\n\n<p>To install Highcharts Core for Python, just execute:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>$ pip install highcharts-core<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Highcharts Stock for Python<\/h5>\n\n\n\n<p>To install Highcharts Stock for Python, just execute:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>$ pip install highcharts-stock<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Highcharts Maps for Python<\/h5>\n\n\n\n<p>To install Highcharts Maps for Python, just execute:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>$ pip install highcharts-maps<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Highcharts Gantt for Python<\/h5>\n\n\n\n<p>To install Highcharts Gantt for Python, just execute:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>$ pip install highcharts-gantt<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Documentation<\/h4>\n\n\n\n<p>Documentation:&nbsp;<a href=\"https:\/\/highchartspython.com\/documentation\/\">https:\/\/highchartspython.com\/documentation\/<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\" id=\"highchartsdashboards\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-87c4da3d wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-3ec2841e wp-block-group-is-layout-flex\">\n<h3 class=\"wp-block-heading\" id=\"highcharts-dashboards\">Installing Highcharts Dashboards<\/h3>\n\n\n\n<p>Highcharts Dashboards is a development library pre-loaded with time-saving features that will save you hours of development time on your dashboard projects.<\/p>\n\n\n\n<p class=\"has-font-size-100-font-size\">Highcharts usage is covered by our <a href=\"http:\/\/shop.highcharts.com\/license-eula\">End User License Agreement<\/a>. Production and commercial use require a commercial license.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-3ec2841e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Quick start with the Highcharts CDN<\/h4>\n\n\n\n<p>Use our public CDN for local development, product evaluation, and other non-production use. If you\u2019re building something for production, see our <a href=\"https:\/\/shop.highcharts.com\/\">licensing options<\/a> for the correct way to deploy Highcharts. Details about CDN usage are covered in our <a href=\"https:\/\/shop.highcharts.com\/license-eula-1.0#2.1\">End User License Agreement<\/a>.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/dashboards.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-3ec2841e wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Install with NPM<\/h4>\n\n\n\n<p><a href=\"https:\/\/www.npmjs.com\/package\/@highcharts\/dashboards\">The official Highcharts Dashboards NPM package<\/a> comes with support for CommonJS. Read more about <a href=\"https:\/\/www.highcharts.com\/docs\/dashboards\/installation\">how to install Highcharts Dashboards with NPM.<\/a><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/dashboards --save<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7fc3d43a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-f5bb311e wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Load as modules or create your own build<\/h4>\n\n\n\n<p>Highcharts can also be loaded as ECMAScript modules from our CDN, as AMD modules, as UMD modules or as TypeScript. You can also create your own tailored build to include only the features you need.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/www.highcharts.com\/docs\/getting-started\/installation\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/www.highcharts.com\/docs\/getting-started\/installation\" aria-label=\"Read more in the docs\">Read more in the docs<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 11H8m2 4H8m8-8H8m12-.2v10.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h6.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C20 4.28 20 5.12 20 6.8\"><\/path><\/svg><\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-f5bb311e wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Download Our Libaries<\/h4>\n\n\n\n<p>The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Dashboards-4.1.0.zip\" class=\"hc-button hc-button--white hc-button--size-300\" data-link-template=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Dashboards-4.1.0.zip\" data-hc-preset-group=\"hc_twentyfour_products_cache_formatted_short\" data-hc-preset-key=\"Dashboards\" aria-label=\"Dashboards 4.1.0\">Dashboards 4.1.0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-5-5 5m0 0-5-5m5 5V3\"><\/path><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\" id=\"highchartsgrid\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-30a70405 wp-block-group-is-layout-flex\">\n<h3 class=\"wp-block-heading\" id=\"highcharts-grid\">Installing Highcharts Grid<\/h3>\n\n\n\n<p>These basic instructions are for both Highcharts Grid Lite and Pro. Please also refer to the full instructions in the <a href=\"https:\/\/www.highcharts.com\/docs\/grid\/installation\">installation documentation article<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-fe9cc265 wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Quick start with the jsDelivr CDN<\/h4>\n\n\n\n<p>Use the jsDelivr CDN for local development, product evaluation, and other non-production use. License terms and permitted usage depend on the Grid edition you\u2019re using. See the sections below for details.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-fe9cc265 wp-block-group-is-layout-flex\">\n<p><strong>Grid Lite<\/strong><\/p>\n\n\n\n<p>Grid Lite is free to use. Usage is governed by the Grid Lite <a href=\"http:\/\/shop.highcharts.com\/license-eula\">End User License Agreement<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@highcharts\/grid-lite\/grid-lite.js\"&gt;&lt;\/script&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@highcharts\/grid-lite\/css\/grid.css\"&gt;&lt;\/link&gt; <\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><strong>Grid Pro<\/strong> (Production and commercial use require a paid license)<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@highcharts\/grid-pro\/grid-pro.js\"&gt;&lt;\/script&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@highcharts\/grid-pro\/css\/grid-pro.css\"&gt;&lt;\/link&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Install from NPM<\/h4>\n\n\n\n<p>The official Highcharts <a href=\"https:\/\/www.npmjs.com\/package\/@highcharts\/grid-lite\">Grid Lite<\/a> and <a href=\"https:\/\/www.npmjs.com\/package\/@highcharts\/grid-pro\">Grid Pro<\/a> NPM package comes with support for CommonJS. Read more about <a href=\"https:\/\/www.highcharts.com\/docs\/grid\/installation\">how to install Highcharts Grid with NPM<\/a>.<\/p>\n\n\n\n<p><strong>Grid Lite<\/strong><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/grid-lite<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><strong>Grid Pro<\/strong> (requires a paid license) <\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/grid-pro<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--transparent hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7fc3d43a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-f5bb311e wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Load as modules or create your own build<\/h4>\n\n\n\n<p>Highcharts Grid can also be loaded as ECMAScript modules from the CDN, as AMD modules, as UMD modules or as TypeScript.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/www.highcharts.com\/docs\/getting-started\/installation\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/www.highcharts.com\/docs\/getting-started\/installation\" aria-label=\"Read more in the docs\">Read more in the docs<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 11H8m2 4H8m8-8H8m12-.2v10.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h6.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C20 4.28 20 5.12 20 6.8\"><\/path><\/svg><\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-f5bb311e wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Download Our Libaries<\/h4>\n\n\n\n<p>The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Grid-Lite-2.2.0.zip\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Grid-Lite-2.2.0.zip\" data-hc-preset-group=\"hc_twentyfour_products_cache_formatted_short\" data-hc-preset-key=\"Grid Lite\" aria-label=\"Grid Lite 2.2.0\">Grid Lite 2.2.0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-5-5 5m0 0-5-5m5 5V3\"><\/path><\/svg><\/a><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Grid-Pro-2.2.0.zip\" class=\"hc-button hc-button--transparent hc-button--size-300\" data-link-template=\"https:\/\/code.highcharts.com\/zips\/Highcharts-Grid-Pro-2.2.0.zip\" data-hc-preset-group=\"hc_twentyfour_products_cache_formatted_short\" data-hc-preset-key=\"Grid Pro\" aria-label=\"Grid Pro 2.2.0\">Grid Pro 2.2.0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-5-5 5m0 0-5-5m5 5V3\"><\/path><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark hs-box--desktop-hidden\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\" id=\"blog-newsletter\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-3dd7c42b wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-fc054d2d wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon hc-icon--size-m\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m13.744 2.634 7.528 4.893c.266.173.399.26.495.374a1 1 0 0 1 .189.348c.044.143.044.302.044.62V16.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C19.72 21 18.88 21 17.2 21H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 18.72 2 17.88 2 16.2V8.868c0-.317 0-.476.044-.62a1 1 0 0 1 .189-.347c.096-.115.229-.201.495-.374l7.528-4.893m3.488 0c-.631-.41-.947-.616-1.287-.696a2 2 0 0 0-.914 0c-.34.08-.656.285-1.287.696m3.488 0 6.192 4.024c.688.448 1.032.671 1.151.955a1 1 0 0 1 0 .774c-.12.284-.463.507-1.15.955l-6.193 4.024c-.631.41-.947.616-1.287.696-.3.07-.613.07-.914 0-.34-.08-.656-.285-1.287-.696L4.064 9.342c-.688-.448-1.032-.671-1.151-.955a1 1 0 0 1 0-.774c.12-.284.463-.507 1.15-.955l6.193-4.024M21.5 19l-6.643-6m-5.714 0L2.5 19\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m13.744 2.634 7.528 4.893c.266.173.399.26.495.374a1 1 0 0 1 .189.348c.044.143.044.302.044.62V16.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C19.72 21 18.88 21 17.2 21H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 18.72 2 17.88 2 16.2V8.868c0-.317 0-.476.044-.62a1 1 0 0 1 .189-.347c.096-.115.229-.201.495-.374l7.528-4.893m3.488 0c-.631-.41-.947-.616-1.287-.696a2 2 0 0 0-.914 0c-.34.08-.656.285-1.287.696m3.488 0 6.192 4.024c.688.448 1.032.671 1.151.955a1 1 0 0 1 0 .774c-.12.284-.463.507-1.15.955l-6.193 4.024c-.631.41-.947.616-1.287.696-.3.07-.613.07-.914 0-.34-.08-.656-.285-1.287-.696L4.064 9.342c-.688-.448-1.032-.671-1.151-.955a1 1 0 0 1 0-.774c.12-.284.463-.507 1.15-.955l6.193-4.024M21.5 19l-6.643-6m-5.714 0L2.5 19\"><\/path><\/svg><\/span><\/span><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Join our newsletter<\/h4>\n<\/div>\n\n\n\n<p>Get Highcharts updates, expert tips, and optimization tricks in your inbox. We\u2019ll never share your information.<\/p>\n\n\n<style id=\"wpforms-css-vars-23361\">\n\t\t\t\t#wpforms-23361 {\n\t\t\t\t--wpforms-field-size-input-height: 43px;\n--wpforms-field-size-input-spacing: 15px;\n--wpforms-field-size-font-size: 16px;\n--wpforms-field-size-line-height: 19px;\n--wpforms-field-size-padding-h: 14px;\n--wpforms-field-size-checkbox-size: 16px;\n--wpforms-field-size-sublabel-spacing: 5px;\n--wpforms-field-size-icon-size: 1;\n--wpforms-label-size-font-size: 16px;\n--wpforms-label-size-line-height: 19px;\n--wpforms-label-size-sublabel-font-size: 14px;\n--wpforms-label-size-sublabel-line-height: 17px;\n--wpforms-button-size-font-size: 17px;\n--wpforms-button-size-height: 41px;\n--wpforms-button-size-padding-h: 15px;\n--wpforms-button-size-margin-top: 10px;\n--wpforms-container-shadow-size-box-shadow: none;\n\t\t\t}\n\t\t\t<\/style><div class=\"wpforms-container wpforms-container-full hsform wpforms-render-modern\" id=\"wpforms-23361\"><form id=\"wpforms-form-23361\" class=\"wpforms-validate wpforms-form wpforms-ajax-form\" data-formid=\"23361\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/blog\/wp-json\/wp\/v2\/pages\/17210\" data-token=\"e09105e2a9a3aa25a39de92b20389d9c\" data-token-time=\"1775658626\"><noscript class=\"wpforms-error-noscript\">Please enable JavaScript in your browser to complete this form.<\/noscript><div id=\"wpforms-error-noscript\" style=\"display: none;\">Please enable JavaScript in your browser to complete this form.<\/div><div class=\"wpforms-field-container\"><div id=\"wpforms-23361-field_1-container\" class=\"wpforms-field wpforms-field-email\" data-field-id=\"1\"><label class=\"wpforms-field-label\" for=\"wpforms-23361-field_1\">Email <span class=\"wpforms-required-label\" aria-hidden=\"true\">*<\/span><\/label><input type=\"email\" id=\"wpforms-23361-field_1\" class=\"wpforms-field-large wpforms-field-required\" name=\"wpforms[fields][1]\" placeholder=\"Email address\" spellcheck=\"false\" aria-errormessage=\"wpforms-23361-field_1-error\" required><\/div><div id=\"wpforms-23361-field_2-container\" class=\"wpforms-field wpforms-field-hidden ac-form-id-container\" data-field-id=\"2\"><input type=\"hidden\" id=\"wpforms-23361-field_2\" name=\"wpforms[fields][2]\" value=\"5\"><\/div><div id=\"wpforms-23361-field_3-container\" class=\"wpforms-field wpforms-field-hidden ac-tags-container\" data-field-id=\"3\"><input type=\"hidden\" id=\"wpforms-23361-field_3\" name=\"wpforms[fields][3]\"><\/div><\/div><!-- .wpforms-field-container --><div class=\"wpforms-recaptcha-container wpforms-is-turnstile\" ><div class=\"wpforms-turnstile\" data-sitekey=\"0x4AAAAAAAw4EP3QFig1aA4x\" data-action=\"FormID-23361\"><\/div><input type=\"text\" name=\"g-recaptcha-hidden\" class=\"wpforms-recaptcha-hidden\" style=\"position:absolute!important;clip:rect(0,0,0,0)!important;height:1px!important;width:1px!important;border:0!important;overflow:hidden!important;padding:0!important;margin:0!important;\" data-rule-turnstile=\"1\"><\/div><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"23361\"><input type=\"hidden\" name=\"page_title\" value=\"\"><input type=\"hidden\" name=\"page_url\" value=\"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/pages\/17210\"><input type=\"hidden\" name=\"url_referer\" value=\"\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-23361\" class=\"wpforms-submit hc-button hs-submit\" data-alt-text=\"Sending\" data-submit-text=\"Submit\" aria-live=\"assertive\" value=\"wpforms-submit\">Submit<\/button><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/plugins\/wpforms\/assets\/images\/submit-spin.svg\" class=\"wpforms-submit-spinner\" style=\"display: none;\" width=\"26\" height=\"26\" alt=\"Loading\"><\/div><\/form><\/div>  <!-- .wpforms-container -->\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent help-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light transparent\" style=\"padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-cf05694f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-08c01c1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:20%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2025\/10\/21111907\/green.png\" alt=\"\" class=\"wp-image-27664\" style=\"aspect-ratio:1;object-fit:cover\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-f5bb311e wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<h3 class=\"wp-block-heading\">Need more help getting started? Check out these resources.<\/h3>\n\n\n\n<p>Highcharts has the most significant developer community of any premium charting library. Our community members are eager to offer additional assistance, platform-specific implementation advice and inspiration when you need it.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-hs-list hs-list-block two-columns\" data-bullet-type=\"icon\" style=\"--icon-width:24px;--icon-height:24px;--item-spacing:var(--margin-size-16)\"><ol class=\"hs-list\"><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Stars02\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.5 22v-5m0-10V2M2 4.5h5m-5 15h5M13 3l-1.734 4.509c-.282.733-.423 1.1-.643 1.408a3 3 0 0 1-.706.707c-.308.219-.675.36-1.408.642L4 12l4.509 1.734c.733.282 1.1.423 1.408.643.273.194.512.433.707.706.219.308.36.675.642 1.408L13 21l1.734-4.509c.282-.733.423-1.1.643-1.408.194-.273.433-.512.706-.707.308-.219.675-.36 1.408-.642L22 12l-4.509-1.734c-.733-.282-1.1-.423-1.408-.642a3 3 0 0 1-.706-.707c-.22-.308-.36-.675-.643-1.408z\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Stars02\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.5 22v-5m0-10V2M2 4.5h5m-5 15h5M13 3l-1.734 4.509c-.282.733-.423 1.1-.643 1.408a3 3 0 0 1-.706.707c-.308.219-.675.36-1.408.642L4 12l4.509 1.734c.733.282 1.1.423 1.408.643.273.194.512.433.707.706.219.308.36.675.642 1.408L13 21l1.734-4.509c.282-.733.423-1.1.643-1.408.194-.273.433-.512.706-.707.308-.219.675-.36 1.408-.642L22 12l-4.509-1.734c-.733-.282-1.1-.423-1.408-.642a3 3 0 0 1-.706-.707c-.22-.308-.36-.675-.643-1.408z\"><\/path><\/svg><\/span><\/span><\/span><a href=\"https:\/\/www.highcharts.com\/chat\/gpt\/\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Highcharts GPT<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Book Open01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 21-.1-.15c-.695-1.042-1.042-1.563-1.5-1.94a4 4 0 0 0-1.378-.737C8.453 18 7.827 18 6.575 18H5.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C2 16.48 2 15.92 2 14.8V6.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C3.52 3 4.08 3 5.2 3h.4c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C12 6.04 12 7.16 12 9.4M12 21V9.4M12 21l.1-.15c.695-1.042 1.042-1.563 1.5-1.94a4 4 0 0 1 1.378-.737C15.547 18 16.173 18 17.425 18H18.8c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C22 16.48 22 15.92 22 14.8V6.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C20.48 3 19.92 3 18.8 3h-.4c-2.24 0-3.36 0-4.216.436a4 4 0 0 0-1.748 1.748C12 6.04 12 7.16 12 9.4\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Book Open01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 21-.1-.15c-.695-1.042-1.042-1.563-1.5-1.94a4 4 0 0 0-1.378-.737C8.453 18 7.827 18 6.575 18H5.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C2 16.48 2 15.92 2 14.8V6.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C3.52 3 4.08 3 5.2 3h.4c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C12 6.04 12 7.16 12 9.4M12 21V9.4M12 21l.1-.15c.695-1.042 1.042-1.563 1.5-1.94a4 4 0 0 1 1.378-.737C15.547 18 16.173 18 17.425 18H18.8c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C22 16.48 22 15.92 22 14.8V6.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C20.48 3 19.92 3 18.8 3h-.4c-2.24 0-3.36 0-4.216.436a4 4 0 0 0-1.748 1.748C12 6.04 12 7.16 12 9.4\"><\/path><\/svg><\/span><\/span><\/span><a href=\"www.highcharts.com\/docs\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Documentation<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Message Text Square01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 8.5h5M7 12h8m-5.316 6H16.2c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 15.72 21 14.88 21 13.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C18.72 3 17.88 3 16.2 3H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.28 3 6.12 3 7.8v12.535c0 .533 0 .8.11.937a.5.5 0 0 0 .39.188c.176 0 .384-.167.8-.5l2.385-1.908c.488-.39.731-.585 1.002-.724q.363-.184.762-.267C8.748 18 9.06 18 9.684 18\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Message Text Square01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 8.5h5M7 12h8m-5.316 6H16.2c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 15.72 21 14.88 21 13.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C18.72 3 17.88 3 16.2 3H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.28 3 6.12 3 7.8v12.535c0 .533 0 .8.11.937a.5.5 0 0 0 .39.188c.176 0 .384-.167.8-.5l2.385-1.908c.488-.39.731-.585 1.002-.724q.363-.184.762-.267C8.748 18 9.06 18 9.684 18\"><\/path><\/svg><\/span><\/span><\/span><a href=\"https:\/\/www.highcharts.com\/forum\/\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Highcharts forum<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Currency Dollar Circle\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.5 14.667A2.333 2.333 0 0 0 10.833 17H13a2.5 2.5 0 0 0 0-5h-2a2.5 2.5 0 0 1 0-5h2.167A2.333 2.333 0 0 1 15.5 9.333M12 5.5V7m0 10v1.5M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Currency Dollar Circle\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.5 14.667A2.333 2.333 0 0 0 10.833 17H13a2.5 2.5 0 0 0 0-5h-2a2.5 2.5 0 0 1 0-5h2.167A2.333 2.333 0 0 1 15.5 9.333M12 5.5V7m0 10v1.5M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"><\/path><\/svg><\/span><\/span><\/span><a href=\"https:\/\/shop.highcharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">License pricing<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Life Buoy01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.136 9.136 4.93 4.93m0 14.142 4.239-4.239m5.693.032 4.207 4.207m0-14.142-4.24 4.24M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-6 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Life Buoy01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.136 9.136 4.93 4.93m0 14.142 4.239-4.239m5.693.032 4.207 4.207m0-14.142-4.24 4.24M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-6 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0\"><\/path><\/svg><\/span><\/span><\/span><a href=\"www.highcharts.com\/support\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Highcharts Support Portal<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Tool01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.631 7.631c-.396-.396-.594-.594-.668-.822a1 1 0 0 1 0-.618c.074-.228.272-.426.668-.822L18.47 2.53a6 6 0 0 0-8.3 6.895c.12.49.179.734.168.888a.85.85 0 0 1-.11.392c-.07.138-.207.274-.48.547L3.5 17.5a2.121 2.121 0 0 0 3 3l6.248-6.248c.273-.273.41-.41.547-.48a.85.85 0 0 1 .392-.11c.154-.011.399.049.888.168a6 6 0 0 0 6.895-8.3l-2.84 2.84c-.396.396-.594.594-.822.668a1 1 0 0 1-.618 0c-.228-.074-.426-.272-.822-.668z\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Tool01\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.631 7.631c-.396-.396-.594-.594-.668-.822a1 1 0 0 1 0-.618c.074-.228.272-.426.668-.822L18.47 2.53a6 6 0 0 0-8.3 6.895c.12.49.179.734.168.888a.85.85 0 0 1-.11.392c-.07.138-.207.274-.48.547L3.5 17.5a2.121 2.121 0 0 0 3 3l6.248-6.248c.273-.273.41-.41.547-.48a.85.85 0 0 1 .392-.11c.154-.011.399.049.888.168a6 6 0 0 0 6.895-8.3l-2.84 2.84c-.396.396-.594.594-.822.668a1 1 0 0 1-.618 0c-.228-.074-.426-.272-.822-.668z\"><\/path><\/svg><\/span><\/span><\/span><a href=\"www.highcharts.com\/support\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Custom implementation service<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/stackoverflowSoMe.svg\" alt=\"Stackoverflow So Me\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/stackoverflow.svg\" alt=\"StackOverflow\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><a href=\"https:\/\/stackoverflow.com\/tags\/highcharts\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Highcharts on StackOverflow<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/github.svg\" alt=\"GitHub\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/githubSoMeDark.svg\" alt=\"Github So Me Dark\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><a href=\"https:\/\/github.com\/highcharts\/highcharts\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Higcharts on Github<\/p><\/a><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\"><span class=\"hc-icon hc-icon--size-s\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Pie Chart02\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.2 14c.277 0 .416 0 .528.062a.53.53 0 0 1 .22.243c.05.117.037.243.012.494A8 8 0 1 1 9.201 6.04c.251-.025.376-.038.494.012a.53.53 0 0 1 .243.22c.062.112.062.251.062.528v6.4c0 .28 0 .42.055.527a.5.5 0 0 0 .218.218c.107.055.247.055.527.055zM14 2.8c0-.277 0-.416.062-.528a.53.53 0 0 1 .243-.22c.117-.05.243-.037.494-.012A8 8 0 0 1 21.96 9.2c.025.251.038.376-.012.494a.53.53 0 0 1-.22.243c-.113.062-.251.062-.528.062h-6.4c-.28 0-.42 0-.527-.055a.5.5 0 0 1-.218-.218C14 9.62 14 9.48 14 9.2z\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-label=\"Pie Chart02\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.2 14c.277 0 .416 0 .528.062a.53.53 0 0 1 .22.243c.05.117.037.243.012.494A8 8 0 1 1 9.201 6.04c.251-.025.376-.038.494.012a.53.53 0 0 1 .243.22c.062.112.062.251.062.528v6.4c0 .28 0 .42.055.527a.5.5 0 0 0 .218.218c.107.055.247.055.527.055zM14 2.8c0-.277 0-.416.062-.528a.53.53 0 0 1 .243-.22c.117-.05.243-.037.494-.012A8 8 0 0 1 21.96 9.2c.025.251.038.376-.012.494a.53.53 0 0 1-.22.243c-.113.062-.251.062-.528.062h-6.4c-.28 0-.42 0-.527-.055a.5.5 0 0 1-.218-.218C14 9.62 14 9.48 14 9.2z\"><\/path><\/svg><\/span><\/span><\/span><a href=\"https:\/\/www.highcharts.com\/chartchooser\/\" target=\"_blank\" rel=\"noopener noreferrer\"><p class=\"hs-list__text \" style=\"text-decoration:underline\">Chartchooser<\/p><\/a><\/li><\/ol><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":232,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"hs-page","meta":{"meta_title":"Download Highcharts | JavaScript charting library and packages","meta_description":"Download Highcharts JavaScript charting libraries, including Core, Stock, Maps, Gantt, Dashboards, and Grid. Get the latest versions, packages, and release details.","hc_selected_options":["hc_twentyfour_products_cache_formatted_short"],"footnotes":""},"coauthors":[761],"class_list":["post-17210","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/pages\/17210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/232"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=17210"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/pages\/17210\/revisions"}],"predecessor-version":[{"id":29797,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/pages\/17210\/revisions\/29797"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=17210"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}