CINXE.COM

<!DOCTYPE html><html lang="en" data-astro-cid-sckkx6r4 style="--lightModeCSSUrl: url("/charts/images/sun.svg");--darkModeCSSUrl: url("/charts/images/moon.svg");"> <head><meta charset="UTF-8"><meta name="description" content="Create beautiful, high-performance JavaScript Charts quickly with AG Charts. Free forever; upgrade to enterprise for advanced features and dedicated support."><meta name="viewport" content="width=device-width"><link rel="icon" type="image/png" sizes="196x196" href="/charts/_astro/favicon-196.Bimfhk9M.png"><link rel="icon" type="image/png" sizes="192x192" href="/charts/_astro/favicon-192.BPgSS0FN.png"><link rel="icon" type="image/png" sizes="180x180" href="/charts/_astro/favicon-180.DPLMo2LR.png"><link rel="icon" type="image/png" sizes="167x167" href="/charts/_astro/favicon-167.I4Tpyy48.png"><link rel="icon" type="image/png" sizes="152x152" href="/charts/_astro/favicon-152.cc6y96U4.png"><link rel="icon" type="image/png" sizes="128x128" href="/charts/_astro/favicon-128.DBIUHlVo.png"><link rel="icon" type="image/png" sizes="32x32" href="/charts/_astro/favicon-32.WDuB-104.png"><link rel="apple-touch-icon" sizes="180x180" href="/charts/_astro/favicon-180-touch.DLSK8QDR.png"><link rel="apple-touch-icon" sizes="167x167" href="/charts/_astro/favicon-167-touch.BlG15XMf.png"><link rel="apple-touch-icon" sizes="152x152" href="/charts/_astro/favicon-152-touch.Cer8BKXE.png"><meta name="generator" content="Astro v4.16.8"><title>JavaScript Charts | AG Charts</title><link rel="canonical" href="https://www.ag-grid.com/charts"><link rel="sitemap" type="application/xml" title="Sitemap" href="/charts/sitemap-index.xml"><meta property="og:url" content="https://www.ag-grid.com/charts"><meta property="og:type" content="website"><meta property="og:title" content="JavaScript Charts | AG Charts"><meta property="og:description" content="Create beautiful, high-performance JavaScript Charts quickly with AG Charts. Free forever; upgrade to enterprise for advanced features and dedicated support."><meta property="og:image" content="/charts/images/ag-charts-social.png"><meta name="twitter:card" content="summary_large_image"><meta property="twitter:domain" content="www.ag-grid.com"><meta property="twitter:url" content="https://www.ag-grid.com/charts"><meta name="twitter:title" content="JavaScript Charts | AG Charts"><meta name="twitter:description" content="Create beautiful, high-performance JavaScript Charts quickly with AG Charts. Free forever; upgrade to enterprise for advanced features and dedicated support."><meta name="twitter:image" content="/charts/images/ag-charts-social.png"><script>(function(){const googleTagManagerId = "GTM-5GWLR86Q"; (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer',googleTagManagerId);})();</script><script defer data-domain="ag-grid.com" src="https://plausible.io/js/script.js"></script> <script> window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); }; </script><script async type="text/javascript" src="https://secure.sharpinspiration-instinct.com/js/793321.js"></script><noscript><img alt="" src="https://secure.sharpinspiration-instinct.com/793321.png" style="display:none;; --lightModeCSSUrl: url("/charts/images/sun.svg");--darkModeCSSUrl: url("/charts/images/moon.svg");" data-astro-cid-sckkx6r4></noscript><link rel="stylesheet" href="/charts/_astro/index.DvTSvls4.css"> <link rel="stylesheet" href="/charts/_astro/events.CftEvaNv.css"> <style>._whatsNewContainer_171yb_1{width:100%}@media screen and (min-width: 1052px){._whatsNewContainer_171yb_1{width:calc(var(--layout-width-9-12));padding-top:40px}}@media screen and (min-width: 1475px){._whatsNewContainer_171yb_1{width:calc(var(--layout-width-9-12) + 64px)}}._versions_171yb_16{--versions-gap: 16px;container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--versions-gap);margin-top:32px;margin-bottom:128px}._version_171yb_16{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;width:100%;padding:16px 16px 8px;border-radius:8px;background-color:var(--color-bg-primary);border:1px solid var(--color-border-secondary);gap:16px}@container (min-width: 640px){._version_171yb_16{width:calc(50% - var(--versions-gap) / 2)}}@container (min-width: 960px){._version_171yb_16{width:calc(33.3333333333% - var(--versions-gap) / 3 * 2)}}[data-dark-mode=true] ._version_171yb_16{background-color:var(--color-util-gray-200)}._version_171yb_16 p{margin-top:8px;margin-bottom:4px;font-size:1rem}[data-dark-mode=true] ._version_171yb_16 p{color:var(--color-text-secondary)}._version_171yb_16 ul{padding-top:.2rem;padding-bottom:.75rem;padding-left:1.1rem;margin-bottom:16px;color:var(--color-util-brand-500);font-weight:var(--text-semibold)}[data-dark-mode=true] ._version_171yb_16 ul{color:var(--color-util-brand-700)}._version_171yb_16 ul a{text-decoration:none}._version_171yb_16 ul a:hover{text-decoration:underline}._version_171yb_16 header{display:flex;flex-direction:column;gap:8px}._version_171yb_16 header b{font-size:var(--text-fs-lg);font-weight:var(--text-semibold)}._version_171yb_16 header a{text-decoration:none}._version_171yb_16 header a:hover{text-decoration:underline}._date_171yb_94{color:var(--color-text-tertiary);opacity:.7}[data-dark-mode=true] ._date_171yb_94{opacity:1}._majorText_171yb_102{border:1px solid var(--color-util-gray-600);border-radius:var(--radius-4xl);color:var(--color-util-gray-600);padding:2px 8px}._latestTag_171yb_109{padding:2px 8px;border-radius:var(--radius-4xl);border:1px solid var(--color-logo-orange);color:var(--color-logo-orange);font-weight:var(--text-semibold)}._line_171yb_117{border-bottom:1px solid var(--color-border-primary)}._topheader_171yb_121{display:flex;flex-direction:column;gap:8px}._description_171yb_127{font-size:18px}._changelog_171yb_131{width:100%;display:flex;justify-content:center}[data-dark-mode=true] ._changelog_171yb_131{background-color:var(--color-util-gray-300)}a._buttonSecondary_171yb_140{width:100%;display:flex;justify-content:center;margin-bottom:8px;border:1px solid var(--color-border-secondary)}[data-dark-mode=true] a._buttonSecondary_171yb_140{background-color:var(--color-util-gray-300)}._bloglink_171yb_151{width:100%;display:flex;justify-content:left;padding-top:4px;padding-bottom:4px;color:var(--color-link)}._flex_171yb_160{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:8px}._flex_171yb_160 b{color:var(--color-fg-primary)}._flex_171yb_160 a{width:auto} .logo-mark .aqua{fill:var(--color-logo-aqua)}.logo-mark .orange{fill:var(--color-logo-orange)}.logo-mark .red{fill:var(--color-logo-red)}.logo-mark .grey{fill:var(--color-logo-grey)}.logo-mark rect{animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused}.logo-mark:not(._bounce_1oiud_18,._loading_1oiud_18) rect{transform:translate(0)}._bounce_1oiud_18 rect[class*=right]{animation-name:_logo-mark-bounce-right_1oiud_1;animation-duration:1.15s;animation-play-state:running}._bounce_1oiud_18 rect[class*=right].right-2{animation-delay:.1916666667s}._bounce_1oiud_18 rect[class*=right].right-3{animation-delay:.3833333333s}._loading_1oiud_18 rect[class*=right]{animation-name:_logo-mark-bounce-right_1oiud_1;animation-duration:1.25s;animation-play-state:running}._loading_1oiud_18 rect[class*=right].right-2{animation-delay:.2083333333s}._loading_1oiud_18 rect[class*=right].right-3{animation-delay:.4166666667s}._loading_1oiud_18 rect[class*=left]{animation-name:_logo-mark-bounce-left_1oiud_1;animation-duration:1.25s;animation-play-state:running}._loading_1oiud_18 rect[class*=left].left-3{animation-delay:.625s}._loading_1oiud_18 rect[class*=left].left-2{animation-delay:.8333333333s}._loading_1oiud_18 rect[class*=left].left-1{animation-delay:1.0416666667s}@keyframes _logo-mark-bounce-right_1oiud_1{0%{transform:translate(0)}16.6666%{transform:translate(3px)}33.3333%{transform:translate(0)}}@keyframes _logo-mark-bounce-left_1oiud_1{0%{transform:translate(0)}16.6666%{transform:translate(-3px)}33.3333%{transform:translate(0)}} .container[data-astro-cid-rewqq5du]{position:relative}.container[data-astro-cid-rewqq5du] .logomark{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%) scale(2)}.isInline[data-astro-cid-rewqq5du]{margin-bottom:16px}.tabs-content .example-runner-outer[data-astro-cid-rewqq5du]{margin-bottom:0}@media screen and (min-width: 1475px){.largeExamples .example-runner-outer[data-astro-cid-rewqq5du]{width:calc(139% - 40px)}} ._cta_13t5y_1{position:relative}._cta_13t5y_1 a,._cta_13t5y_1 button{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:var(--radius-sm);transition:color .25s ease-in-out,background-color .25s ease-in-out;cursor:pointer}._cta_13t5y_1 a:hover,._cta_13t5y_1 button:hover{background-color:var(--color-util-brand-100)}._cta_13t5y_1 a:focus-visible,._cta_13t5y_1 button:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-button-primary-shadow-focus),var(--shadow-xs)}._cta_13t5y_1 a svg,._cta_13t5y_1 button svg{--icon-size: 1.25em;fill:var(--color-link);transform:translate(1px,.75px);transition:fill .25s ease-in-out}li:first-child ._cta_13t5y_1 a svg,li:first-child ._cta_13t5y_1 button svg{--icon-size: 1.35em}[data-dark-mode=true] ._cta_13t5y_1 a:hover,[data-dark-mode=true] ._cta_13t5y_1 button:hover{background-color:var(--color-util-brand-50)}@supports (-webkit-touch-callout: none){._cta_13t5y_1 button{display:none}}._tooltip_13t5y_46{--tooltip-background: var(--color-fg-primary);position:absolute;display:block;color:var(--color-bg-primary);top:-44px;left:50%;padding:4px 16px;white-space:nowrap;font-weight:600;background-color:var(--tooltip-background);border-radius:6px;transform:translate(-50%,4px);opacity:0;pointer-events:none;transition-delay:0;transition:opacity .165s ease-in,transform .165s ease-in;z-index:1}._tooltip_13t5y_46:before{content:"";position:absolute;background-color:var(--tooltip-background);width:16px;height:16px;transform:rotate(45deg);bottom:-7px;left:calc(50% - 8px);border-radius:3px;z-index:-1}._cta_13t5y_1:hover ._tooltip_13t5y_46{opacity:1;transform:translate(-50%);transition:opacity .33s ease-in,transform .33s ease-in;transition-delay:.165s}[data-dark-mode=true] ._tooltip_13t5y_46{--tooltip-background: var(--color-bg-secondary);color:var(--color-fg-primary);box-shadow:0 -4px 16px #0006} </style> <link rel="stylesheet" href="/charts/_astro/_pageName_.CZ8Nn9nG.css"> <style>._clipboardButtonOuter_8cpmg_1{--clipboard-button-bg: var(--color-code-background);--clipboard-button-fg: var(--color-fg-tertiary);display:flex;align-items:center;position:absolute;top:4px;right:4px;opacity:0;z-index:2;transition:opacity .33s ease-in-out}pre:hover ._clipboardButtonOuter_8cpmg_1,._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{opacity:1}._clipboardButtonOuter_8cpmg_1:hover{--clipboard-button-fg: var(--color-util-brand-400)}[data-dark-mode=true] ._clipboardButtonOuter_8cpmg_1:hover{--clipboard-button-fg: var(--color-link-hover)}._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{--clipboard-button-bg: var(--color-util-gray-700);--clipboard-button-fg: var(--color-fg-white)}[data-dark-mode=true] ._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{--clipboard-button-fg: var(--color-bg-primary)}.example-runner-outer ._clipboardButtonOuter_8cpmg_1{right:20px}._clipboardButton_8cpmg_1,._clipboardButtonCopied_8cpmg_34{display:flex;align-items:center;height:32px;background-color:var(--clipboard-button-bg);border-top:1px solid var(--color-border-primary);border-bottom:1px solid var(--color-border-primary)}._clipboardButton_8cpmg_1{width:calc(32px - var(--radius-sm));border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);border-right:1px solid var(--color-border-primary);cursor:pointer;transition:background-color .25s ease-in-out}._clipboardButton_8cpmg_1 svg{--icon-size: 22px;--icon-color: var(--clipboard-button-fg);transition:fill .25s ease-in-out}._clipboardButtonCopiedOuter_8cpmg_57{overflow:hidden}._clipboardButtonCopied_8cpmg_34{font-size:var(--text-fs-sm);font-weight:var(--text-semibold);padding-left:8px;padding-right:8px;border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);border-left:1px solid var(--color-border-primary);font-weight:var(--text-regular);color:var(--clipboard-button-fg);transition:background-color .25s ease-in-out,color .25s ease-in-out;cursor:pointer} ._icon_1jqgc_1{fill:var(--icon-color, var(--color-fg-primary));width:var(--icon-size);height:var(--icon-size);transition:fill .25s ease-in-out} ._alert_1p97w_1{--icon-size: 1.5rem;display:flex;gap:8px;align-items:center;padding:8px 8px 8px 12px;background-color:var(--color-util-brand-50);border-radius:var(--radius-md);border:1px solid var(--color-util-brand-100);color:var(--color-util-brand-700);margin-top:20px;margin-bottom:32px}[data-dark-mode=true] ._alert_1p97w_1{background-color:color-mix(in srgb,var(--color-util-brand-50),var(--color-bg-primary) 60%)}._alert_1p97w_1 .icon{align-self:flex-start;position:relative;flex-shrink:0;fill:var(--color-util-brand-700)}._alert_1p97w_1 p :last-child{margin-bottom:0}._alert_1p97w_1 a{font-weight:var(--text-semibold);text-decoration:underline}._alert_1p97w_1 kbd{margin:0;padding-top:.075em;padding-bottom:.25em}._alert_1p97w_1._idea_1p97w_36 .icon{fill:orange}._alert_1p97w_1._warning_1p97w_40{color:var(--color-util-warning-700);background-color:var(--color-util-warning-50);border-color:color-mix(in srgb,var(--color-util-warning-600) 20%,var(--color-bg-primary))}[data-dark-mode=true] ._alert_1p97w_1._warning_1p97w_40{border-color:color-mix(in srgb,var(--color-util-warning-600) 30%,var(--color-bg-primary))}._alert_1p97w_1._warning_1p97w_40 .icon{fill:var(--color-util-warning-700)}._alert_1p97w_1._success_1p97w_52{color:var(--color-success);background-color:color-mix(in srgb,var(--color-success) 6%,var(--color-bg-primary));border-color:color-mix(in srgb,var(--color-success) 20%,var(--color-bg-primary))}[data-dark-mode=true] ._alert_1p97w_1._success_1p97w_52{background-color:color-mix(in srgb,var(--color-success) 10%,var(--color-bg-primary));border-color:color-mix(in srgb,var(--color-success) 28%,var(--color-bg-primary))}._alert_1p97w_1._success_1p97w_52 .icon{fill:var(--color-success)} ._clipboardButtonOuter_8cpmg_1{--clipboard-button-bg: var(--color-code-background);--clipboard-button-fg: var(--color-fg-tertiary);display:flex;align-items:center;position:absolute;top:4px;right:4px;opacity:0;z-index:2;transition:opacity .33s ease-in-out}pre:hover ._clipboardButtonOuter_8cpmg_1,._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{opacity:1}._clipboardButtonOuter_8cpmg_1:hover{--clipboard-button-fg: var(--color-util-brand-400)}[data-dark-mode=true] ._clipboardButtonOuter_8cpmg_1:hover{--clipboard-button-fg: var(--color-link-hover)}._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{--clipboard-button-bg: var(--color-util-gray-700);--clipboard-button-fg: var(--color-fg-white)}[data-dark-mode=true] ._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{--clipboard-button-fg: var(--color-bg-primary)}.example-runner-outer ._clipboardButtonOuter_8cpmg_1{right:20px}._clipboardButton_8cpmg_1,._clipboardButtonCopied_8cpmg_34{display:flex;align-items:center;height:32px;background-color:var(--clipboard-button-bg);border-top:1px solid var(--color-border-primary);border-bottom:1px solid var(--color-border-primary)}._clipboardButton_8cpmg_1{width:calc(32px - var(--radius-sm));border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);border-right:1px solid var(--color-border-primary);cursor:pointer;transition:background-color .25s ease-in-out}._clipboardButton_8cpmg_1 svg{--icon-size: 22px;--icon-color: var(--clipboard-button-fg);transition:fill .25s ease-in-out}._clipboardButtonCopiedOuter_8cpmg_57{overflow:hidden}._clipboardButtonCopied_8cpmg_34{font-size:var(--text-fs-sm);font-weight:var(--text-semibold);padding-left:8px;padding-right:8px;border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);border-left:1px solid var(--color-border-primary);font-weight:var(--text-regular);color:var(--clipboard-button-fg);transition:background-color .25s ease-in-out,color .25s ease-in-out;cursor:pointer} ._icon_1jqgc_1{fill:var(--icon-color, var(--color-fg-primary));width:var(--icon-size);height:var(--icon-size);transition:fill .25s ease-in-out} ._docsHeaderIcon_15ivl_1{position:relative;padding-left:0;margin-left:8px;font-size:inherit;opacity:0;transition:opacity .33s ease-in-out}._docsHeaderIcon_15ivl_1 svg{position:relative;top:-.1em;width:.85em;height:.85em;visibility:visible;fill:var(--color-link)}._docsHeaderIcon_15ivl_1:hover{opacity:1}h1:hover ._docsHeaderIcon_15ivl_1,h2:hover ._docsHeaderIcon_15ivl_1,h3:hover ._docsHeaderIcon_15ivl_1,h4:hover ._docsHeaderIcon_15ivl_1,h5:hover ._docsHeaderIcon_15ivl_1,h6:hover ._docsHeaderIcon_15ivl_1{opacity:.5}h1:hover ._docsHeaderIcon_15ivl_1:hover,h2:hover ._docsHeaderIcon_15ivl_1:hover,h3:hover ._docsHeaderIcon_15ivl_1:hover,h4:hover ._docsHeaderIcon_15ivl_1:hover,h5:hover ._docsHeaderIcon_15ivl_1:hover,h6:hover ._docsHeaderIcon_15ivl_1:hover{opacity:1} ._cta_13t5y_1{position:relative}._cta_13t5y_1 a,._cta_13t5y_1 button{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:var(--radius-sm);transition:color .25s ease-in-out,background-color .25s ease-in-out;cursor:pointer}._cta_13t5y_1 a:hover,._cta_13t5y_1 button:hover{background-color:var(--color-util-brand-100)}._cta_13t5y_1 a:focus-visible,._cta_13t5y_1 button:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-button-primary-shadow-focus),var(--shadow-xs)}._cta_13t5y_1 a svg,._cta_13t5y_1 button svg{--icon-size: 1.25em;fill:var(--color-link);transform:translate(1px,.75px);transition:fill .25s ease-in-out}li:first-child ._cta_13t5y_1 a svg,li:first-child ._cta_13t5y_1 button svg{--icon-size: 1.35em}[data-dark-mode=true] ._cta_13t5y_1 a:hover,[data-dark-mode=true] ._cta_13t5y_1 button:hover{background-color:var(--color-util-brand-50)}@supports (-webkit-touch-callout: none){._cta_13t5y_1 button{display:none}}._tooltip_13t5y_46{--tooltip-background: var(--color-fg-primary);position:absolute;display:block;color:var(--color-bg-primary);top:-44px;left:50%;padding:4px 16px;white-space:nowrap;font-weight:600;background-color:var(--tooltip-background);border-radius:6px;transform:translate(-50%,4px);opacity:0;pointer-events:none;transition-delay:0;transition:opacity .165s ease-in,transform .165s ease-in;z-index:1}._tooltip_13t5y_46:before{content:"";position:absolute;background-color:var(--tooltip-background);width:16px;height:16px;transform:rotate(45deg);bottom:-7px;left:calc(50% - 8px);border-radius:3px;z-index:-1}._cta_13t5y_1:hover ._tooltip_13t5y_46{opacity:1;transform:translate(-50%);transition:opacity .33s ease-in,transform .33s ease-in;transition-delay:.165s}[data-dark-mode=true] ._tooltip_13t5y_46{--tooltip-background: var(--color-bg-secondary);color:var(--color-fg-primary);box-shadow:0 -4px 16px #0006} </style> <link rel="stylesheet" href="/charts/_astro/LicenseSetup.C8PU3bBB.css"><script type="module">function t({targetSelector:e,scrolledClass:o,scrollPosition:s}){const l=document.querySelector(e);(window.scrollY||document.documentElement.scrollTop)>=s?l?.classList.add(o):l?.classList.remove(o)}function n(e){window.addEventListener("scroll",()=>{t(e)}),t(e)}n({targetSelector:".site-header",scrolledClass:"header-scrolled",scrollPosition:480}); </script></head> <body data-is-homepage data-astro-cid-sckkx6r4 style="--lightModeCSSUrl: url("/charts/images/sun.svg");--darkModeCSSUrl: url("/charts/images/moon.svg");"> <script> const htmlEl = document.querySelector('html'); const localDarkmode = localStorage['documentation:darkmode']; const isOSDarkmode = ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ).toString(); htmlEl.classList.add('no-transitions'); htmlEl.dataset.darkMode = localDarkmode !== undefined ? localDarkmode : isOSDarkmode; htmlEl.offsetHeight; // Trigger a reflow, flushing the CSS changes htmlEl.classList.remove('no-transitions'); </script> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5GWLR86Q" height="0" width="0" style="display:none;visibility:hidden; --lightModeCSSUrl: url("/charts/images/sun.svg");--darkModeCSSUrl: url("/charts/images/moon.svg");" data-astro-cid-sckkx6r4></iframe></noscript> <div class="mainContainer" data-astro-cid-sckkx6r4 style="--lightModeCSSUrl: url("/charts/images/sun.svg");--darkModeCSSUrl: url("/charts/images/moon.svg");"> <header class="_header_1agp5_1 site-header"> <div class="_headerInner_1agp5_20 layout-page-max-width"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="ZDhylf" prefix="r15" component-url="/charts/_astro/SiteLogo.hhRgKJhN.js" component-export="SiteLogo" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{}" ssr="" client="load" opts="{"name":"SiteLogo","value":true}" await-children=""><a href="/charts/" aria-label="Home" class="_headerLogo_1agp5_36"><svg xmlns="http://www.w3.org/2000/svg" class="logotype" width="198" height="40" viewBox="0 0 198 40"><style> .logotype path { fill: #fff; } .logotype.dark-type>path { fill: #003264; } </style><path d="M25.779 28.657h-12.42l-2.186 5.355h-5.5L17.182 7.06h4.771l11.509 26.952h-5.5l-2.186-5.355h.003Zm-1.711-4.26-4.48-10.963-4.481 10.963h8.961ZM62.092 18.823H49.817v4.263h6.958c-.22 2.136-1.02 3.841-2.403 5.116-1.383 1.274-3.206 1.913-5.463 1.913-1.287 0-2.459-.23-3.516-.692a7.776 7.776 0 0 1-2.713-1.947c-.753-.837-1.336-1.845-1.749-3.023-.412-1.178-.62-2.483-.62-3.916 0-1.432.205-2.737.62-3.916.413-1.178.996-2.185 1.749-3.023a7.763 7.763 0 0 1 2.731-1.947c1.067-.462 2.245-.691 3.535-.691 2.666 0 4.691.642 6.074 1.925l3.28-3.28C55.817 7.67 52.676 6.7 48.872 6.7c-2.112 0-4.019.335-5.718 1.001-1.699.667-3.156 1.603-4.371 2.803-1.216 1.203-2.149 2.654-2.806 4.353-.658 1.699-.983 3.594-.983 5.683 0 2.09.335 3.954 1.001 5.665.667 1.711 1.61 3.169 2.822 4.372 1.215 1.203 2.669 2.136 4.371 2.806 1.7.666 3.594 1.001 5.684 1.001 2.089 0 3.878-.335 5.518-1.001 1.641-.667 3.036-1.603 4.189-2.806 1.154-1.203 2.04-2.661 2.66-4.372.621-1.711.931-3.6.931-5.665a19.88 19.88 0 0 0-.075-1.711l-.003-.006ZM151.81 16.981c1.6-2.372 5.609-2.623 7.212-2.623v4.552c-2.065 0-4.037.086-5.265.982-1.228.9-1.838 2.09-1.838 3.572V33.99h-4.955V14.358h4.772l.074 2.623ZM143.011 14.361v19.67h-4.771l-.109-2.986a7.269 7.269 0 0 1-2.66 2.459c-1.095.595-2.403.892-3.935.892-1.336 0-2.573-.244-3.714-.728a8.714 8.714 0 0 1-2.967-2.059c-.837-.887-1.501-1.947-1.984-3.187-.487-1.237-.729-2.611-.729-4.118 0-1.506.242-2.926.729-4.188.486-1.262 1.147-2.344 1.984-3.243a8.79 8.79 0 0 1 2.967-2.093c1.141-.499 2.381-.747 3.714-.747 1.507 0 2.794.285 3.861.855a7.529 7.529 0 0 1 2.66 2.388v-2.915h4.954Zm-10.38 15.772c1.625 0 2.936-.539 3.934-1.621.996-1.082 1.495-2.521 1.495-4.316s-.499-3.206-1.495-4.297c-.995-1.092-2.306-1.641-3.934-1.641-1.628 0-2.902.546-3.897 1.641-.996 1.094-1.495 2.539-1.495 4.334 0 1.795.496 3.2 1.495 4.282.995 1.079 2.294 1.621 3.897 1.621v-.003ZM93.698 27.876a7.077 7.077 0 0 1-.369.366c-1.382 1.274-3.206 1.913-5.463 1.913-1.286 0-2.458-.229-3.516-.691a7.785 7.785 0 0 1-2.713-1.947c-.753-.838-1.336-1.845-1.748-3.023-.413-1.179-.62-2.484-.62-3.916 0-1.433.204-2.738.62-3.916.412-1.178.995-2.186 1.748-3.023a7.766 7.766 0 0 1 2.732-1.947c1.067-.462 2.245-.692 3.534-.692 2.667 0 4.692.642 6.074 1.926l3.281-3.281c-2.484-1.934-5.625-2.905-9.429-2.905-2.111 0-4.018.335-5.717 1.002-1.699.666-3.156 1.603-4.372 2.803-1.215 1.202-2.148 2.654-2.806 4.353-.657 1.699-.983 3.593-.983 5.683 0 2.089.335 3.953 1.002 5.664.666 1.712 1.609 3.169 2.821 4.372 1.216 1.203 2.67 2.136 4.372 2.806 1.699.667 3.593 1.001 5.683 1.001s3.879-.334 5.519-1.001c1.37-.558 2.57-1.302 3.6-2.232.201-.183.4-.376.589-.571l-3.836-2.735-.003-.009ZM110.802 14.015c-1.603 0-3.966.456-5.191 2.143l-.074-10.142h-4.772v27.923h4.955V22.641a4.463 4.463 0 0 1 4.638-4.267c3.039 0 3.91 2.785 3.91 4.267v11.298h4.955v-12.88s-.081-7.044-8.421-7.044ZM173.763 14.358h-3.764V8.715h-4.951v5.643h-3.764v4.558h3.764v15.087h4.951V18.916h3.764v-4.558ZM190.787 25.262a6.672 6.672 0 0 0-2.403-1.761c-.896-.384-2.053-.769-3.436-1.137a36.605 36.605 0 0 1-2.325-.738 3.609 3.609 0 0 1-1.24-.751 1.377 1.377 0 0 1-.456-1.057c0-.546.229-.974.698-1.308.496-.354 1.237-.534 2.201-.534s1.761.233 2.322.692c.558.456.859 1.057.924 1.832l.022.282h4.539l-.016-.322c-.096-1.975-.846-3.56-2.232-4.71-1.373-1.138-3.2-1.717-5.423-1.717-1.485 0-2.821.254-3.968.753-1.163.505-2.068 1.209-2.698 2.096a5.047 5.047 0 0 0-.955 2.967c0 1.318.357 2.4 1.058 3.215a6.424 6.424 0 0 0 2.443 1.78c.902.372 2.086.763 3.519 1.156 1.445.41 2.511.785 3.169 1.123.57.291.849.722.849 1.321 0 .598-.257 1.023-.784 1.395-.552.387-1.358.586-2.394.586-1.035 0-1.807-.251-2.452-.751-.636-.493-.977-1.085-1.039-1.81l-.025-.282h-4.672l.012.319a5.86 5.86 0 0 0 1.163 3.305c.719.974 1.705 1.752 2.93 2.313 1.218.558 2.614.843 4.148.843 1.535 0 2.843-.254 3.972-.753 1.138-.505 2.034-1.215 2.663-2.115.633-.902.952-1.94.952-3.091-.025-1.293-.387-2.35-1.076-3.141h.01Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="logo-mark" width="64" height="48" viewBox="0 0 64 48"><style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg></a></astro-island> <astro-island uid="1wil1d" prefix="r16" component-url="/charts/_astro/ProductDropdown.MkslNmro.js" component-export="ProductDropdown" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"items":[1,[[0,{"title":[0,"AG Grid"],"description":[0,"Best JavaScript Grid in the World"],"url":[0,"https://www.ag-grid.com"]}],[0,{"title":[0,"AG Charts"],"description":[0,"Best JavaScript Charts in the World"],"url":[0,"https://www.ag-grid.com/charts"]}]]],"children":[0,null]}" ssr="" client="load" opts="{"name":"ProductDropdown","value":true}" await-children=""><div class="_customMenu_zefh0_1 "><button class="_customTrigger_zefh0_23 ">Products<span class="_arrow_zefh0_51"></span></button></div></astro-island> <astro-island uid="Z2aO0KP" prefix="r17" component-url="/charts/_astro/HeaderNav.CTtd2oBs.js" component-export="HeaderNav" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"currentPath":[0,"/charts"],"items":[1,[[0,{"title":[0,"AG Grid"],"url":[0,"https://www.ag-grid.com/"],"isCollapsed":[0,true]}],[0,{"title":[0,"Gallery"],"path":[0,"/gallery"]}],[0,{"title":[0,"Docs"],"path":[0,"./quick-start"]}],[0,{"title":[0,"API"],"path":[0,"/options"]}],[0,{"title":[0,"Community"],"path":[0,"/community"]}],[0,{"title":[0,"Pricing"],"path":[0,"/license-pricing"]}],[0,{"title":[0,"GitHub"],"url":[0,"https://github.com/ag-grid/ag-charts"],"icon":[0,"github"],"github":[0,"true"]}]]],"allPaths":[1,[[0,{"title":[0,"AG Grid"],"url":[0,"https://www.ag-grid.com/"],"isCollapsed":[0,true]}],[0,{"title":[0,"Gallery"],"path":[0,"/gallery"]}],[0,{"title":[0,"Docs"],"path":[0,"./quick-start"]}],[0,{"title":[0,"API"],"path":[0,"/options"]}],[0,{"title":[0,"Community"],"path":[0,"/community"]}],[0,{"title":[0,"Pricing"],"path":[0,"/license-pricing"]}],[0,{"title":[0,"GitHub"],"url":[0,"https://github.com/ag-grid/ag-charts"],"icon":[0,"github"],"github":[0,"true"]}],[0,{"title":[0,"API"],"path":[0,"/charts/options"]}],[0,{"title":[0,"API"],"path":[0,"/charts/themes-api"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/api-state"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/api-state"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/api-state"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/api-state"]}],[0,{"title":[0,"Docs"],"path":[0,"/charts/react"]}],[0,{"title":[0,"Docs"],"path":[0,"/charts/angular"]}],[0,{"title":[0,"Docs"],"path":[0,"/charts/vue"]}],[0,{"title":[0,"Docs"],"path":[0,"/charts/javascript"]}]]],"apiPaths":[1,[[0,{"title":[0,"API"],"path":[0,"/charts/options"]}],[0,{"title":[0,"API"],"path":[0,"/charts/themes-api"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/api-create-update"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/events"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/api-download"]}],[0,{"title":[0,"API"],"path":[0,"/charts/react/api-state"]}],[0,{"title":[0,"API"],"path":[0,"/charts/angular/api-state"]}],[0,{"title":[0,"API"],"path":[0,"/charts/vue/api-state"]}],[0,{"title":[0,"API"],"path":[0,"/charts/javascript/api-state"]}]]]}" ssr="" client="load" opts="{"name":"HeaderNav","value":true}" await-children=""><div class="_mainNav_1agp5_191"><nav class="_mainNavLarge_1agp5_191"><ul class="_navItemList_1agp5_225 list-style-none"><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/gallery/" aria-label="AG Grid Gallery"><span>Gallery</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/react/quick-start/" aria-label="AG Grid Docs"><span>Docs</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/options/" aria-label="AG Grid API"><span>API</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/community/" aria-label="AG Grid Community"><span>Community</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/license-pricing/" aria-label="AG Grid Pricing"><span>Pricing</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320 _githubItem_1agp5_316"><a class="_navLink_1agp5_243" href="https://github.com/ag-grid/ag-charts" aria-label="AG Grid GitHub"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg><span>GitHub</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320"><button class="_navLink_1agp5_243 button-style-none" aria-label="Dark mode selector"><div class="_icon_1agp5_88 _pseudoIcon_1agp5_324"></div><span>Dark Mode</span></button></li></ul></nav></div><button class="_mobileMenuButton_1agp5_117" type="button" aria-controls="_mainNavSmall_1agp5_1" aria-expanded="false" aria-label="Toggle navigation"><svg xmlns="http://www.w3.org/2000/svg" class="_menuIcon_1agp5_153" width="36" height="36" viewBox="0 0 36 36"><style> .menu-icon rect { fill: #fff; } </style><g class="top"><rect x="2" y="7" width="32" height="2"></rect></g><g class="middle"><rect x="2" y="17" width="32" height="2"></rect></g><g class="bottom"><rect x="2" y="27" width="32" height="2"></rect></g></svg></button><div id="_mainNavSmall_1agp5_1" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><nav class="_mainNav_1agp5_191"><ul class="_navItemList_1agp5_225 list-style-none"><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="https://www.ag-grid.com/" aria-label="AG Grid AG Grid"><span>AG Grid</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/gallery/" aria-label="AG Grid Gallery"><span>Gallery</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/react/quick-start/" aria-label="AG Grid Docs"><span>Docs</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/options/" aria-label="AG Grid API"><span>API</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/community/" aria-label="AG Grid Community"><span>Community</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/charts/license-pricing/" aria-label="AG Grid Pricing"><span>Pricing</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320 _githubItem_1agp5_316"><a class="_navLink_1agp5_243" href="https://github.com/ag-grid/ag-charts" aria-label="AG Grid GitHub"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg><span>GitHub</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320"><button class="_navLink_1agp5_243 button-style-none" aria-label="Dark mode selector"><div class="_icon_1agp5_88 _pseudoIcon_1agp5_324"></div><span>Dark Mode</span></button></li></ul></nav></div></div></astro-island> </div> </header> <div class="_container_l2qqw_1"> <div class="_homepageHero_l2qqw_15"> <div class="_heroInner_l2qqw_23 layout-max-width-small"> <div class="_heroHeadings_l2qqw_39"> <noscript> <h1>The Best JavaScript Charts in the World</h1> <style> .only-script { display: none !important; } </style> </noscript> <h1 class="only-script"> <span class="_heroTopLine_l2qqw_132">The Best <astro-island uid="1fAg4M" prefix="r0" component-url="/charts/_astro/FrameworkTextAnimation.B-3OIJv_.js" component-export="FrameworkTextAnimation" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{}" ssr="" client="load" opts="{"name":"FrameworkTextAnimation","value":true}" await-children=""><span class="_animatedWordsOuter_tbd7e_1" style="--word-index:0"><span class="_animatedWordsInner_tbd7e_13"><span class="_javascript_tbd7e_24">Javascript</span><span class="_vue_tbd7e_39">Vue</span><span class="_angular_tbd7e_32">Angular</span><span class="_react_tbd7e_28">React</span><span class="_javascript_tbd7e_24">Javascript</span></span></span></astro-island></span> <span>Charts in the world</span> </h1> <h2>The professional choice for developers building enterprise applications</h2> <a href="/charts/gallery?utm_source=charts-homepage&utm_medium=hero-section&utm_campaign=homepage-cta" class="button-secondary">See the charts <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></a> </div> <astro-island uid="2upzkk" prefix="r2" component-url="/charts/_astro/ImageCarousel.DC3Dbcfz.js" component-export="default" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{}" ssr="" client="load" opts="{"name":"ImageCarousel","value":true}" await-children=""><div class="carousel-container"><div class="carousel-column"><div class="carousel-scroll scroll-down"><div class="carousel-content"><div class="image-row"><img src="/charts/images/scroller-1.webp" alt="Left Image 1" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-2.webp" alt="Left Image 2" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-3.webp" alt="Left Image 3" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-4.webp" alt="Left Image 4" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-5.webp" alt="Left Image 5" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-6.webp" alt="Left Image 6" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-7.webp" alt="Left Image 7" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-8.webp" alt="Left Image 8" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-9.webp" alt="Left Image 9" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-10.webp" alt="Left Image 10" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-11.webp" alt="Left Image 11" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-12.webp" alt="Left Image 12" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-1.webp" alt="Left Image 13" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-2.webp" alt="Left Image 14" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-3.webp" alt="Left Image 15" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-4.webp" alt="Left Image 16" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-5.webp" alt="Left Image 17" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-6.webp" alt="Left Image 18" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-7.webp" alt="Left Image 19" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-8.webp" alt="Left Image 20" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-9.webp" alt="Left Image 21" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-10.webp" alt="Left Image 22" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-11.webp" alt="Left Image 23" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-12.webp" alt="Left Image 24" class="carousel-image"/></div></div></div></div><div class="carousel-column"><div class="carousel-scroll scroll-up"><div class="carousel-content"><div class="image-row"><img src="/charts/images/scroller-12.webp" alt="Right Image 1" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-11.webp" alt="Right Image 2" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-10.webp" alt="Right Image 3" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-9.webp" alt="Right Image 4" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-8.webp" alt="Right Image 5" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-7.webp" alt="Right Image 6" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-6.webp" alt="Right Image 7" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-5.webp" alt="Right Image 8" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-4.webp" alt="Right Image 9" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-3.webp" alt="Right Image 10" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-2.webp" alt="Right Image 11" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-1.webp" alt="Right Image 12" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-12.webp" alt="Right Image 13" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-11.webp" alt="Right Image 14" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-10.webp" alt="Right Image 15" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-9.webp" alt="Right Image 16" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-8.webp" alt="Right Image 17" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-7.webp" alt="Right Image 18" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-6.webp" alt="Right Image 19" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-5.webp" alt="Right Image 20" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-4.webp" alt="Right Image 21" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-3.webp" alt="Right Image 22" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-2.webp" alt="Right Image 23" class="carousel-image"/></div><div class="image-row"><img src="/charts/images/scroller-1.webp" alt="Right Image 24" class="carousel-image"/></div></div></div></div><div class="gradient-overlay"></div></div></astro-island> </div> </div> <div class="_homepageFrameworks_l2qqw_197"> <div class="_frameworksInner_l2qqw_211 layout-max-width-small"> <astro-island uid="Z1tSvKN" prefix="r3" component-url="/charts/_astro/LandingPageFWSelector.CAxmV4TI.js" component-export="LandingPageFWSelector" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"data":[1,[[0,{"name":[0,"react"],"url":[0,"/charts/react/quick-start/"]}],[0,{"name":[0,"angular"],"url":[0,"/charts/angular/quick-start/"]}],[0,{"name":[0,"vue"],"url":[0,"/charts/vue/quick-start/"]}],[0,{"name":[0,"javascript"],"url":[0,"/charts/javascript/quick-start/"]}]]],"isFullWidth":[0,true]}" ssr="" client="load" opts="{"name":"LandingPageFWSelector","value":true}" await-children=""><div class="_frameworkSelector_1d4fr_1"><a href="/charts/react/quick-start/" class="_option_1d4fr_38"><img src="/charts/images/fw-logos/react.svg" alt="React Data Grid"/><span>React <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></span></a><a href="/charts/angular/quick-start/" class="_option_1d4fr_38"><img src="/charts/images/fw-logos/angular.svg" alt="Angular Data Grid"/><span>Angular <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></span></a><a href="/charts/vue/quick-start/" class="_option_1d4fr_38"><img src="/charts/images/fw-logos/vue.svg" alt="Vue Data Grid"/><span>Vue <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></span></a><a href="/charts/javascript/quick-start/" class="_option_1d4fr_38"><img src="/charts/images/fw-logos/javascript.svg" alt="JavaScript Data Grid"/><span>JavaScript <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></span></a></div></astro-island> </div> </div> <div class="_sectionContent_1fkyt_1"><header class="_headingContainer_1fkyt_73"><h2 class="_tag_1fkyt_40">AG Charts JavaScript Charting Library</h2><h3 class="_heading_1fkyt_41">JavaScript Charts Designed for Every Use Case</h3><h4 class="_subHeading_1fkyt_42"></h4><a href="/charts/react/quick-start/?utm_source=charts-homepage&utm_medium=features-section&utm_campaign=homepage-cta" class="_ctaButton_1fkyt_83 button-tertiary">Get Started For Free <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></a></header> <astro-island uid="4yYgH" prefix="r4" component-url="/charts/_astro/HomepageGalleryExamples.CgV1IOmk.js" component-export="HomepageGalleryExamples" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"examples":[1,[[0,{"title":[0,"Simple Horizontal Bar"],"exampleName":[0,"simple-horizontal-bar"],"buttonText":[0,"Bar"],"icon":[0,"chartsBar"]}],[0,{"title":[0,"Multiple Line Series"],"exampleName":[0,"multiple-line-series"],"buttonText":[0,"Line"],"icon":[0,"chartsLine"]}],[0,{"title":[0,"Simple Area"],"exampleName":[0,"simple-area"],"buttonText":[0,"Area"],"icon":[0,"chartsArea"]}],[0,{"title":[0,"Simple Scatter"],"exampleName":[0,"simple-scatter"],"buttonText":[0,"Scatter"],"icon":[0,"chartsScatter"]}],[0,{"title":[0,"Simple Bubble"],"exampleName":[0,"bubble-with-negative-values"],"buttonText":[0,"Bubble"],"icon":[0,"chartsBubble"]}],[0,{"title":[0,"Simple Pie"],"exampleName":[0,"simple-pie"],"buttonText":[0,"Pie"],"icon":[0,"chartsPie"]}],[0,{"title":[0,"Simple Donut"],"exampleName":[0,"simple-donut"],"buttonText":[0,"Donut"],"icon":[0,"chartsDonut"]}],[0,{"title":[0,"Simple Histogram"],"exampleName":[0,"simple-histogram"],"buttonText":[0,"Histogram"],"icon":[0,"chartsHistogram"]}],[0,{"title":[0,"Horizontal Range Bar"],"exampleName":[0,"horizontal-range-bar"],"buttonText":[0,"Range Bar"],"icon":[0,"chartsRangeBar"]}],[0,{"title":[0,"Range Area With Labels"],"exampleName":[0,"range-area-with-labels"],"buttonText":[0,"Range Area"],"icon":[0,"chartsRangeArea"]}],[0,{"title":[0,"Simple Waterfall"],"exampleName":[0,"simple-waterfall"],"buttonText":[0,"Waterfall"],"icon":[0,"chartsWaterfall"]}],[0,{"title":[0,"Simple Box Plot"],"exampleName":[0,"simple-box-plot"],"buttonText":[0,"Box Plot"],"icon":[0,"chartsBoxPlot"]}],[0,{"title":[0,"Candlestick"],"exampleName":[0,"candlestick"],"buttonText":[0,"Candlestick"],"icon":[0,"chartsCandlestick"]}],[0,{"title":[0,"Simple Radar Line"],"exampleName":[0,"simple-radar-line"],"buttonText":[0,"Radar Line"],"icon":[0,"chartsRadar"]}],[0,{"title":[0,"Simple Radar Area"],"exampleName":[0,"simple-radar-area"],"buttonText":[0,"Radar Area"],"icon":[0,"chartsRadarArea"]}],[0,{"title":[0,"Simple Nightingale"],"exampleName":[0,"simple-nightingale"],"buttonText":[0,"Nightingale"],"icon":[0,"chartsNightingale"]}],[0,{"title":[0,"Simple Radial Column"],"exampleName":[0,"simple-radial-column"],"buttonText":[0,"Radial Column"],"icon":[0,"chartsRadialColumn"]}],[0,{"title":[0,"Stacked Radial Bar"],"exampleName":[0,"stacked-radial-bar"],"buttonText":[0,"Radial Bar"],"icon":[0,"chartsRadialBar"]}],[0,{"title":[0,"Simple Sunburst"],"exampleName":[0,"simple-sunburst"],"buttonText":[0,"Sunburst"],"icon":[0,"chartsSunburst"]}],[0,{"title":[0,"Simple Treemap"],"exampleName":[0,"simple-treemap"],"buttonText":[0,"Treemap"],"icon":[0,"chartsTreemap"]}],[0,{"title":[0,"Simple Heatmap"],"exampleName":[0,"simple-heatmap"],"buttonText":[0,"Heatmap"],"icon":[0,"chartsHeatmap"]}],[0,{"title":[0,"Sankey"],"exampleName":[0,"sankey"],"buttonText":[0,"Sankey"],"icon":[0,"chartsSankey"]}],[0,{"title":[0,"Chord"],"exampleName":[0,"chord"],"buttonText":[0,"Chord"],"icon":[0,"chartsChord"]}],[0,{"title":[0,"Simple Funnel"],"exampleName":[0,"simple-funnel"],"buttonText":[0,"Funnel"],"icon":[0,"chartsFunnel"]}],[0,{"title":[0,"Simple Cone Funnel"],"exampleName":[0,"simple-cone-funnel"],"buttonText":[0,"Cone Funnel"],"icon":[0,"chartsConeFunnel"]}],[0,{"title":[0,"Simple Pyramid"],"exampleName":[0,"simple-pyramid"],"buttonText":[0,"Pyramid"],"icon":[0,"chartsPyramid"]}],[0,{"title":[0,"Simple Radial Gauge"],"exampleName":[0,"simple-radial-gauge"],"buttonText":[0,"Radial Gauge"],"icon":[0,"chartsRadialGauge"]}],[0,{"title":[0,"Simple Linear Gauge"],"exampleName":[0,"simple-linear-gauge"],"buttonText":[0,"Linear Gauge"],"icon":[0,"chartsLinearGauge"]}],[0,{"title":[0,"Bar And Line Combination"],"exampleName":[0,"bar-line-combination"],"buttonText":[0,"Combination"],"icon":[0,"chartsCombination"]}]]],"pageName":[0,"bar"]}" ssr="" client="load" opts="{"name":"HomepageGalleryExamples","value":true}" await-children=""><div class="_container_vgzzc_1"><div class="_tabContainer_vgzzc_8"><button class="_tabButton_vgzzc_19 _activeTabButton_vgzzc_41"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _activeTabButtonIcon_vgzzc_49" xmlns="http://www.w3.org/2000/svg"><path d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4V25H26V17H4V13H18V5H4ZM24,19v4H4V19ZM16,7v4H4V7Z"></path></svg>Bar</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M4.67,28l6.39-12,7.3,6.49a2,2,0,0,0,1.7.47,2,2,0,0,0,1.42-1.07L27,10.9,25.18,10,19.69,21l-7.3-6.49A2,2,0,0,0,10.71,14a2,2,0,0,0-1.42,1L4,25V2H2V28a2,2,0,0,0,2,2H30V28Z"></path></svg>Line</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M20.4761,8.0151,13.4473,4.2109a2.0076,2.0076,0,0,0-2.1158.2051L4,10.001V2H2V28a2,2,0,0,0,2,2H30V5.7354ZM28,20.209l-7.62,1.8022-7.0288-2.8838a1.99,1.99,0,0,0-2.022.37L4,25.8359v-4.455l8.375-9.4,7.0186,5.62a2.0155,2.0155,0,0,0,2.0459.2119L28,14.6025ZM12.5239,5.9849l7.03,3.8042a2.012,2.012,0,0,0,1.3408.16L28,8.2646v4.1138L20.6187,16.02,13.6,10.4a1.99,1.99,0,0,0-2.6885.2642L4,18.3838v-5.87ZM4.5513,28,12.62,20.9888l7.0288,2.8838a1.9977,1.9977,0,0,0,1.147.0771L28,22.2612V28Z"></path></svg>Area</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M30,30H4a2,2,0,0,1-2-2V2H4V28H30Z"></path><circle cx="10" cy="22" r="2"></circle><circle cx="14" cy="15" r="2"></circle><circle cx="22" cy="15" r="2"></circle><circle cx="26" cy="6" r="2"></circle><circle cx="14" cy="8" r="2"></circle></svg>Scatter</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M30,30H4a2,2,0,0,1-2-2V2H4V28H30Z"></path><path d="M10 16a2 2 0 11-2 2 2 2 0 012-2m0-2a4 4 0 104 4 4 4 0 00-4-4zM21 6a4 4 0 11-4 4 4 4 0 014-4m0-2a6 6 0 106 6 6 6 0 00-6-6zM24.5 21A1.5 1.5 0 1123 22.5 1.5 1.5 0 0124.5 21m0-2A3.5 3.5 0 1028 22.5 3.5 3.5 0 0024.5 19z"></path></svg>Bubble</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4ZM26,15H17V6.05A10,10,0,0,1,26,15ZM15.42,26A10,10,0,0,1,15,6.05v9a2,2,0,0,0,2,2h9A10,10,0,0,1,15.42,26Z"></path></svg>Pie</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM27.9493,15.001H21.91a5.9825,5.9825,0,0,0-9.3806-3.8853l-4.27-4.27a11.9783,11.9783,0,0,1,19.69,8.1548ZM16,20a4,4,0,1,1,4-4A4.0045,4.0045,0,0,1,16,20ZM4,16A11.937,11.937,0,0,1,6.8455,8.26l4.27,4.2695A5.9836,5.9836,0,0,0,15,21.9106v6.04A12.0105,12.0105,0,0,1,4,16ZM17,27.95v-6.04A6.0069,6.0069,0,0,0,21.91,17h6.04A12.0082,12.0082,0,0,1,17,27.95Z"></path></svg>Donut</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M26,26V4H18v6H12v6H6V26H2v2H30V26ZM8,26V18h4v8Zm6,0V12h4V26Zm6,0V6h4V26Z"></path></svg>Histogram</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M28 24H14V16H28zM16 22H26V18H16zM26 12H8V4H26zM10 10H24V6H10z"></path><path d="M30,30H4a2.0023,2.0023,0,0,1-2-2V2H4V28H30Z"></path></svg>Range Bar</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M12.4326,20.0171l8.0376,4.68a1.958,1.958,0,0,0,1.0508.3012,2.2412,2.2412,0,0,0,.4888-.0556l7.2532-1.9769A1,1,0,0,0,30,22.0007V7.996A1,1,0,0,0,28.74,7.0305L21.5034,8.9829l-8.0371-4.68a1.9917,1.9917,0,0,0-1.8652-.1352L4,7.4727V2H2V28a2,2,0,0,0,2,2H30V28H4V23.6577ZM28,21.2344l-6.4966,1.75-8.0371-4.68a1.9931,1.9931,0,0,0-1.8652-.1353L4,21.4746V16.6572l8.4326-3.6416L20.47,17.6968a1.962,1.962,0,0,0,1.0508.3008,2.2112,2.2112,0,0,0,.4888-.0557L28,16.31ZM12.4326,6.0156l8.0376,4.68a2.0091,2.0091,0,0,0,1.54.2451L28,9.3081v4.9258l-6.4966,1.7505-8.0371-4.6812a1.9917,1.9917,0,0,0-1.8652-.1352L4,14.4736V9.6562Z"></path></svg>Range Area</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M28,28V18H26V28H22V4H20V28H10V14H8V28H4V2H2V28a2.0023,2.0023,0,0,0,2,2H30V28Z"></path><path d="M14 4H16V18H14z"></path></svg>Waterfall</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M22,6V4H12V6h4V8H12V20h4v2H12v2H22V22H18V20h4V8H18V6ZM14,18V15h6v3Zm6-5H14V10h6Z"></path><path d="M30,30H4a2,2,0,0,1-2-2V2H4V28H30Z"></path></svg>Box Plot</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M26 10H24V6H22v4H20V22h2v4h2V22h2zM24 20H22V12h2zM14 8H12V4H10V8H8V18h2v4h2V18h2zm-2 8H10V10h2z"></path><path d="M30,30H4a2,2,0,0,1-2-2V2H4V28H30Z"></path></svg>Candlestick</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M16,2,2,13,8,30H24l6-17Zm2.5818,19.2651-5.9861,1.3306-1.4226-7.8252,4.91-4.209,5.4416,4.0816Zm.1977,2.0054L21.3264,28H10.6736l1.7912-3.3267ZM9.59,13.4937,5.74,12.605,15,5.3291V8.8569ZM17,8.75V5.3291l9.26,7.2759-3.15.727ZM4.6143,14.3979l4.6535,1.0738,1.4844,8.164-1.738,3.2281ZM22.9858,26.8638l-2.5766-4.7852,3.0063-6.7646,3.97-.9161Z"></path></svg>Radar Line</button><button class="_tabButton_vgzzc_19 "><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path d="M28.9625 12.4094L16.5875 3.40937C16.4171 3.28451 16.2113 3.21719 16 3.21719C15.7887 3.21719 15.5829 3.28451 15.4125 3.40937L3.03751 12.4094C2.86661 12.5336 2.73948 12.7088 2.67435 12.9098C2.60922 13.1108 2.60945 13.3273 2.67501 13.5281L7.40313 28.0906C7.46839 28.2912 7.59543 28.4661 7.76606 28.5901C7.93669 28.7141 8.14218 28.7811 8.35313 28.7813H23.65C24.0844 28.7813 24.4656 28.5031 24.6 28.0906L29.3281 13.5281C29.4594 13.1156 29.3125 12.6656 28.9625 12.4094ZM26.2063 13.0313L23.1281 14.0313L16.8781 9.50938V6.24688L26.2063 13.0313ZM14.5625 17.725L11.7781 21.5469L10.0531 16.2594L14.5625 17.725ZM10.9281 14.7L15.125 11.6656V16.0656L10.9281 14.7ZM16 18.725L18.9344 22.7531H13.0656L16 18.725ZM16.8781 11.6656L21.0719 14.7L16.8781 16.0625V11.6656ZM17.4375 17.725L21.9469 16.2594L20.2219 21.5469L17.4375 17.725ZM15.125 6.24688V9.50938L8.87188 14.0313L5.79376 13.0313L15.125 6.24688ZM5.29063 14.7125L7.99376 15.5906L10.5063 23.2906L8.82501 25.6L5.29063 14.7125ZM10.2219 26.6563L11.7938 24.5H20.2094L21.7813 26.6563H10.2219ZM23.175 25.6L21.4938 23.2906L24.0063 15.5906L26.7094 14.7125L23.175 25.6Z"></path><path d="M8.5 15L15.5 11L16 17L20 23H11.5L8.5 15Z"></path></svg>Radar Area</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M30,17A15.017,15.017,0,0,0,15,2H14V8.0591A9.0122,9.0122,0,0,0,6.0591,16H4v1A11.0109,11.0109,0,0,0,14,27.9492V30h1A13.0084,13.0084,0,0,0,27.9492,18H30ZM16,4.0381A13.0217,13.0217,0,0,1,27.9619,16H16ZM14,10.08V16H8.08A7.0037,7.0037,0,0,1,14,10.08ZM6.0552,18H14v7.939A9.0134,9.0134,0,0,1,6.0552,18ZM16,27.9551V18h9.9551A11.0191,11.0191,0,0,1,16,27.9551Z"></path></svg>Nightingale</button><button class="_tabButton_vgzzc_19 "><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.76427 12.7481L3.41401 6.86283L7.29827 2.97857L12.7481 8.9734V1.5H18.2519V9.01015L23.9597 2.52603L27.8465 6.41282L22.2697 12.7481H30V18.2519H22.1329L27.9337 24.0526L24.0526 27.9337L18.2519 22.1329V30H12.7481V22.1329L6.5 28.3811L2.60835 24.4894L8.93004 18.2614L12.8763 21.7707H17.9798L21.7707 17.9798V13.0202L18.0219 9.27139L18.0589 9.22933H12.9808L12.9995 9.24995L9.22932 13.0202V18.2519H1V12.7481H8.76427ZM9.18421 10.2368L10.2368 9.18421L7.22932 5.87594L6.17669 6.92857L9.18421 10.2368ZM3 16.2519H7.22932V14.7481H3V16.2519ZM24.0526 5.44737L20.7632 9.18421L21.8158 10.2368L25.1053 6.5L24.0526 5.44737ZM16.2519 7.22933V3.5H14.7481V7.22933H16.2519ZM23.7707 16.2519V14.7481H28V16.2519H23.7707ZM20.7632 21.8158L24.0526 25.1053L25.1053 24.0526L21.8158 20.7632L20.7632 21.8158ZM16.2519 28H14.7481V23.7707H16.2519V28ZM6.5 25.5526L5.4474 24.5L9 21L10.0865 21.9662L6.5 25.5526Z"></path></svg>Radial Column</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M16,30A14.0158,14.0158,0,0,1,2,16H4A12,12,0,1,0,16,4V2a14,14,0,0,1,0,28Z"></path><path d="M16,26A10.0115,10.0115,0,0,1,6,16H8a8,8,0,1,0,8-8V6a10,10,0,0,1,0,20Z"></path><path d="M16,22a6.0069,6.0069,0,0,1-6-6h2a4,4,0,1,0,4-4V10a6,6,0,0,1,0,12Z"></path></svg>Radial Bar</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M16,2a1,1,0,0,0-1,1v7.09a5.9618,5.9618,0,0,0-2.46,1.043L7.8384,6.4311a1.4554,1.4554,0,0,0-2.087.0244A14.05,14.05,0,0,0,9.8047,28.5972a10.8482,10.8482,0,0,0,1.8989.7676,14.0982,14.0982,0,0,0,13.8443-3.1319,1.4336,1.4336,0,0,0,.0278-2.0639L20.877,19.47A5.963,5.963,0,0,0,21.91,17H29a1,1,0,0,0,1-1A14.0158,14.0158,0,0,0,16,2Zm0,10a4,4,0,1,1-4,4A4.0045,4.0045,0,0,1,16,12ZM6.83,8.251l4.2959,4.2959a5.91,5.91,0,0,0-.0113,6.9243L6.8381,23.7481A12.0168,12.0168,0,0,1,6.83,8.251Zm1.4228,16.91,4.2759-4.2759A5.9589,5.9589,0,0,0,15,21.91v6.042A11.8783,11.8783,0,0,1,8.2529,25.1612ZM17,27.9561V21.9092a5.9631,5.9631,0,0,0,2.4609-1.0273l4.2818,4.2817A11.8905,11.8905,0,0,1,17,27.9561ZM21.91,15A6.0063,6.0063,0,0,0,17,10.09V4.041A12.0208,12.0208,0,0,1,27.9585,15Z"></path></svg>Sunburst</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M28,2H4A2.0023,2.0023,0,0,0,2,4V28a2.0023,2.0023,0,0,0,2,2H28a2.0023,2.0023,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2Zm0,12H23V4h5ZM16,4h5V14H16ZM14,4V20H4V4ZM4,22H14v6H4Zm12,6V16H28V28Z"></path></svg>Treemap</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M27,3H5A2.0023,2.0023,0,0,0,3,5V27a2.0023,2.0023,0,0,0,2,2H27a2.0023,2.0023,0,0,0,2-2V5A2.0023,2.0023,0,0,0,27,3ZM19,9H13V5h6Zm0,2v4H13V11Zm-8,0v4H5V11Zm0,6v4H5V17Zm2,0h6v4H13Zm8-2V11h6l0,4ZM5,23h6v4H5Zm16,4V23h6v4Z"></path></svg>Heatmap</button><button class="_tabButton_vgzzc_19 "><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path d="M29 2H2V15.5H7.89304C8.94066 15.5014 9.97371 15.7454 10.9113 16.2129L15.2721 18.3929L10.9116 20.5728C9.97398 21.0403 8.94079 21.2844 7.89304 21.2857H2V29H8.96513C10.3122 28.9985 11.6407 28.6849 12.8463 28.0839L21.1604 23.9272C22.0979 23.4597 23.131 23.2157 24.1786 23.2143H29V13.5714H24.1786C23.131 13.57 22.0979 13.326 21.1604 12.8585L14.8714 9.71429H29V2ZM7.78571 3.92857H23.2143V7.78571H7.78571V3.92857ZM3.92857 3.92857H5.85714V13.5714H3.92857V3.92857ZM3.92857 23.2143H5.85714V27.0714H3.92857V23.2143ZM20.2974 22.2018L11.9837 26.3583C11.0461 26.8259 10.0129 27.07 8.96513 27.0714H7.78571V23.2143H7.89304C9.24014 23.2128 10.5686 22.8992 11.7742 22.2982L17.4286 19.4711L19.2258 20.3695C20.4314 20.9704 21.7599 21.284 23.107 21.2855H23.2143V21.342C22.1992 21.4557 21.2119 21.7467 20.2974 22.2018ZM27.0714 21.2857H25.1429V15.5H27.0714V21.2857ZM11.9837 10.4272L20.2974 14.5833C21.2119 15.0385 22.1991 15.3296 23.2143 15.4435V19.3571H23.107C22.0593 19.3557 21.0263 19.1117 20.0887 18.6442L11.7746 14.4882C10.5689 13.8869 9.24033 13.5731 7.89304 13.5714H7.78571V9.71429H8.96513C10.0129 9.71565 11.0461 9.95966 11.9837 10.4272ZM27.0714 7.78571H25.1429V3.92857H27.0714V7.78571Z"></path></svg>Sankey</button><button class="_tabButton_vgzzc_19 "><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.91635 8.84487L7.03439 8.6924L7.04006 8.69732L7.30207 8.39561C7.88472 7.72468 8.53957 7.12166 9.25476 6.59965C9.69383 7.59167 10.2589 9.19746 10.4019 11.1511C10.4235 11.447 10.4355 11.7513 10.4357 12.0629C9.45092 11.4128 8.45842 10.9644 7.57187 10.6556C6.99531 10.4548 6.45933 10.3116 5.99341 10.2098C6.27084 9.73523 6.57977 9.27961 6.91635 8.84487ZM5.57975 10.1263C5.88352 9.59363 6.22533 9.08402 6.60006 8.6L5.60006 7.73333L5.60002 7.73338L6.59996 8.6C6.22524 9.08401 5.88343 9.59362 5.57967 10.1263C5.5797 10.1263 5.57972 10.1263 5.57975 10.1263ZM3.67313 9.96667C4.11722 9.07914 4.65981 8.24584 5.29128 7.47905L5.55205 7.16241L5.5581 7.16765L5.69635 7.00635C8.16897 4.12163 11.8782 2.26667 16.0001 2.26667C19.0214 2.26667 21.7727 3.22898 24.0416 4.94783L24.2312 5.09146L24.2739 5.03884L24.5841 5.28831C27.7408 7.8274 29.7334 11.6734 29.7334 16C29.7334 19.2301 28.5652 22.2525 26.6422 24.5876L26.4672 24.8L26.5038 24.8317L26.2303 25.1347C23.6931 27.9462 20.0542 29.7333 16.0001 29.7333C12.5638 29.7333 9.40399 28.4273 7.00151 26.2994L6.80634 26.1266L6.75431 26.1866L6.45055 25.8828C3.91653 23.3488 2.26672 19.8498 2.26672 16C2.26672 13.9179 2.72446 11.9481 3.56665 10.1845V9.96667H3.67313ZM4.68083 12.0782C4.24288 13.3047 3.99996 14.62 3.99996 16C3.99996 18.1547 4.58493 20.1979 5.59282 21.9677L5.59289 21.9677C4.58506 20.1978 4.00006 18.1547 4.00006 16C4.00006 14.62 4.24297 13.3047 4.68092 12.0782C4.68089 12.0782 4.68086 12.0782 4.68083 12.0782ZM5.08363 12.1406C4.64385 13.347 4.40006 14.6416 4.40006 16C4.40006 18.0498 4.94817 19.9969 5.89595 21.6909C8.52095 19.2421 9.74403 16.7175 10.2047 14.4188C9.11823 13.5301 7.93885 12.9671 6.90576 12.612C6.1877 12.3651 5.55151 12.2225 5.08363 12.1406ZM10.3349 13.6307C8.51854 12.2588 6.53736 11.7006 5.34882 11.4773C5.34882 11.4773 5.34883 11.4773 5.34883 11.4773C6.53734 11.7005 8.51853 12.2588 10.3349 13.6307C10.3349 13.6307 10.3349 13.6307 10.3349 13.6307ZM10.8044 14.9538C10.7141 15.3388 10.6032 15.7288 10.4693 16.1227C10.6032 15.7288 10.7141 15.3388 10.8044 14.9538C10.8044 14.9538 10.8044 14.9538 10.8044 14.9538ZM10.9657 14.1478C10.9657 14.1478 10.9657 14.1478 10.9657 14.1478C10.9657 14.1477 10.9657 14.1477 10.9657 14.1477L10.9657 14.1477C10.9657 14.1477 10.9657 14.1478 10.9657 14.1478ZM11.8691 16.1939C11.1419 18.5542 9.68494 21.0388 7.06888 23.416C7.3253 23.7305 7.5971 24.0314 7.8829 24.3172L8.00393 24.4382L8.01552 24.4237L8.33012 24.699C8.43829 24.7936 8.54822 24.8863 8.65985 24.977C10.007 22.4718 11.6227 20.648 13.3453 19.3354C13.0119 18.1501 12.5177 17.1025 11.8691 16.1939ZM13.9476 18.8998C13.5551 17.6068 12.9726 16.46 12.2 15.4667L12.1842 15.4464L12.1812 15.4425C12.1549 15.4089 12.1285 15.3755 12.1019 15.3424C12.1019 15.3423 12.1019 15.3423 12.1019 15.3423C12.1349 15.3833 12.1676 15.4248 12.2001 15.4667C12.9726 16.46 13.5552 17.6068 13.9477 18.8998C13.9477 18.8998 13.9477 18.8998 13.9476 18.8998ZM13.7689 21.606C12.533 22.7325 11.3734 24.2093 10.3711 26.1342C11.3419 26.6734 12.3948 27.0786 13.5002 27.3248C13.8577 25.2049 13.9429 23.2978 13.7689 21.606ZM14.1879 27.4562C14.588 25.0899 14.6617 22.9519 14.4091 21.0585C14.4091 21.0585 14.4091 21.0585 14.4091 21.0585C14.6618 22.9519 14.5881 25.0899 14.188 27.4562C14.1879 27.4562 14.1879 27.4562 14.1879 27.4562ZM4.94286 11.4085C4.94286 11.4085 4.94286 11.4085 4.94286 11.4085L4.94295 11.4085C4.94295 11.4085 4.94295 11.4085 4.94295 11.4085C4.94292 11.4085 4.94289 11.4085 4.94286 11.4085ZM15.5565 27.5914C15.7038 27.5971 15.8517 27.6 16.0001 27.6C17.5897 27.6 19.1094 27.279 20.4943 26.6955C19.1804 23.9394 18.5839 21.2957 18.7217 18.7973C17.6922 19.1058 16.6454 19.5562 15.6216 20.1969C16.0188 22.3894 15.99 24.8692 15.5565 27.5914ZM15.1085 18.1809C16.4067 17.4582 17.733 16.9782 19.0241 16.6745C19.0931 16.3782 19.1734 16.0842 19.2648 15.7926C19.6814 14.4351 20.2962 13.2701 20.982 12.2867C19.1117 11.391 17.63 10.1567 16.4937 8.92456C15.4121 7.75174 14.6385 6.57676 14.1305 5.68648C13.8999 5.28231 13.7168 4.92156 13.5884 4.65431C12.6865 4.84781 11.8247 5.14781 11.0151 5.54083C11.1249 5.77665 11.2436 6.04879 11.3644 6.35374C11.8136 7.48819 12.2955 9.0892 12.4396 10.9716C12.5051 11.8266 12.5004 12.7364 12.393 13.6834C12.6774 13.9771 12.9536 14.294 13.2184 14.6359C14.0391 15.679 14.6671 16.8649 15.1085 18.1809ZM11.1265 12.555C11.2313 9.76492 10.4086 7.44734 9.84225 6.19786L9.84224 6.19787C10.4086 7.44735 11.2313 9.76492 11.1265 12.555C11.1265 12.555 11.1265 12.555 11.1265 12.555ZM6.77008 23.6826C7.03177 24.0026 7.30886 24.3089 7.59996 24.6L6.73334 25.5999L6.73339 25.6L7.60006 24.6C7.30895 24.3089 7.03184 24.0026 6.77014 23.6825L6.77008 23.6826ZM20.5432 16.3918C20.5615 16.3277 20.5805 16.2638 20.6 16.2L20.5988 16.2041L20.5975 16.2084C20.5789 16.2694 20.5608 16.3305 20.5432 16.3918L20.5432 16.3918ZM21.302 16.3034C21.7125 15.0467 22.3414 13.9686 23.0311 13.0708C24.2441 13.4251 25.5867 13.6333 27.0666 13.6333H27.0852H27.0852C27.1725 13.6333 27.2595 13.6333 27.3471 13.6325C27.5126 14.3995 27.6001 15.1918 27.6001 16C27.6001 16.2522 27.5917 16.5032 27.5751 16.7527C27.2214 16.6682 26.7932 16.5778 26.3039 16.496C24.9997 16.2782 23.2479 16.1196 21.302 16.3034ZM9.03744 25.7661L9.03746 25.7661L9.03748 25.766L9.03747 25.766L9.03744 25.7661ZM8.47011 25.3379C8.43732 25.3116 8.40467 25.2851 8.37216 25.2585C8.2689 25.174 8.16708 25.0878 8.06672 25L8.06668 25C8.19863 25.1155 8.33314 25.2282 8.47008 25.3379L8.47011 25.3379ZM20.1591 18.4507C19.945 20.8247 20.4785 23.3596 21.782 26.0555L21.782 26.0555C20.4785 23.3596 19.945 20.8247 20.1591 18.4507L20.1591 18.4507ZM20.8739 18.3369C20.632 20.5937 21.1115 23.0373 22.3806 25.6852C23.2131 25.1344 23.971 24.478 24.6349 23.7338L24.8075 23.5402L24.7749 23.512L25.0261 23.2106C26.0731 21.9542 26.8486 20.4226 27.2618 18.7591C26.0767 18.445 23.6515 17.9669 20.8841 18.3355L20.8739 18.3369ZM9.22354 25.4074L9.22355 25.4074C9.38438 25.1045 9.54916 24.8119 9.71761 24.5293C9.54916 24.8119 9.38437 25.1045 9.22354 25.4074ZM29.2253 17.6709L29.2255 17.6704C28.9194 20.0298 27.9767 22.2187 26.5831 24.0205C26.5014 24.1261 26.4182 24.2304 26.3334 24.3333L26.3333 24.3333C27.8638 22.4749 28.9012 20.1684 29.2253 17.6709ZM29.2631 17.3489L29.263 17.3489C29.3095 16.9044 29.3333 16.4543 29.3333 16C29.3333 14.7822 29.1707 13.6036 28.8652 12.4838L28.8651 12.4832C29.1708 13.6032 29.3334 14.782 29.3334 16C29.3334 16.4543 29.3096 16.9044 29.2631 17.3489ZM23.1782 27.2123L23.1782 27.2123C24.196 26.5559 25.1223 25.7653 25.9333 24.8667L24.9333 24L24.9334 24L25.9334 24.8666C25.844 24.9657 25.7532 25.0635 25.661 25.1599C24.917 25.938 24.0839 26.6283 23.1782 27.2123ZM24.6763 11.3036C25.3052 11.4262 25.9705 11.5038 26.6737 11.5271C26.4839 11.0851 26.2672 10.6563 26.0259 10.2432C25.6634 10.4899 25.19 10.8436 24.6763 11.3036ZM24.8236 8.54547C24.3377 7.97285 23.7988 7.44744 23.2159 6.97827L22.998 6.80287L22.9956 6.8056L22.6988 6.59064C20.8288 5.23655 18.51 4.4 16.0001 4.4C15.9278 4.4 15.8557 4.40067 15.7837 4.402C15.8382 4.50084 15.897 4.60496 15.9603 4.71369C16.441 5.5403 17.1735 6.62727 18.196 7.68956C19.2592 8.79415 20.6329 9.87045 22.3685 10.602C22.5902 10.3715 22.8109 10.1574 23.0267 9.95927C23.7038 9.33793 24.3388 8.86996 24.8236 8.54547ZM28.5443 11.4706L28.5442 11.4706C27.7056 9.15291 26.2381 7.13215 24.3333 5.60005L24.3334 5.6C24.3684 5.6282 24.4034 5.65656 24.4381 5.68509C24.5065 5.74117 24.5742 5.7979 24.6414 5.85525C26.3965 7.35362 27.7515 9.27941 28.5443 11.4706ZM14.3037 4.52463C14.5849 5.09186 15.0678 5.97201 15.782 6.95307C15.0678 5.97201 14.5849 5.09185 14.3038 4.52462L14.3037 4.52463Z"></path></svg>Chord</button><button class="_tabButton_vgzzc_19 "><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H21V11H19V15.5H16V20H8V15.5H5V11H3V5ZM19.5 6.5H4.5V9.5H5H19H19.5V6.5ZM17.5 11H6.5V14H8H16H17.5V11ZM14.5 15.5H9.5V18.5H14.5V15.5Z"></path></svg>Funnel</button><button class="_tabButton_vgzzc_19 "><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H21L19.5 9.5L18.2143 14.6429L17.5 20H6.5L5.95313 15.3125L4.5 9.5L3 5ZM5.08114 6.5L6.08114 9.5H17.9189L18.9189 6.5H5.08114ZM6.42116 11L7.17116 14H16.8288L17.5788 11H6.42116ZM7.48517 15.5L7.83517 18.5H16.1867L16.5867 15.5H7.48517Z"></path></svg>Cone Funnel</button><button class="_tabButton_vgzzc_19 "><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0203 1.82281L21.1971 20.75H2.26996L12.0203 1.82281ZM4.73003 19.25H18.8029L17.1025 15.743C17.069 15.7476 17.0348 15.75 17 15.75H6.53306L4.73003 19.25ZM7.30579 14.25H16.3786L14.9241 11.25H9C8.9515 11.25 8.90408 11.2454 8.85814 11.2366L7.30579 14.25ZM9.62397 9.74998H14.1968L11.9797 5.17716L9.62397 9.74998Z"></path></svg>Pyramid</button><button class="_tabButton_vgzzc_19 "><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48"><path d="M15.9895 5.00023C17.686 4.99245 19.3674 5.31904 20.9376 5.96134C22.5079 6.60364 23.9361 7.54906 25.1409 8.74357C26.3456 9.93808 27.3031 11.3583 27.9587 12.923C28.6143 14.4877 28.9552 16.1663 28.9618 17.8628C28.9659 20.813 27.9449 23.673 26.0735 25.9536L25.136 27.06L23.4469 25.6327L24.1057 24.8979L24.1732 24.8304C25.7071 23.0668 26.6156 20.8461 26.7576 18.5131H24.0972V16.351H26.69C26.4156 14.4258 25.6148 12.6138 24.3759 11.1148L22.7966 12.6941L21.268 11.1655L22.8473 9.58616C21.1956 8.24659 19.1869 7.42141 17.0705 7.21296V10.4054H14.9085V7.21296C12.7917 7.41994 10.7826 8.24529 9.1317 9.58616L10.711 11.1655L9.18237 12.6941L7.60306 11.1148C6.36414 12.6138 5.56333 14.4258 5.28898 16.351H7.88176V18.5131H5.19608C5.31553 20.7221 6.13822 22.835 7.54394 24.5432L8.49829 25.6327L6.88519 27.06L6.17576 26.2154C4.11303 23.9077 2.9813 20.9158 3.00023 17.8206C3.02479 14.3987 4.40657 11.1265 6.84205 8.72264C9.27754 6.31883 12.5676 4.98 15.9895 5.00023Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17.4337 24.5128L22.208 13L14.0637 22.6083C14.0016 22.6723 13.9437 22.7406 13.8905 22.8125L13.7316 23L13.7587 23.0155C13.594 23.3061 13.5 23.6421 13.5 24C13.5 25.1046 14.3954 26 15.5 26C16.4273 26 17.2072 25.3689 17.4337 24.5128Z"></path></svg>Radial Gauge</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M30 22H16V21H14v1H2v6H14v1h2V28H30zM4 26V24H14v2zm24 0H16V24H28zM30 13H24V12H22v1H2v6H22v1h2V19h6zM4 17V15H22v2zm24 0H24V15h4zM30 4H10V3H8V4H2v6H8v1h2V10H30zM4 8V6H8V8zM28 8H10V6H28z"></path></svg>Linear Gauge</button><button class="_tabButton_vgzzc_19 "><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon _tabButtonIcon_vgzzc_48" xmlns="http://www.w3.org/2000/svg"><path d="M27,28V16H19V28H15V12H7V28H4V2H2V28a2,2,0,0,0,2,2H30V28ZM13,28H9V14h4Zm12,0H21V18h4Z"></path><path d="M22.7856,14a1.9877,1.9877,0,0,1-1.1787-.3865L11.2041,5.987,8.2419,10,6.6374,8.8065l2.9812-4a1.9978,1.9978,0,0,1,2.749-.446l10.4214,7.64,3.6045-4.8613L28,8.3306l-3.6045,4.8611A2.0014,2.0014,0,0,1,22.7856,14Z"></path></svg>Combination</button></div><div class="_exampleContainer_vgzzc_80"><svg xmlns="http://www.w3.org/2000/svg" class="logomark loading" width="64" height="48" viewBox="0 0 64 48" id="loading-bar-simple-horizontal-bar"><style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } .loading rect { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; } .loading rect[class*='right'] { animation-name: logo-mark-bounce-right; animation-duration: 1.25s; animation-play-state: running; } .loading rect[class*='left'] { animation-name: logo-mark-bounce-left; animation-duration: 1.25s; animation-play-state: running; } .right-2 { animation-delay: calc(1.25s / 6); } .right-3 { animation-delay: calc(1.25s / 6 * 2); } .left-3 { animation-delay: calc(1.25s / 6 * 3); } .left-2 { animation-delay: calc(1.25s / 6 * 4); } .left-1 { animation-delay: calc(1.25s / 6 * 5); } @keyframes logo-mark-bounce-right { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(3px); } 33.3333% { transform: translateX(0); } } @keyframes logo-mark-bounce-left { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(-3px); } 33.3333% { transform: translateX(0); } } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg><div id="example-simple-horizontal-bar" class="_exampleOuter_1qn2h_1"><div class="_tabsContainer_1qn2h_18"><div class="_content_o05be_1 _content_1qn2h_60" role="tabpanel" aria-labelledby="Code tab" style="height:620px"><div class="_container_tgh14_1"><iframe id="loading-frame-bar-simple-horizontal-bar" title="Simple Horizontal Bar" class="exampleRunner _iframe_tgh14_9" style="visibility:hidden"></iframe></div></div></div></div></div></div></astro-island> </div> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><div class="_sectionContent_1fkyt_1"><header class="_headingContainer_1fkyt_73"><h2 class="_tag_1fkyt_40">JavaScript Financial Charts - Create Trading Views in Minutes</h2><h3 class="_heading_1fkyt_41">Interactive Financial Charts for Trading and Analysis</h3><h4 class="_subHeading_1fkyt_42">Build interactive financial charts featuring advanced annotations with minimal configuration - just provide your data. Use the toolbar in the example below to add annotations, change the chart type, and interact with the data in real-time.</h4><a href="/charts/react/financial-charts/?utm_source=charts-homepage&utm_medium=financial-charts-section&utm_campaign=homepage-cta" class="_ctaButton_1fkyt_83 button-tertiary">View Financial Charts Features <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></a></header> <div> <div class="container example-runner-outer" style="min-height:700px" data-astro-cid-rewqq5du> <svg xmlns="http://www.w3.org/2000/svg" class="logomark loading" width="64" height="48" viewBox="0 0 64 48" id="loading-financial-charts-financial-charts-showcase" data-astro-cid-rewqq5du="true"><style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } .loading rect { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; } .loading rect[class*='right'] { animation-name: logo-mark-bounce-right; animation-duration: 1.25s; animation-play-state: running; } .loading rect[class*='left'] { animation-name: logo-mark-bounce-left; animation-duration: 1.25s; animation-play-state: running; } .right-2 { animation-delay: calc(1.25s / 6); } .right-3 { animation-delay: calc(1.25s / 6 * 2); } .left-3 { animation-delay: calc(1.25s / 6 * 3); } .left-2 { animation-delay: calc(1.25s / 6 * 4); } .left-1 { animation-delay: calc(1.25s / 6 * 5); } @keyframes logo-mark-bounce-right { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(3px); } 33.3333% { transform: translateX(0); } } @keyframes logo-mark-bounce-left { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(-3px); } 33.3333% { transform: translateX(0); } } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg> <astro-island uid="1He9O4" component-url="/charts/_astro/DocsExampleRunner.BUchJKvS.js" component-export="DocsExampleRunner" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"title":[0,"financial-charts-showcase"],"name":[0,"financial-charts-showcase"],"exampleType":[0,"generated"],"options":[0,{"exampleHeight":[0,700]}],"pageName":[0,"financial-charts"],"internalFrameworkOverride":[0,"vanilla"],"hideCode":[0,true],"hideExternalLinks":[0,true]}" ssr="" client="only" opts="{"name":"DocsExampleRunner","value":"react"}"></astro-island> </div> <script>(function(){const pageName = "financial-charts"; const exampleName = "financial-charts-showcase"; const loadingLogoId = "loading-financial-charts-financial-charts-showcase"; const loadingIFrameId = "loading-frame-financial-charts-financial-charts-showcase"; window.addEventListener('message', ({ data }) => { const isExample = pageName === data?.pageName && exampleName === data?.exampleName; if (!isExample) return; if (data?.type === 'init') { // FIXME - some pages have the same example on the page twice // this code works, but we should move off IDs so we can handle this case document.querySelectorAll('#' + loadingLogoId).forEach((loadingLogoId) => { loadingLogoId.remove(); }); document.querySelectorAll('#' + loadingIFrameId).forEach((iframe) => { iframe.style.visibility = 'visible'; if (document.documentElement.dataset['darkMode'] === 'true') { iframe.contentDocument.documentElement.dataset.darkMode = true; } }); } }); })();</script> </div> </div> <div class="_sectionContent_1fkyt_1"><header class="_headingContainer_1fkyt_73"><h2 class="_tag_1fkyt_40">JavaScript Map Charts - Easily Visualise Geographical Data</h2><h3 class="_heading_1fkyt_41">Customizable JavaScript Map Charts for Geographical Data Visualisation</h3><h4 class="_subHeading_1fkyt_42">Visualise Geographical Areas, Overlay Routes & Connections, Add Markers & Points Of Interest.</h4><a href="/charts/react/maps/?utm_source=charts-homepage&utm_medium=maps-section&utm_campaign=homepage-cta" class="_ctaButton_1fkyt_83 button-tertiary">View Map Charts Features <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></a></header> <div class="_cardContainer_l2qqw_450"> <div class="_card_l2qqw_450"> <h4>Geographic Areas</h4> <p> Visualise data representing geographic areas such as countries, using colours to denote distinct series or the magnitude of the values. </p> <div class="container example-runner-outer" style="min-height:360px" data-astro-cid-rewqq5du> <svg xmlns="http://www.w3.org/2000/svg" class="logomark loading" width="64" height="48" viewBox="0 0 64 48" id="loading-map-shapes-multiple-series" data-astro-cid-rewqq5du="true"><style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } .loading rect { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; } .loading rect[class*='right'] { animation-name: logo-mark-bounce-right; animation-duration: 1.25s; animation-play-state: running; } .loading rect[class*='left'] { animation-name: logo-mark-bounce-left; animation-duration: 1.25s; animation-play-state: running; } .right-2 { animation-delay: calc(1.25s / 6); } .right-3 { animation-delay: calc(1.25s / 6 * 2); } .left-3 { animation-delay: calc(1.25s / 6 * 3); } .left-2 { animation-delay: calc(1.25s / 6 * 4); } .left-1 { animation-delay: calc(1.25s / 6 * 5); } @keyframes logo-mark-bounce-right { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(3px); } 33.3333% { transform: translateX(0); } } @keyframes logo-mark-bounce-left { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(-3px); } 33.3333% { transform: translateX(0); } } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg> <astro-island uid="147IMN" component-url="/charts/_astro/DocsExampleRunner.BUchJKvS.js" component-export="DocsExampleRunner" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"title":[0,"multiple-series"],"name":[0,"multiple-series"],"exampleType":[0,"generated"],"options":[0,{"exampleHeight":[0,360]}],"pageName":[0,"map-shapes"],"internalFrameworkOverride":[0,"vanilla"],"hideCode":[0,true],"hideExternalLinks":[0,true]}" ssr="" client="only" opts="{"name":"DocsExampleRunner","value":"react"}"></astro-island> </div> <script>(function(){const pageName = "map-shapes"; const exampleName = "multiple-series"; const loadingLogoId = "loading-map-shapes-multiple-series"; const loadingIFrameId = "loading-frame-map-shapes-multiple-series"; window.addEventListener('message', ({ data }) => { const isExample = pageName === data?.pageName && exampleName === data?.exampleName; if (!isExample) return; if (data?.type === 'init') { // FIXME - some pages have the same example on the page twice // this code works, but we should move off IDs so we can handle this case document.querySelectorAll('#' + loadingLogoId).forEach((loadingLogoId) => { loadingLogoId.remove(); }); document.querySelectorAll('#' + loadingIFrameId).forEach((iframe) => { iframe.style.visibility = 'visible'; if (document.documentElement.dataset['darkMode'] === 'true') { iframe.contentDocument.documentElement.dataset.darkMode = true; } }); } }); })();</script> </div> <div class="_card_l2qqw_450"> <h4>Routes & Connections</h4> <p> Draw geographic lines, such as roads or flight paths, with the ability to vary width and colour to represent data values. </p> <div class="container example-runner-outer" style="min-height:360px" data-astro-cid-rewqq5du> <svg xmlns="http://www.w3.org/2000/svg" class="logomark loading" width="64" height="48" viewBox="0 0 64 48" id="loading-map-lines-map-shapes-lines" data-astro-cid-rewqq5du="true"><style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } .loading rect { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; } .loading rect[class*='right'] { animation-name: logo-mark-bounce-right; animation-duration: 1.25s; animation-play-state: running; } .loading rect[class*='left'] { animation-name: logo-mark-bounce-left; animation-duration: 1.25s; animation-play-state: running; } .right-2 { animation-delay: calc(1.25s / 6); } .right-3 { animation-delay: calc(1.25s / 6 * 2); } .left-3 { animation-delay: calc(1.25s / 6 * 3); } .left-2 { animation-delay: calc(1.25s / 6 * 4); } .left-1 { animation-delay: calc(1.25s / 6 * 5); } @keyframes logo-mark-bounce-right { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(3px); } 33.3333% { transform: translateX(0); } } @keyframes logo-mark-bounce-left { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(-3px); } 33.3333% { transform: translateX(0); } } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg> <astro-island uid="vgPG2" component-url="/charts/_astro/DocsExampleRunner.BUchJKvS.js" component-export="DocsExampleRunner" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"title":[0,"map-shapes-lines"],"name":[0,"map-shapes-lines"],"exampleType":[0,"generated"],"options":[0,{"exampleHeight":[0,360]}],"pageName":[0,"map-lines"],"internalFrameworkOverride":[0,"vanilla"],"hideCode":[0,true],"hideExternalLinks":[0,true]}" ssr="" client="only" opts="{"name":"DocsExampleRunner","value":"react"}"></astro-island> </div> <script>(function(){const pageName = "map-lines"; const exampleName = "map-shapes-lines"; const loadingLogoId = "loading-map-lines-map-shapes-lines"; const loadingIFrameId = "loading-frame-map-lines-map-shapes-lines"; window.addEventListener('message', ({ data }) => { const isExample = pageName === data?.pageName && exampleName === data?.exampleName; if (!isExample) return; if (data?.type === 'init') { // FIXME - some pages have the same example on the page twice // this code works, but we should move off IDs so we can handle this case document.querySelectorAll('#' + loadingLogoId).forEach((loadingLogoId) => { loadingLogoId.remove(); }); document.querySelectorAll('#' + loadingIFrameId).forEach((iframe) => { iframe.style.visibility = 'visible'; if (document.documentElement.dataset['darkMode'] === 'true') { iframe.contentDocument.documentElement.dataset.darkMode = true; } }); } }); })();</script> </div> <div class="_card_l2qqw_450"> <h4>Makers & POIs</h4> <p> Add markers data for geographic points, with the ability to vary the size to represent data values. </p> <div class="container example-runner-outer" style="min-height:360px" data-astro-cid-rewqq5du> <svg xmlns="http://www.w3.org/2000/svg" class="logomark loading" width="64" height="48" viewBox="0 0 64 48" id="loading-map-markers-marker-size" data-astro-cid-rewqq5du="true"><style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } .loading rect { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; } .loading rect[class*='right'] { animation-name: logo-mark-bounce-right; animation-duration: 1.25s; animation-play-state: running; } .loading rect[class*='left'] { animation-name: logo-mark-bounce-left; animation-duration: 1.25s; animation-play-state: running; } .right-2 { animation-delay: calc(1.25s / 6); } .right-3 { animation-delay: calc(1.25s / 6 * 2); } .left-3 { animation-delay: calc(1.25s / 6 * 3); } .left-2 { animation-delay: calc(1.25s / 6 * 4); } .left-1 { animation-delay: calc(1.25s / 6 * 5); } @keyframes logo-mark-bounce-right { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(3px); } 33.3333% { transform: translateX(0); } } @keyframes logo-mark-bounce-left { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(-3px); } 33.3333% { transform: translateX(0); } } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg> <astro-island uid="Z1lvLVD" component-url="/charts/_astro/DocsExampleRunner.BUchJKvS.js" component-export="DocsExampleRunner" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"title":[0,"marker-size"],"name":[0,"marker-size"],"exampleType":[0,"generated"],"options":[0,{"exampleHeight":[0,360]}],"pageName":[0,"map-markers"],"internalFrameworkOverride":[0,"vanilla"],"hideCode":[0,true],"hideExternalLinks":[0,true]}" ssr="" client="only" opts="{"name":"DocsExampleRunner","value":"react"}"></astro-island> </div> <script>(function(){const pageName = "map-markers"; const exampleName = "marker-size"; const loadingLogoId = "loading-map-markers-marker-size"; const loadingIFrameId = "loading-frame-map-markers-marker-size"; window.addEventListener('message', ({ data }) => { const isExample = pageName === data?.pageName && exampleName === data?.exampleName; if (!isExample) return; if (data?.type === 'init') { // FIXME - some pages have the same example on the page twice // this code works, but we should move off IDs so we can handle this case document.querySelectorAll('#' + loadingLogoId).forEach((loadingLogoId) => { loadingLogoId.remove(); }); document.querySelectorAll('#' + loadingIFrameId).forEach((iframe) => { iframe.style.visibility = 'visible'; if (document.documentElement.dataset['darkMode'] === 'true') { iframe.contentDocument.documentElement.dataset.darkMode = true; } }); } }); })();</script> </div> </div> </div> <script>(()=>{var l=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let a of e)if(a.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=l;window.dispatchEvent(new Event("astro:visible"));})();</script><div class="_sectionContent_1fkyt_1"><header class="_headingContainer_1fkyt_73"><h2 class="_tag_1fkyt_40">AG Grid Integrated JavaScript Charts</h2><h3 class="_heading_1fkyt_41">AG Grid Integrated Charts, Powered by AG Charts</h3><h4 class="_subHeading_1fkyt_42">AG Charts powers the <a href="https://www.ag-grid.com/react-data-grid/integrated-charts/">Integrated Charts</a> feature in <a href="https://www.ag-grid.com/">AG Grid</a> - our market leading data grid library which is used by 90% of the Fortune 500. Purchase an <a href="https://www.ag-grid.com/license-pricing">Enterprise Bundle License</a> to access all of the Enterprise features in both AG Grid and AG Charts.</h4></header> <astro-island uid="1fkyrN" prefix="r5" component-url="/charts/_astro/AutomatedIntegratedChartsWithPackages.CCoja36Q.js" component-export="AutomatedIntegratedChartsWithPackages" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"visibilityThreshold":[0,0.8]}" ssr="" client="visible" opts="{"name":"AutomatedIntegratedChartsWithPackages","value":true}" await-children=""><div></div></astro-island> </div> <div class="_sectionContent_1fkyt_1"><header class="_headingContainer_1fkyt_73"><h2 class="_tag_1fkyt_40">Latest JavaScript Charting Releases from AG Charts</h2><h3 class="_heading_1fkyt_41">Regular Releases, Updates, and Enhancements</h3><h4 class="_subHeading_1fkyt_42">Browse the latest updates to AG Charts JavaScript Charting Library, including new features, series types, functionality and more.</h4><a href="/charts/whats-new/?utm_source=charts-homepage&utm_medium=whats-new-section&utm_campaign=homepage-cta" class="_ctaButton_1fkyt_83 button-tertiary">See Whats New <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></a></header> <div class="_latestNewsVersions_l2qqw_569"> <astro-island uid="Z1bY3YG" prefix="r6" component-url="/charts/_astro/Version.CVWzH9M9.js" component-export="Version" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"isLatest":[0,true],"blogUrl":[0,"https://blog.ag-grid.com/whats-new-in-ag-charts-11-1/"],"version":[0,"11.1.0"],"date":[0,"February 12th 2025"],"highlights":[1,[[0,{"text":[0,"Y Axis Auto Scaling"],"path":[0,"./zoom#auto-scaling"]}],[0,{"text":[0,"Annotations on Cartesian Charts"],"path":[0,"./annotations"]}],[0,{"text":[0,"Theme Parameters"],"path":[0,"./themes/#theme-parameters"]}],[0,{"text":[0,"Touch Interactions"],"path":[0,"./touch"]}]]],"notesPath":[0,"./upgrade-to-ag-charts-11-1"]}" ssr="" client="load" opts="{"name":"Version","value":true}" await-children=""><div class="_version_171yb_16"><div class="_topheader_171yb_121"><header><div class="_flex_171yb_160"><span class="_date_171yb_94">February 12th 2025</span><div class="_flex_171yb_160"><span class="_latestTag_171yb_109">Latest</span></div></div><div class="_flex_171yb_160"><b>Version 11.1.0</b><a class="_bloglink_171yb_151" href="https://blog.ag-grid.com/whats-new-in-ag-charts-11-1/">Read more →</a></div><span class="_line_171yb_117"></span></header><p>Feature Highlights</p><ul><li><a href="/charts/react/zoom#auto-scaling">Y Axis Auto Scaling</a></li><li><a href="/charts/react/annotations/">Annotations on Cartesian Charts</a></li><li><a href="/charts/react/themes/#theme-parameters">Theme Parameters</a></li><li><a href="/charts/react/touch/">Touch Interactions</a></li></ul></div><div><a class="_buttonSecondary_171yb_140 button-secondary" href="/charts/react/upgrade-to-ag-charts-11-1/" target="_blank" rel="noopener noreferrer">See release notes</a><a class="_buttonSecondary_171yb_140 button-secondary" href="/charts/changelog/?fixVersion=11.1.0" target="_blank" rel="noopener noreferrer">See all changes</a></div></div></astro-island><astro-island uid="Z1Ee7Mv" prefix="r7" component-url="/charts/_astro/Version.CVWzH9M9.js" component-export="Version" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"isLatest":[0,false],"blogUrl":[0,"https://blog.ag-grid.com/whats-new-in-ag-charts-11/"],"version":[0,"11.0.0"],"date":[0,"December 11th 2024"],"highlights":[1,[[0,{"text":[0,"Fibonacci Tools"],"path":[0,"./financial-charts-toolbar#fibonacci-tools"]}],[0,{"text":[0,"Grouped Category Axis"],"path":[0,"./axes-types/#grouped-category"]}],[0,{"text":[0,"Save and Restore Chart State"],"path":[0,"./api-state/"]}]]],"notesPath":[0,"./upgrade-to-ag-charts-11"]}" ssr="" client="load" opts="{"name":"Version","value":true}" await-children=""><div class="_version_171yb_16"><div class="_topheader_171yb_121"><header><div class="_flex_171yb_160"><span class="_date_171yb_94">December 11th 2024</span><div class="_flex_171yb_160"><span class="_majorText_171yb_102">Major</span></div></div><div class="_flex_171yb_160"><b>Version 11.0.0</b><a class="_bloglink_171yb_151" href="https://blog.ag-grid.com/whats-new-in-ag-charts-11/">Read more →</a></div><span class="_line_171yb_117"></span></header><p>Feature Highlights</p><ul><li><a href="/charts/react/financial-charts-toolbar#fibonacci-tools">Fibonacci Tools</a></li><li><a href="/charts/react/axes-types/#grouped-category">Grouped Category Axis</a></li><li><a href="/charts/react/api-state/">Save and Restore Chart State</a></li></ul></div><div><a class="_buttonSecondary_171yb_140 button-secondary" href="/charts/react/upgrade-to-ag-charts-11/" target="_blank" rel="noopener noreferrer">See migration guide</a><a class="_buttonSecondary_171yb_140 button-secondary" href="/charts/changelog/?fixVersion=11.0.0" target="_blank" rel="noopener noreferrer">See all changes</a></div></div></astro-island><astro-island uid="Z1DJKLD" prefix="r8" component-url="/charts/_astro/Version.CVWzH9M9.js" component-export="Version" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"isLatest":[0,false],"blogUrl":[0,"https://blog.ag-grid.com/whats-new-in-ag-charts-10-3/"],"version":[0,"10.3.0"],"date":[0,"October 22nd 2024"],"highlights":[1,[[0,{"text":[0,"Funnel Series"],"path":[0,"./funnel-series"]}],[0,{"text":[0,"Cone Funnel Series"],"path":[0,"./cone-funnel-series"]}],[0,{"text":[0,"Pyramid Series"],"path":[0,"./pyramid-series"]}],[0,{"text":[0,"Measuring Tools"],"path":[0,"./financial-charts-toolbar#measuring-tools"]}]]],"notesPath":[0,"./upgrade-to-ag-charts-10-3"]}" ssr="" client="load" opts="{"name":"Version","value":true}" await-children=""><div class="_version_171yb_16"><div class="_topheader_171yb_121"><header><div class="_flex_171yb_160"><span class="_date_171yb_94">October 22nd 2024</span><div class="_flex_171yb_160"></div></div><div class="_flex_171yb_160"><b>Version 10.3.0</b><a class="_bloglink_171yb_151" href="https://blog.ag-grid.com/whats-new-in-ag-charts-10-3/">Read more →</a></div><span class="_line_171yb_117"></span></header><p>Feature Highlights</p><ul><li><a href="/charts/react/funnel-series/">Funnel Series</a></li><li><a href="/charts/react/cone-funnel-series/">Cone Funnel Series</a></li><li><a href="/charts/react/pyramid-series/">Pyramid Series</a></li><li><a href="/charts/react/financial-charts-toolbar#measuring-tools">Measuring Tools</a></li></ul></div><div><a class="_buttonSecondary_171yb_140 button-secondary" href="/charts/react/upgrade-to-ag-charts-10-3/" target="_blank" rel="noopener noreferrer">See release notes</a><a class="_buttonSecondary_171yb_140 button-secondary" href="/charts/changelog/?fixVersion=10.3.0" target="_blank" rel="noopener noreferrer">See all changes</a></div></div></astro-island> </div> </div> <div class="_sectionContent_1fkyt_1"><header class="_headingContainer_1fkyt_73"><h2 class="_tag_1fkyt_40">JavaScript Charts Frequently Asked Questions</h2><h3 class="_heading_1fkyt_41">FAQs</h3><h4 class="_subHeading_1fkyt_42">Answers to common questions about AG Charts, and JavaScript Charting in general.</h4></header> <astro-island uid="Z1YaLDb" prefix="r9" component-url="/charts/_astro/LandingPageFAQ.BdbGivJG.js" component-export="LandingPageFAQ" renderer-url="/charts/_astro/client.DSaewLOF.js" props="{"FAQData":[1,[[0,{"question":[0,"What are AG Charts JavaScript charts?"],"answer":[0,"AG Charts [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) are powerful, interactive data visualization tools for web applications. They offer a wide range of chart types and customization options, making them ideal for creating dynamic and responsive [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs)."]}],[0,{"question":[0,"How do AG Charts compare to other JavaScript chart libraries?"],"answer":[0,"AG Charts stands out among JavaScript chart libraries with its high performance, extensive customization options, and seamless integration with [AG Grid](https://www.ag-grid.com/?utm_source=charts-homepage&amp;utm_medium=faqs). It also provides superior [documentation](https://www.ag-grid.com/charts/react/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) and support compared to many other JavaScript chart solutions."]}],[0,{"question":[0,"Are AG Charts JavaScript charts responsive?"],"answer":[0,"Yes, AG Charts [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) are fully responsive out of the box. They automatically adjust to different screen sizes and devices, ensuring your [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) look great on desktops, tablets, and mobile phones."]}],[0,{"question":[0,"Can I create real time updating JavaScript charts with AG Charts?"],"answer":[0,"Absolutely! AG Charts supports [real time](https://blog.ag-grid.com/updating-bar-chart-in-real-time/?utm_source=charts-homepage&amp;utm_medium=faqs) data updates for [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs). You can easily create dynamic charts that update as new data becomes available, making it perfect for live dashboards and monitoring applications."]}],[0,{"question":[0,"What interactivity features do AG Charts JavaScript charts offer?"],"answer":[0,"AG Charts [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) provide rich interactivity options, including [tooltips](https://www.ag-grid.com/charts/react/tooltips/?utm_source=charts-homepage&amp;utm_medium=faqs), [zooming](https://www.ag-grid.com/charts/react/zoom/?utm_source=charts-homepage&amp;utm_medium=faqs) and [panning](https://www.ag-grid.com/charts/react/navigator/?utm_source=charts-homepage&amp;utm_medium=faqs), [context menus](https://www.ag-grid.com/charts/react/context-menu/?utm_source=charts-homepage&amp;utm_medium=faqs) and [click events](https://www.ag-grid.com/charts/react/events/?utm_source=charts-homepage&amp;utm_medium=faqs). You can customize these features to create engaging user experiences with your [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs)."]}],[0,{"question":[0,"Can I export AG Charts JavaScript charts as images?"],"answer":[0,"Yes, AG Charts offers built-in export functionality for [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs). You can easily [export your charts](https://www.ag-grid.com/charts/react/api-download?utm_source=charts-homepage&amp;utm_medium=faqs) as PNG files, making it simple to include them in reports or share them with others."]}],[0,{"question":[0,"How do I integrate AG Charts JavaScript charts with React?"],"answer":[0,"AG Charts provides official React wrappers for its [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs), making integration seamless. Simply install the [AG Charts React](https://www.ag-grid.com/charts/react/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) package and use the provided components to create [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) in your React projects."]}],[0,{"question":[0,"Are AG Charts JavaScript charts accessible?"],"answer":[0,"Yes, AG Charts [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) are designed with [accessibility](https://www.ag-grid.com/charts/react/accessibility/?utm_source=charts-homepage&amp;utm_medium=faqs) in mind. They include features like keyboard navigation and ARIA labels to ensure your charts are usable by people with disabilities and comply with [accessibility](https://www.ag-grid.com/charts/react/accessibility/?utm_source=charts-homepage&amp;utm_medium=faqs) standards."]}],[0,{"question":[0,"How customizable are AG Charts JavaScript charts?"],"answer":[0,"AG Charts [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) offer extensive customization options. You can easily modify colors, fonts, styles, and layouts to match your application's design. The API also allows for advanced customizations for your [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs)."]}],[0,{"question":[0,"How do AG Charts JavaScript charts perform with large datasets?"],"answer":[0,"AG Charts [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) are optimized for performance with large datasets. We use efficient rendering techniques to handle hundreds of thousands of data points smoothly, ensuring your [JavaScript charts](https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&amp;utm_medium=faqs) remain responsive even with substantial amounts of data."]}]]],"framework":[0,"react"]}" ssr="" client="load" opts="{"name":"LandingPageFAQ","value":true}" await-children=""><div class="_container_6fyvh_1"><div class="_column_6fyvh_10"> <div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">What are AG Charts JavaScript charts?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">AG Charts <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> are powerful, interactive data visualization tools for web applications. They offer a wide range of chart types and customization options, making them ideal for creating dynamic and responsive <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a>.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">Are AG Charts JavaScript charts responsive?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">Yes, AG Charts <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> are fully responsive out of the box. They automatically adjust to different screen sizes and devices, ensuring your <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> look great on desktops, tablets, and mobile phones.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">What interactivity features do AG Charts JavaScript charts offer?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">AG Charts <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> provide rich interactivity options, including <a href="https://www.ag-grid.com/charts/react/tooltips/?utm_source=charts-homepage&utm_medium=faqs">tooltips</a>, <a href="https://www.ag-grid.com/charts/react/zoom/?utm_source=charts-homepage&utm_medium=faqs">zooming</a> and <a href="https://www.ag-grid.com/charts/react/navigator/?utm_source=charts-homepage&utm_medium=faqs">panning</a>, <a href="https://www.ag-grid.com/charts/react/context-menu/?utm_source=charts-homepage&utm_medium=faqs">context menus</a> and <a href="https://www.ag-grid.com/charts/react/events/?utm_source=charts-homepage&utm_medium=faqs">click events</a>. You can customize these features to create engaging user experiences with your <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a>.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">How do I integrate AG Charts JavaScript charts with React?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">AG Charts provides official React wrappers for its <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a>, making integration seamless. Simply install the <a href="https://www.ag-grid.com/charts/react/quick-start/?utm_source=charts-homepage&utm_medium=faqs">AG Charts React</a> package and use the provided components to create <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> in your React projects.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">How customizable are AG Charts JavaScript charts?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">AG Charts <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> offer extensive customization options. You can easily modify colors, fonts, styles, and layouts to match your application's design. The API also allows for advanced customizations for your <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a>.</div></div></div></div></div><div class="_column_6fyvh_10"> <div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">How do AG Charts compare to other JavaScript chart libraries?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">AG Charts stands out among JavaScript chart libraries with its high performance, extensive customization options, and seamless integration with <a href="https://www.ag-grid.com/?utm_source=charts-homepage&utm_medium=faqs">AG Grid</a>. It also provides superior <a href="https://www.ag-grid.com/charts/react/quick-start/?utm_source=charts-homepage&utm_medium=faqs">documentation</a> and support compared to many other JavaScript chart solutions.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">Can I create real time updating JavaScript charts with AG Charts?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">Absolutely! AG Charts supports <a href="https://blog.ag-grid.com/updating-bar-chart-in-real-time/?utm_source=charts-homepage&utm_medium=faqs">real time</a> data updates for <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a>. You can easily create dynamic charts that update as new data becomes available, making it perfect for live dashboards and monitoring applications.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">Can I export AG Charts JavaScript charts as images?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">Yes, AG Charts offers built-in export functionality for <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a>. You can easily <a href="https://www.ag-grid.com/charts/react/api-download?utm_source=charts-homepage&utm_medium=faqs">export your charts</a> as PNG files, making it simple to include them in reports or share them with others.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">Are AG Charts JavaScript charts accessible?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">Yes, AG Charts <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> are designed with <a href="https://www.ag-grid.com/charts/react/accessibility/?utm_source=charts-homepage&utm_medium=faqs">accessibility</a> in mind. They include features like keyboard navigation and ARIA labels to ensure your charts are usable by people with disabilities and comply with <a href="https://www.ag-grid.com/charts/react/accessibility/?utm_source=charts-homepage&utm_medium=faqs">accessibility</a> standards.</div></div></div></div><div class="_questionContainer_6fyvh_20 plausible-event-name=react-table-expand-faq"><div class="_titleContainer_6fyvh_34"><span class="_question_6fyvh_20">How do AG Charts JavaScript charts perform with large datasets?</span><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _expandIcon_6fyvh_55"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg></div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_answerContainer_6fyvh_65">AG Charts <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> are optimized for performance with large datasets. We use efficient rendering techniques to handle hundreds of thousands of data points smoothly, ensuring your <a href="https://www.ag-grid.com/charts/javascript/quick-start/?utm_source=charts-homepage&utm_medium=faqs">JavaScript charts</a> remain responsive even with substantial amounts of data.</div></div></div></div></div></div></astro-island> </div> </div> </div> <footer class="_footer_1rqr6_2"><div class="_footerColumns_1rqr6_31 layout-grid"><div class="_menuColumn_1rqr6_43"><div class="_logoContainer_1rqr6_123"><a href="/charts/" aria-label="Home" class="_headerLogo_1agp5_36"><svg xmlns="http://www.w3.org/2000/svg" class="logotype" width="198" height="40" viewBox="0 0 198 40"><style> .logotype path { fill: #fff; } .logotype.dark-type>path { fill: #003264; } </style><path d="M25.779 28.657h-12.42l-2.186 5.355h-5.5L17.182 7.06h4.771l11.509 26.952h-5.5l-2.186-5.355h.003Zm-1.711-4.26-4.48-10.963-4.481 10.963h8.961ZM62.092 18.823H49.817v4.263h6.958c-.22 2.136-1.02 3.841-2.403 5.116-1.383 1.274-3.206 1.913-5.463 1.913-1.287 0-2.459-.23-3.516-.692a7.776 7.776 0 0 1-2.713-1.947c-.753-.837-1.336-1.845-1.749-3.023-.412-1.178-.62-2.483-.62-3.916 0-1.432.205-2.737.62-3.916.413-1.178.996-2.185 1.749-3.023a7.763 7.763 0 0 1 2.731-1.947c1.067-.462 2.245-.691 3.535-.691 2.666 0 4.691.642 6.074 1.925l3.28-3.28C55.817 7.67 52.676 6.7 48.872 6.7c-2.112 0-4.019.335-5.718 1.001-1.699.667-3.156 1.603-4.371 2.803-1.216 1.203-2.149 2.654-2.806 4.353-.658 1.699-.983 3.594-.983 5.683 0 2.09.335 3.954 1.001 5.665.667 1.711 1.61 3.169 2.822 4.372 1.215 1.203 2.669 2.136 4.371 2.806 1.7.666 3.594 1.001 5.684 1.001 2.089 0 3.878-.335 5.518-1.001 1.641-.667 3.036-1.603 4.189-2.806 1.154-1.203 2.04-2.661 2.66-4.372.621-1.711.931-3.6.931-5.665a19.88 19.88 0 0 0-.075-1.711l-.003-.006ZM151.81 16.981c1.6-2.372 5.609-2.623 7.212-2.623v4.552c-2.065 0-4.037.086-5.265.982-1.228.9-1.838 2.09-1.838 3.572V33.99h-4.955V14.358h4.772l.074 2.623ZM143.011 14.361v19.67h-4.771l-.109-2.986a7.269 7.269 0 0 1-2.66 2.459c-1.095.595-2.403.892-3.935.892-1.336 0-2.573-.244-3.714-.728a8.714 8.714 0 0 1-2.967-2.059c-.837-.887-1.501-1.947-1.984-3.187-.487-1.237-.729-2.611-.729-4.118 0-1.506.242-2.926.729-4.188.486-1.262 1.147-2.344 1.984-3.243a8.79 8.79 0 0 1 2.967-2.093c1.141-.499 2.381-.747 3.714-.747 1.507 0 2.794.285 3.861.855a7.529 7.529 0 0 1 2.66 2.388v-2.915h4.954Zm-10.38 15.772c1.625 0 2.936-.539 3.934-1.621.996-1.082 1.495-2.521 1.495-4.316s-.499-3.206-1.495-4.297c-.995-1.092-2.306-1.641-3.934-1.641-1.628 0-2.902.546-3.897 1.641-.996 1.094-1.495 2.539-1.495 4.334 0 1.795.496 3.2 1.495 4.282.995 1.079 2.294 1.621 3.897 1.621v-.003ZM93.698 27.876a7.077 7.077 0 0 1-.369.366c-1.382 1.274-3.206 1.913-5.463 1.913-1.286 0-2.458-.229-3.516-.691a7.785 7.785 0 0 1-2.713-1.947c-.753-.838-1.336-1.845-1.748-3.023-.413-1.179-.62-2.484-.62-3.916 0-1.433.204-2.738.62-3.916.412-1.178.995-2.186 1.748-3.023a7.766 7.766 0 0 1 2.732-1.947c1.067-.462 2.245-.692 3.534-.692 2.667 0 4.692.642 6.074 1.926l3.281-3.281c-2.484-1.934-5.625-2.905-9.429-2.905-2.111 0-4.018.335-5.717 1.002-1.699.666-3.156 1.603-4.372 2.803-1.215 1.202-2.148 2.654-2.806 4.353-.657 1.699-.983 3.593-.983 5.683 0 2.089.335 3.953 1.002 5.664.666 1.712 1.609 3.169 2.821 4.372 1.216 1.203 2.67 2.136 4.372 2.806 1.699.667 3.593 1.001 5.683 1.001s3.879-.334 5.519-1.001c1.37-.558 2.57-1.302 3.6-2.232.201-.183.4-.376.589-.571l-3.836-2.735-.003-.009ZM110.802 14.015c-1.603 0-3.966.456-5.191 2.143l-.074-10.142h-4.772v27.923h4.955V22.641a4.463 4.463 0 0 1 4.638-4.267c3.039 0 3.91 2.785 3.91 4.267v11.298h4.955v-12.88s-.081-7.044-8.421-7.044ZM173.763 14.358h-3.764V8.715h-4.951v5.643h-3.764v4.558h3.764v15.087h4.951V18.916h3.764v-4.558ZM190.787 25.262a6.672 6.672 0 0 0-2.403-1.761c-.896-.384-2.053-.769-3.436-1.137a36.605 36.605 0 0 1-2.325-.738 3.609 3.609 0 0 1-1.24-.751 1.377 1.377 0 0 1-.456-1.057c0-.546.229-.974.698-1.308.496-.354 1.237-.534 2.201-.534s1.761.233 2.322.692c.558.456.859 1.057.924 1.832l.022.282h4.539l-.016-.322c-.096-1.975-.846-3.56-2.232-4.71-1.373-1.138-3.2-1.717-5.423-1.717-1.485 0-2.821.254-3.968.753-1.163.505-2.068 1.209-2.698 2.096a5.047 5.047 0 0 0-.955 2.967c0 1.318.357 2.4 1.058 3.215a6.424 6.424 0 0 0 2.443 1.78c.902.372 2.086.763 3.519 1.156 1.445.41 2.511.785 3.169 1.123.57.291.849.722.849 1.321 0 .598-.257 1.023-.784 1.395-.552.387-1.358.586-2.394.586-1.035 0-1.807-.251-2.452-.751-.636-.493-.977-1.085-1.039-1.81l-.025-.282h-4.672l.012.319a5.86 5.86 0 0 0 1.163 3.305c.719.974 1.705 1.752 2.93 2.313 1.218.558 2.614.843 4.148.843 1.535 0 2.843-.254 3.972-.753 1.138-.505 2.034-1.215 2.663-2.115.633-.902.952-1.94.952-3.091-.025-1.293-.387-2.35-1.076-3.141h.01Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="logo-mark" width="64" height="48" viewBox="0 0 64 48"><style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg></a></div><p class="text-sm">© AG Grid Ltd. 2015-2025</p><p class="text-sm">AG Grid Ltd registered in the United Kingdom. Company No. 07318192.</p></div><div class="_menuColumn_1rqr6_43"><h2>Documentation</h2><ul class="list-style-none"><li><a href="/charts/documentation/">Getting Started</a></li><li><a href="/charts/changelog/">Changelog</a></li><li><a href="/charts/pipeline/">Pipeline</a></li><li><a href="/charts/documentation-archive">Documentation Archive</a></li></ul></div><div class="_menuColumn_1rqr6_43"><h2>Support & Community</h2><ul class="list-style-none"><li><a href="https://blog.ag-grid.com/?_ga=2.213149716.106872681.1607518091-965402545.1605286673">Blog</a></li><li><a href="https://stackoverflow.com/questions/tagged/ag-charts" target="_blank" rel="noreferrer">Stack Overflow</a></li><li><a href="/charts/license-pricing">License & Pricing</a></li><li><a href="https://ag-grid.zendesk.com/" target="_blank" rel="noreferrer">Support via Zendesk</a></li></ul></div><div class="_menuColumn_1rqr6_43"><h2>The Company</h2><ul class="list-style-none"><li><a href="https://www.ag-grid.com/">AG Grid</a></li><li><a href="https://www.ag-grid.com/about/">About</a></li><li><a href="/charts/privacy">Privacy Policy</a></li><li><a href="/charts/cookies">Cookies Policy</a></li><li><a href="/charts/sitemap">Sitemap</a></li></ul></div><div class="_menuColumn_1rqr6_43"><h2>Follow</h2><ul class="list-style-none"><li><a href="https://github.com/ag-grid/ag-charts"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg>GitHub</a></li><li><a href="https://twitter.com/ag_grid"><svg width="1092" height="1075" viewBox="0 0 1092 1075" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 icon"><g clip-path="url(#clip0_404_5)"><path d="M622.109 475.189L919.927 129H849.353L590.758 429.591L384.219 129H146L458.328 583.547L146 946.58H216.577L489.661 629.145L707.781 946.58H946L622.091 475.189H622.109ZM525.443 587.552L493.798 542.289L242.007 182.13H350.41L553.608 472.79L585.253 518.053L849.387 895.867H740.984L525.443 587.569V587.552Z"></path></g><defs><clipPath id="clip0_404_5"><rect width="800" height="818" transform="translate(146 129)"></rect></clipPath></defs></svg>X</a></li><li><a href="https://youtube.com/c/ag-grid"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z"></path></svg>YouTube</a></li><li><a href="https://www.linkedin.com/company/ag-grid"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M26.2,4H5.8C4.8,4,4,4.8,4,5.7v20.5c0,0.9,0.8,1.7,1.8,1.7h20.4c1,0,1.8-0.8,1.8-1.7V5.7C28,4.8,27.2,4,26.2,4z M11.1,24.4 H7.6V13h3.5V24.4z M9.4,11.4c-1.1,0-2.1-0.9-2.1-2.1c0-1.2,0.9-2.1,2.1-2.1c1.1,0,2.1,0.9,2.1,2.1S10.5,11.4,9.4,11.4z M24.5,24.3 H21v-5.6c0-1.3,0-3.1-1.9-3.1c-1.9,0-2.1,1.5-2.1,2.9v5.7h-3.5V13h3.3v1.5h0.1c0.5-0.9,1.7-1.9,3.4-1.9c3.6,0,4.3,2.4,4.3,5.5V24.3z"></path></svg>LinkedIn</a></li></ul></div></div></footer> </body> </html>