diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 004b22c..e848002 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -59,4 +59,4 @@ body:
       label: What version of ODS Charts are you using?
       placeholder: "e.g., v1.0.0"
     validations:
-      required: true
\ No newline at end of file
+      required: true
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
index bb494f8..90ed3e9 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -26,4 +26,4 @@ body:
       label: Motivation and context
       description: Tell us why this change is needed or helpful, and what problems it may help solve.
     validations:
-      required: true
\ No newline at end of file
+      required: true
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 2253745..2e64cd6 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -30,7 +30,7 @@ updates:
     groups:
       angular-ngx-echarts-all-deps:
         patterns:
-        - "*"
+          - "*"
   - package-ecosystem: npm
     directory: "/test/angular-echarts"
     labels:
@@ -41,7 +41,7 @@ updates:
     groups:
       angular-echarts-all-deps:
         patterns:
-        - "*"
+          - "*"
   - package-ecosystem: npm
     directory: "/test/react"
     labels:
@@ -52,7 +52,7 @@ updates:
     groups:
       react-all-deps:
         patterns:
-        - "*"
+          - "*"
   - package-ecosystem: npm
     directory: "/test/vue"
     labels:
@@ -63,4 +63,4 @@ updates:
     groups:
       vue-all-deps:
         patterns:
-        - "*"
+          - "*"
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 9c98717..38a11cc 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
diff --git a/DEVELOP.md b/DEVELOP.md
index 1211d96..c5d0290 100644
--- a/DEVELOP.md
+++ b/DEVELOP.md
@@ -22,5 +22,6 @@ npm run serve
 ```
 
 The server will be available at `http://localhost:3000/`:
+
 - Test files are located at `http://localhost:3000/test`.
 - Documentation is located at `http://localhost:3000/docs`.
diff --git a/build/add_head.mjs b/build/add_head.mjs
index ae5c822..1691cbc 100644
--- a/build/add_head.mjs
+++ b/build/add_head.mjs
@@ -1,5 +1,5 @@
-import fs from "node:fs";
-import path from "node:path";
+import fs from 'node:fs';
+import path from 'node:path';
 
 function fromDir(startPath, filter, prefix = '../') {
   const favicon = `
@@ -26,10 +26,13 @@ function fromDir(startPath, filter, prefix = '../') {
     if (stat.isDirectory()) {
       fromDir(filename, filter, `${prefix}../`);
     } else if (filename.endsWith(filter)) {
-      fs.writeFileSync(filename, fs.readFileSync(filename).toString().replace("<head>", `<head>${boosted_CSS}${favicon}`).replace("</body>", `\n${cookies}\n</body>`));
-    };
-  };
-};
+      fs.writeFileSync(
+        filename,
+        fs.readFileSync(filename).toString().replace('<head>', `<head>${boosted_CSS}${favicon}`).replace('</body>', `\n${cookies}\n</body>`)
+      );
+    }
+  }
+}
 
-console.log(`\n\nAdding cookies to API files\n`)
+console.log(`\n\nAdding cookies to API files\n`);
 fromDir('./docs/api', '.html');
diff --git a/build/bump-copyright-year.mjs b/build/bump-copyright-year.mjs
index 25e3588..5416155 100644
--- a/build/bump-copyright-year.mjs
+++ b/build/bump-copyright-year.mjs
@@ -1,19 +1,25 @@
-import fs from "node:fs";
-import path from "node:path";
+import fs from 'node:fs';
+import path from 'node:path';
 
 function fromDir(startPath, filter) {
   var files = fs.readdirSync(startPath);
   for (var i = 0; i < files.length; i++) {
     var filename = path.join(startPath, files[i]);
     var stat = fs.lstatSync(filename);
-    if (stat.isDirectory() && !filename.endsWith("node_modules") && !filename.endsWith("dist") && !filename.endsWith("docs/api")) {
+    if (stat.isDirectory() && !filename.endsWith('node_modules') && !filename.endsWith('dist') && !filename.endsWith('docs/api')) {
       fromDir(filename, filter);
     } else if (filename.endsWith(filter)) {
       console.log(`Bump copyright year in ${filename}`);
-      fs.writeFileSync(filename, fs.readFileSync(filename).toString().replaceAll(/(\d{4,} - )\d{4,}/g, `$1${new Date().getFullYear()}`));
-    };
-  };
-};
+      fs.writeFileSync(
+        filename,
+        fs
+          .readFileSync(filename)
+          .toString()
+          .replaceAll(/(\d{4,} - )\d{4,}/g, `$1${new Date().getFullYear()}`)
+      );
+    }
+  }
+}
 
 console.log(`Bump copyright year\n`);
 fromDir('./src', '');
diff --git a/docs/assets/tarteaucitron-config.css b/docs/assets/tarteaucitron-config.css
index 561c363..ad7d215 100644
--- a/docs/assets/tarteaucitron-config.css
+++ b/docs/assets/tarteaucitron-config.css
@@ -3,222 +3,222 @@
  * See https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/site/assets/scss/_tarteaucitron.scss
  */
 [id="tarteaucitron"] {
-  position:fixed;
-  left:50%;
-  z-index:1055;
-  display:none;
-  width:100%;
-  padding:1.25rem 0;
-  background-color:var(--bs-body-bg);
-  background-clip:padding-box;
-  border:var(--bs-border-width) solid var(--bs-border-color-subtle);
-  transform:translateX(-50%)
+  position: fixed;
+  left: 50%;
+  z-index: 1055;
+  display: none;
+  width: 100%;
+  padding: 1.25rem 0;
+  background-color: var(--bs-body-bg);
+  background-clip: padding-box;
+  border: var(--bs-border-width) solid var(--bs-border-color-subtle);
+  transform: translateX(-50%);
 }
 [id="tarteaucitron"] [role="heading"] {
-  display:block;
-  font-weight:700
+  display: block;
+  font-weight: 700;
 }
 @media (min-width: 480px) {
   [id="tarteaucitron"] {
-    max-width:300px;
-    margin:1.875rem auto
+    max-width: 300px;
+    margin: 1.875rem auto;
   }
 }
 @media (min-width: 768px) {
   [id="tarteaucitron"] {
-    max-width:460px
+    max-width: 460px;
   }
 }
 @media (min-width: 1024px) {
   [id="tarteaucitron"] {
-    max-width:787.5px
+    max-width: 787.5px;
   }
 }
 @media (min-width: 1280px) {
   [id="tarteaucitron"] {
-    max-width:1175px
+    max-width: 1175px;
   }
 }
 [id="tarteaucitronRoot"] {
-  position:absolute;
-  top:0;
-  right:0;
-  left:0;
-  z-index:1055;
-  width:100%
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1055;
+  width: 100%;
 }
 [id="tarteaucitronAlertBig"] {
-  position:fixed;
-  right:0;
-  bottom:0;
-  left:0;
-  display:none;
-  align-items:center;
-  padding:1.25rem calc((100% - var(--max-width, 312px)) / 2);
-  font-weight:700;
-  color:#fff;
-  background:#000;
-  border-top:var(--bs-border-width) solid var(--bs-border-color-subtle);
-  --max-width: 312px
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  align-items: center;
+  padding: 1.25rem calc((100% - var(--max-width, 312px)) / 2);
+  font-weight: 700;
+  color: #fff;
+  background: #000;
+  border-top: var(--bs-border-width) solid var(--bs-border-color-subtle);
+  --max-width: 312px;
 }
 [id="tarteaucitronAlertBig"][style*="display: block"] {
-  display:flex !important;
-  flex-wrap:wrap;
-  justify-content:center
+  display: flex !important;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 @media (min-width: 480px) {
   [id="tarteaucitronAlertBig"] {
-    --max-width: 468px
+    --max-width: 468px;
   }
 }
 @media (min-width: 768px) {
   [id="tarteaucitronAlertBig"] {
-    --max-width: 744px
+    --max-width: 744px;
   }
 }
 @media (min-width: 1024px) {
   [id="tarteaucitronAlertBig"] {
-    --max-width: 960px
+    --max-width: 960px;
   }
 }
 @media (min-width: 1280px) {
   [id="tarteaucitronAlertBig"] {
-    --max-width: 1200px
+    --max-width: 1200px;
   }
 }
 @media (min-width: 1440px) {
   [id="tarteaucitronAlertBig"] {
-    --max-width: 1320px
+    --max-width: 1320px;
   }
 }
 [id="tarteaucitronDisclaimerAlert"] {
-  font-size:.875rem
+  font-size: 0.875rem;
 }
 [id="tarteaucitronClosePanel"] {
-  position:absolute;
-  right:1.25rem 0;
-  margin:-.625rem calc(var(--bs-icon-spacing, calc(.625rem - (var(--bs-border-width)))) * -1) calc(var(--bs-icon-spacing, calc(.625rem - (var(--bs-border-width)))) * -1) auto;
-  overflow:hidden;
-  text-indent:2ch;
-  white-space:nowrap
+  position: absolute;
+  right: 1.25rem 0;
+  margin: -0.625rem calc(var(--bs-icon-spacing, calc(0.625rem - (var(--bs-border-width)))) * -1) calc(var(--bs-icon-spacing, calc(0.625rem - (var(--bs-border-width)))) * -1) auto;
+  overflow: hidden;
+  text-indent: 2ch;
+  white-space: nowrap;
 }
 [id="tarteaucitronBack"] {
-  position:fixed;
-  top:0;
-  left:0;
-  z-index:1050;
-  display:none;
-  width:100%;
-  height:100%;
-  margin:0 !important;
-  background:#000;
-  border:0;
-  opacity:.5
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  display: none;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  background: #000;
+  border: 0;
+  opacity: 0.5;
 }
 .tarteaucitronH1 {
-  margin-bottom:1.25rem;
-  font-size:1.875rem;
-  letter-spacing:-.05rem
+  margin-bottom: 1.25rem;
+  font-size: 1.875rem;
+  letter-spacing: -0.05rem;
 }
 .tarteaucitronH2 {
-  padding-top:.125rem;
-  font-size:1.25rem;
-  letter-spacing:-.025rem
+  padding-top: 0.125rem;
+  font-size: 1.25rem;
+  letter-spacing: -0.025rem;
 }
 .tarteaucitronH3 {
-  font-size:1rem;
-  letter-spacing:-.00625rem
+  font-size: 1rem;
+  letter-spacing: -0.00625rem;
 }
 [id="tarteaucitronInfo"] {
-  padding:.625rem 0;
-  margin-bottom:1.25rem;
-  font-weight:700
+  padding: 0.625rem 0;
+  margin-bottom: 1.25rem;
+  font-weight: 700;
 }
 .tarteaucitronName {
-  float:left;
-  font-size:.875rem;
-  color:var(--bs-secondary-color)
+  float: left;
+  font-size: 0.875rem;
+  color: var(--bs-secondary-color);
 }
 .tarteaucitronAsk {
-  float:right
+  float: right;
 }
 .tarteaucitronLine {
-  overflow:visible
+  overflow: visible;
 }
 .tarteaucitronLine::after {
-  display:block;
-  clear:both;
-  content:""
+  display: block;
+  clear: both;
+  content: "";
 }
 .tarteaucitronMainLine {
-  padding-bottom:1.25rem;
-  margin-bottom:1.25rem;
-  border-bottom:var(--bs-border-width) solid var(--bs-border-color-subtle)
+  padding-bottom: 1.25rem;
+  margin-bottom: 1.25rem;
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color-subtle);
 }
 [id="tarteaucitronServices"] {
-  overflow:visible !important
+  overflow: visible !important;
 }
 [id="tarteaucitronServices"] ul {
-  padding-left:0;
-  margin-bottom:0;
-  list-style:none
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
 }
 .tarteaucitronSelfLink {
-  position:absolute;
-  right:1.25rem 0;
-  bottom:calc(-1.875rem + var(--bs-border-width));
-  padding:.3125rem .625rem;
-  color:#fff;
-  background-color:#000
+  position: absolute;
+  right: 1.25rem 0;
+  bottom: calc(-1.875rem + var(--bs-border-width));
+  padding: 0.3125rem 0.625rem;
+  color: #fff;
+  background-color: #000;
 }
 .tarteaucitronAllow {
-  min-width:.875rem;
-  min-height:.875rem
+  min-width: 0.875rem;
+  min-height: 0.875rem;
 }
 .tarteaucitronAllow::before {
-  display:block;
-  min-width:inherit;
-  min-height:inherit;
-  content:"";
-  background-color:currentcolor;
-  -webkit-mask:var(--bs-check-icon) no-repeat 50% / .875rem .875rem;
-  mask:var(--bs-check-icon) no-repeat 50% / .875rem .875rem
+  display: block;
+  min-width: inherit;
+  min-height: inherit;
+  content: "";
+  background-color: currentcolor;
+  -webkit-mask: var(--bs-check-icon) no-repeat 50% / 0.875rem 0.875rem;
+  mask: var(--bs-check-icon) no-repeat 50% / 0.875rem 0.875rem;
 }
 .tarteaucitronAllow::before {
-  margin-right:.3125rem
+  margin-right: 0.3125rem;
 }
 .tarteaucitronDeny {
-  min-width:.875rem;
-  min-height:.875rem
+  min-width: 0.875rem;
+  min-height: 0.875rem;
 }
 .tarteaucitronDeny::before {
-  display:block;
-  min-width:inherit;
-  min-height:inherit;
-  content:"";
-  background-color:currentcolor;
-  -webkit-mask:var(--bs-close-icon) no-repeat 50% / .875rem .875rem;
-  mask:var(--bs-close-icon) no-repeat 50% / .875rem .875rem
+  display: block;
+  min-width: inherit;
+  min-height: inherit;
+  content: "";
+  background-color: currentcolor;
+  -webkit-mask: var(--bs-close-icon) no-repeat 50% / 0.875rem 0.875rem;
+  mask: var(--bs-close-icon) no-repeat 50% / 0.875rem 0.875rem;
 }
 .tarteaucitronDeny::before {
-  margin-right:.3125rem
+  margin-right: 0.3125rem;
 }
 .catToggleBtn,
 .tarteaucitronHidden,
 .tarteaucitronInfoBox,
-.tarteaucitronListCookies+br {
-  display:none
+.tarteaucitronListCookies + br {
+  display: none;
 }
 .tac_visually-hidden {
-  width:1px !important;
-  height:1px !important;
-  padding:0 !important;
-  margin:-1px !important;
-  overflow:hidden !important;
-  clip:rect(0, 0, 0, 0) !important;
-  white-space:nowrap !important;
-  border:0 !important
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
 }
 .tac_visually-hidden:not(caption) {
-  position:absolute !important
+  position: absolute !important;
 }
diff --git a/docs/assets/tarteaucitron-config.js b/docs/assets/tarteaucitron-config.js
index 37f5586..f163b7f 100644
--- a/docs/assets/tarteaucitron-config.js
+++ b/docs/assets/tarteaucitron-config.js
@@ -3,74 +3,95 @@
  * See https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/site/assets/js/tac.js.
  */
 (function () {
-  'use strict'
-
-  window.addEventListener('tac.root_available', () => {
-    const tac = document.getElementById('tarteaucitron')
-
-    tac.querySelectorAll('.tarteaucitronAllow').forEach(button => {
-      button.classList.add('btn', 'btn-sm', 'btn-success', 'my-2', 'my-lg-0')
-      button.innerHTML = tarteaucitron.lang.allowAll
-    })
-
-    tac.querySelectorAll('.tarteaucitronDeny').forEach(button => {
-      button.classList.add('btn', 'btn-sm', 'btn-danger', 'my-2', 'my-lg-0', 'ms-lg-2')
-      button.innerHTML = tarteaucitron.lang.denyAll
-    })
-
-    document.getElementById('tarteaucitron').classList.add('p-3')
-
-    document.getElementById('tarteaucitronClosePanel').classList.add('d-flex', 'align-content-end', 'position-relative', 'btn-close')
-    document.getElementById('tarteaucitronClosePanel').innerHTML =
-      `<span class="visually-hidden">${document.getElementById('tarteaucitronClosePanel').innerHTML}</span>`
-  }, { once: true })
-
-  window.addEventListener('tac.open_alert', () => {
-    const alert = document.getElementById('tarteaucitronAlertBig')
-
-    alert.setAttribute('data-bs-theme', 'dark')
-
-    document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-secondary', 'ms-lg-2')
-    alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
-    alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll
-    alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'mx-sm-2', 'my-2', 'my-lg-0')
-    alert.querySelector('.tarteaucitronDeny').innerHTML = tarteaucitron.lang.denyAll
-  }, { once: true })
-
-  window.addEventListener('tac.open_panel', () => {
-    document.getElementById('tarteaucitronSaveButton').classList.add('btn', 'btn-secondary', 'd-flex', 'mt-3', 'mx-auto')
-
-    document.querySelectorAll('#tarteaucitronServices_api button').forEach(button => {
-      button.classList.add('btn', 'btn-sm', 'ms-2')
-    })
-    const allowConsentButton = document.querySelector('#tarteaucitronAllAllowed')
-    const denyConsentButton = document.querySelector('#tarteaucitronAllDenied')
-    const checkboxes = document.querySelectorAll('.form-check-input')
-
-    allowConsentButton.addEventListener('click', () => {
-      for (let i = 0; i < checkboxes.length; i++) {
-        if (!checkboxes.checked) {
-          checkboxes[i].checked = true
+  'use strict';
+
+  window.addEventListener(
+    'tac.root_available',
+    () => {
+      const tac = document.getElementById('tarteaucitron');
+
+      tac.querySelectorAll('.tarteaucitronAllow').forEach((button) => {
+        button.classList.add('btn', 'btn-sm', 'btn-success', 'my-2', 'my-lg-0');
+        button.innerHTML = tarteaucitron.lang.allowAll;
+      });
+
+      tac.querySelectorAll('.tarteaucitronDeny').forEach((button) => {
+        button.classList.add('btn', 'btn-sm', 'btn-danger', 'my-2', 'my-lg-0', 'ms-lg-2');
+        button.innerHTML = tarteaucitron.lang.denyAll;
+      });
+
+      document.getElementById('tarteaucitron').classList.add('p-3');
+
+      document.getElementById('tarteaucitronClosePanel').classList.add('d-flex', 'align-content-end', 'position-relative', 'btn-close');
+      document.getElementById('tarteaucitronClosePanel').innerHTML =
+        `<span class="visually-hidden">${document.getElementById('tarteaucitronClosePanel').innerHTML}</span>`;
+    },
+    { once: true }
+  );
+
+  window.addEventListener(
+    'tac.open_alert',
+    () => {
+      const alert = document.getElementById('tarteaucitronAlertBig');
+
+      alert.setAttribute('data-bs-theme', 'dark');
+
+      document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-secondary', 'ms-lg-2');
+      alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0');
+      alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll;
+      alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'mx-sm-2', 'my-2', 'my-lg-0');
+      alert.querySelector('.tarteaucitronDeny').innerHTML = tarteaucitron.lang.denyAll;
+    },
+    { once: true }
+  );
+
+  window.addEventListener(
+    'tac.open_panel',
+    () => {
+      document.getElementById('tarteaucitronSaveButton').classList.add('btn', 'btn-secondary', 'd-flex', 'mt-3', 'mx-auto');
+
+      document.querySelectorAll('#tarteaucitronServices_api button').forEach((button) => {
+        button.classList.add('btn', 'btn-sm', 'ms-2');
+      });
+      const allowConsentButton = document.querySelector('#tarteaucitronAllAllowed');
+      const denyConsentButton = document.querySelector('#tarteaucitronAllDenied');
+      const checkboxes = document.querySelectorAll('.form-check-input');
+
+      allowConsentButton.addEventListener('click', () => {
+        for (let i = 0; i < checkboxes.length; i++) {
+          if (!checkboxes.checked) {
+            checkboxes[i].checked = true;
+          }
         }
-      }
-    })
-    denyConsentButton.addEventListener('click', () => {
-      for (let i = 0; i < checkboxes.length; i++) {
-        if (checkboxes.checked !== true) {
-          checkboxes[i].checked = false
+      });
+      denyConsentButton.addEventListener('click', () => {
+        for (let i = 0; i < checkboxes.length; i++) {
+          if (checkboxes.checked !== true) {
+            checkboxes[i].checked = false;
+          }
         }
-      }
-    })
-  }, { once: true })
-
-  document.addEventListener('googletagmanager_added', () => {
-    const ask = document.querySelector('#googletagmanagerLine .tarteaucitronAsk')
-    const choiceEvent = 'tarteaucitron.userInterface.respond(document.getElementById(\'googletagmanagerAllowed\'),document.getElementById(\'googletagmanagerAllowed\').checked);'
-    const toggle = document.createRange().createContextualFragment(`<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`)
-    ask.innerHTML = ''
-    ask.append(toggle)
-  }, { once: true })
-})()
+      });
+    },
+    { once: true }
+  );
+
+  document.addEventListener(
+    'googletagmanager_added',
+    () => {
+      const ask = document.querySelector('#googletagmanagerLine .tarteaucitronAsk');
+      const choiceEvent =
+        "tarteaucitron.userInterface.respond(document.getElementById('googletagmanagerAllowed'),document.getElementById('googletagmanagerAllowed').checked);";
+      const toggle = document
+        .createRange()
+        .createContextualFragment(
+          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${(document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : ''}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
+        );
+      ask.innerHTML = '';
+      ask.append(toggle);
+    },
+    { once: true }
+  );
+})();
 
 if (typeof tarteaucitron !== 'undefined') {
   tarteaucitron.init({
@@ -85,17 +106,19 @@ if (typeof tarteaucitron !== 'undefined') {
     useExternalCss: true,
     mandatory: false,
     googleConsentMode: false,
-    partnersList: true
-  })
+    partnersList: true,
+  });
 
   tarteaucitron.user.googletagmanagerId = 'GTM-P6H78BQ';
-  (tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager')
-  dataLayer = [{
-    site_name: 'ODS-Charts',
-    phase: 'prod',
-    page_type: 'doc',
-    page_title: document.title
-  }]
+  (tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
+  dataLayer = [
+    {
+      site_name: 'ODS-Charts',
+      phase: 'prod',
+      page_type: 'doc',
+      page_title: document.title,
+    },
+  ];
 }
 
 tarteaucitron.services.googletagmanager = {
@@ -104,18 +127,41 @@ tarteaucitron.services.googletagmanager = {
   name: 'Google Tag Manager',
   uri: 'https://policies.google.com/privacy',
   needConsent: true,
-  cookies: ['_ga', '_gat', '__utma', '__utmb', '__utmc', '__utmt', '__utmz', '__gads', '_drt_', 'FLC', 'exchange_uid', 'id', 'fc', 'rrs', 'rds', 'rv', 'uid', 'UIDR', 'UID', 'clid', 'ipinfo', 'acs'],
+  cookies: [
+    '_ga',
+    '_gat',
+    '__utma',
+    '__utmb',
+    '__utmc',
+    '__utmt',
+    '__utmz',
+    '__gads',
+    '_drt_',
+    'FLC',
+    'exchange_uid',
+    'id',
+    'fc',
+    'rrs',
+    'rds',
+    'rv',
+    'uid',
+    'UIDR',
+    'UID',
+    'clid',
+    'ipinfo',
+    'acs',
+  ],
   js() {
-    'use strict'
+    'use strict';
     if (tarteaucitron.user.googletagmanagerId === undefined) {
-      return
+      return;
     }
 
-    window.dataLayer = window.dataLayer || []
+    window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
       'gtm.start': new Date().getTime(),
-      event: 'gtm.js'
-    })
-    tarteaucitron.addScript(`https://www.googletagmanager.com/gtm.js?id=${tarteaucitron.user.googletagmanagerId}`)
-  }
-}
+      'event': 'gtm.js',
+    });
+    tarteaucitron.addScript(`https://www.googletagmanager.com/gtm.js?id=${tarteaucitron.user.googletagmanagerId}`);
+  },
+};
diff --git a/docs/examples/bar-chart.html b/docs/examples/bar-chart.html
index 2bb3c98..8de29cd 100644
--- a/docs/examples/bar-chart.html
+++ b/docs/examples/bar-chart.html
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Bar Charts - Examples - ODS Charts</title>
-    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous"/>
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous"/>
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
 
     <!--------------------------------------------------
        Echarts 
@@ -27,20 +27,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -84,10 +75,7 @@ <h5 class="card-title">Horizontal bar chart</h5>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Vertical grouped bar chart</h5>
-          <p class="card-text">
-            A grouped bar chart is used to compare values across multiple
-            categories.
-          </p>
+          <p class="card-text">A grouped bar chart is used to compare values across multiple categories.</p>
           <div id="barChartGV"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
@@ -101,10 +89,7 @@ <h5 class="card-title">Vertical grouped bar chart</h5>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Horizontal grouped bar chart</h5>
-          <p class="card-text">
-            A grouped bar chart is used to compare values across multiple
-            categories.
-          </p>
+          <p class="card-text">A grouped bar chart is used to compare values across multiple categories.</p>
           <div id="barChartGH"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
@@ -118,10 +103,7 @@ <h5 class="card-title">Horizontal grouped bar chart</h5>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Grouped bar chart with dataset</h5>
-          <p class="card-text">
-            A grouped bar chart is used to compare values across multiple
-            categories.
-          </p>
+          <p class="card-text">A grouped bar chart is used to compare values across multiple categories.</p>
           <div id="barChartdataset"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
diff --git a/docs/examples/bar-line-chart.html b/docs/examples/bar-line-chart.html
index 0b4cf6d..f403f0d 100644
--- a/docs/examples/bar-line-chart.html
+++ b/docs/examples/bar-line-chart.html
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Bar + line Charts - Examples - ODS Charts</title>
-    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous"/>
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous"/>
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
 
     <!--------------------------------------------------
        Echarts 
@@ -27,20 +27,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -56,10 +47,7 @@ <h1 class="display-1">Bar + line charts example</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Bar chart and line chart</h5>
-          <p class="card-text">
-            Two metric values showing quantity alongside changes in trends over
-            time.
-          </p>
+          <p class="card-text">Two metric values showing quantity alongside changes in trends over time.</p>
           <div id="barLine"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
@@ -73,10 +61,7 @@ <h5 class="card-title">Bar chart and line chart</h5>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Grouped bar and line chart</h5>
-          <p class="card-text">
-            Two metric values showing quantity alongside changes in trends over
-            time.
-          </p>
+          <p class="card-text">Two metric values showing quantity alongside changes in trends over time.</p>
           <div id="barLineGroup"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
diff --git a/docs/examples/index.html b/docs/examples/index.html
index 6aa438a..ae0bfa7 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Examples - ODS Charts</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
 
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
     <script>
       if (document.location.href.endsWith('/examples')) {
         document.location.href = document.location.href + '/';
@@ -25,20 +25,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="../">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -54,136 +45,77 @@ <h1 class="display-1">Examples</h1>
       <div class="row">
         <div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
           <div class="card h-100">
-            <img
-              src="../images/ods-line-charts.png"
-              class="card-img-top"
-              alt="..."
-            />
+            <img src="../images/ods-line-charts.png" class="card-img-top" alt="..." />
             <div class="card-body">
               <h5 class="card-title">Orange Design System</h5>
               <h6 class="card-subtitle">Single line chart</h6>
-              <p class="card-text">
-                Used to display quantitative values over a continuous interval
-                or time period.
-              </p>
-              <a
-                href="https://system.design.orange.com/0c1af118d/p/88be1e-line-chart/t/49412d"
-                class="card-link"
-                >Orange Design System - Data display</a
-              >
+              <p class="card-text">Used to display quantitative values over a continuous interval or time period.</p>
+              <a href="https://system.design.orange.com/0c1af118d/p/88be1e-line-chart/t/49412d" class="card-link">Orange Design System - Data display</a>
             </div>
 
             <div class="card-footer">
-              <a href="./single-line-chart.html" class="btn btn-primary mt-3"
-                >Go to example</a
-              >
+              <a href="./single-line-chart.html" class="btn btn-primary mt-3">Go to example</a>
             </div>
           </div>
         </div>
 
         <div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
           <div class="card h-100">
-            <img
-              src="../images/ods-double-line-charts.png"
-              class="card-img-top"
-              alt="..."
-            />
+            <img src="../images/ods-double-line-charts.png" class="card-img-top" alt="..." />
             <div class="card-body">
               <h5 class="card-title">Orange Design System</h5>
               <h6 class="card-subtitle">Multiple line chart</h6>
-              <p class="card-text">
-                Compare the relationship between several values over time.
-              </p>
-              <a
-                href="https://system.design.orange.com/0c1af118d/p/88be1e-line-chart/t/74b580"
-                class="card-link"
-                >Orange Design System - Data display</a
-              >
+              <p class="card-text">Compare the relationship between several values over time.</p>
+              <a href="https://system.design.orange.com/0c1af118d/p/88be1e-line-chart/t/74b580" class="card-link">Orange Design System - Data display</a>
             </div>
 
             <div class="card-footer">
-              <a href="./multiple-line-chart.html" class="btn btn-primary mt-3"
-                >Go to example</a
-              >
+              <a href="./multiple-line-chart.html" class="btn btn-primary mt-3">Go to example</a>
             </div>
           </div>
         </div>
 
         <div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
           <div class="card h-100">
-            <img
-              src="../images/ods-bar-charts.png"
-              class="card-img-top"
-              alt="..."
-            />
+            <img src="../images/ods-bar-charts.png" class="card-img-top" alt="..." />
             <div class="card-body">
               <h5 class="card-title">Orange Design System</h5>
               <h6 class="card-subtitle">Bar chart</h6>
               <p class="card-text">Used to compare related data sets.</p>
-              <a
-                href="https://system.design.orange.com/0c1af118d/p/68a692-bar-chart/t/47ab68"
-                class="card-link"
-                >Orange Design System - Data display</a
-              >
+              <a href="https://system.design.orange.com/0c1af118d/p/68a692-bar-chart/t/47ab68" class="card-link">Orange Design System - Data display</a>
             </div>
             <div class="card-footer">
-              <a href="./bar-chart.html" class="btn btn-primary mt-3"
-                >Go to example</a
-              >
+              <a href="./bar-chart.html" class="btn btn-primary mt-3">Go to example</a>
             </div>
           </div>
         </div>
 
         <div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
           <div class="card h-100">
-            <img
-              src="../images/ods-stacked-bar-charts.png"
-              class="card-img-top"
-              alt="..."
-            />
+            <img src="../images/ods-stacked-bar-charts.png" class="card-img-top" alt="..." />
             <div class="card-body">
               <h5 class="card-title">Orange Design System</h5>
               <h6 class="card-subtitle">Stacked bar chart</h6>
-              <p class="card-text">
-                Compare proportional contributions within a category.
-              </p>
-              <a
-                href="https://system.design.orange.com/0c1af118d/p/68a692-bar-chart/t/241b98"
-                class="card-link"
-                >Orange Design System - Data display</a
-              >
+              <p class="card-text">Compare proportional contributions within a category.</p>
+              <a href="https://system.design.orange.com/0c1af118d/p/68a692-bar-chart/t/241b98" class="card-link">Orange Design System - Data display</a>
             </div>
             <div class="card-footer">
-              <a href="./stacked-bar-chart.html" class="btn btn-primary mt-3"
-                >Go to example</a
-              >
+              <a href="./stacked-bar-chart.html" class="btn btn-primary mt-3">Go to example</a>
             </div>
           </div>
         </div>
 
         <div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
           <div class="card h-100">
-            <img
-              src="../images/ods-mixed-charts.png"
-              class="card-img-top"
-              alt="..."
-            />
+            <img src="../images/ods-mixed-charts.png" class="card-img-top" alt="..." />
             <div class="card-body">
               <h5 class="card-title">Orange Design System</h5>
               <h6 class="card-subtitle">Bar + line chart</h6>
-              <p class="card-text">
-                Compare proportional contributions within a category.
-              </p>
-              <a
-                href="https://system.design.orange.com/0c1af118d/p/68a692-bar-chart/t/66991e"
-                class="card-link"
-                >Orange Design System - Data display</a
-              >
+              <p class="card-text">Compare proportional contributions within a category.</p>
+              <a href="https://system.design.orange.com/0c1af118d/p/68a692-bar-chart/t/66991e" class="card-link">Orange Design System - Data display</a>
             </div>
             <div class="card-footer">
-              <a href="./bar-line-chart.html" class="btn btn-primary mt-3"
-                >Go to example</a
-              >
+              <a href="./bar-line-chart.html" class="btn btn-primary mt-3">Go to example</a>
             </div>
           </div>
         </div>
diff --git a/docs/examples/index.js b/docs/examples/index.js
index 87d1a01..434af13 100644
--- a/docs/examples/index.js
+++ b/docs/examples/index.js
@@ -6,20 +6,14 @@ var themeElements = {
       'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css',
       'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css',
     ],
-    script: [
-      'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js',
-      'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/js/boosted.min.js',
-    ],
+    script: ['https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js', 'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/js/boosted.min.js'],
   },
   BOOSTED4: {
     css: [
       'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css',
       'https://cdn.jsdelivr.net/npm/boosted@4.6.2/dist/css/boosted.min.css',
     ],
-    script: [
-      'https://code.jquery.com/jquery-3.5.1.slim.min.js',
-      'https://cdn.jsdelivr.net/npm/boosted@4.6.2/dist/js/boosted.bundle.min.js',
-    ],
+    script: ['https://code.jquery.com/jquery-3.5.1.slim.min.js', 'https://cdn.jsdelivr.net/npm/boosted@4.6.2/dist/js/boosted.bundle.min.js'],
   },
   NONE: {
     css: [],
@@ -74,10 +68,7 @@ function generateConfigurator(id, cssThemeName) {
 </h2>`,
       },
       content: {
-        begin: (
-          id,
-          itemId
-        ) => `<div id="collapse_${itemId}" class="accordion-collapse collapse" 
+        begin: (id, itemId) => `<div id="collapse_${itemId}" class="accordion-collapse collapse" 
       aria-labelledby="${itemId}" data-bs-parent="#${id}">
       <div class="accordion-body" id="body_${itemId}">`,
         end: (id, itemId) => ` </div>
@@ -94,10 +85,7 @@ function generateConfigurator(id, cssThemeName) {
         end: (id, itemId) => `</div>`,
       },
       header: {
-        begin: (
-          id,
-          itemId
-        ) => `<div class="card-header" role="tab" id="${itemId}">
+        begin: (id, itemId) => `<div class="card-header" role="tab" id="${itemId}">
       <h5 class="mb-0">
         <a class="collapsed" data-toggle="collapse" href="#collapse_${itemId}" role="button" 
         aria-expanded="false" aria-controls="collapse_${itemId}">
@@ -107,10 +95,7 @@ function generateConfigurator(id, cssThemeName) {
       </div>`,
       },
       content: {
-        begin: (
-          id,
-          itemId
-        ) => `<div id="collapse_${itemId}" class="collapse" role="tabpanel" data-parent="#${id}" aria-labelledby="${itemId}">
+        begin: (id, itemId) => `<div id="collapse_${itemId}" class="collapse" role="tabpanel" data-parent="#${id}" aria-labelledby="${itemId}">
       <div class="card-body" id="body_${itemId}">`,
         end: (id, itemId) => `</div>
         </div>`,
@@ -124,31 +109,18 @@ function generateConfigurator(id, cssThemeName) {
         end: (id, itemId) => `</h5></div>`,
       },
       content: {
-        begin: (id, itemId) =>
-          `<div id="collapse_${itemId}"> <div id="body_${itemId}">`,
+        begin: (id, itemId) => `<div id="collapse_${itemId}"> <div id="body_${itemId}">`,
         end: (id, itemId) => `</div></div>`,
       },
     },
   };
   return `
   ${accordionThemes[cssThemeName].accordion.begin('accordion_' + id)}
-    ${accordionThemes[cssThemeName].item.begin(
-      'accordion_' + id,
-      'content_1_' + id
-    )}
-      ${accordionThemes[cssThemeName].header.begin(
-        'accordion_' + id,
-        'content_1_' + id
-      )}
+    ${accordionThemes[cssThemeName].item.begin('accordion_' + id, 'content_1_' + id)}
+      ${accordionThemes[cssThemeName].header.begin('accordion_' + id, 'content_1_' + id)}
         Theme configuration
-      ${accordionThemes[cssThemeName].header.end(
-        'accordion_' + id,
-        'content_1_' + id
-      )}
-      ${accordionThemes[cssThemeName].content.begin(
-        'accordion_' + id,
-        'content_1_' + id
-      )}
+      ${accordionThemes[cssThemeName].header.end('accordion_' + id, 'content_1_' + id)}
+      ${accordionThemes[cssThemeName].content.begin('accordion_' + id, 'content_1_' + id)}
         <div class="one-chart-configurator" data-chart-id="${id}">                
           <form class="row g-3">
             <div class="col-md-4">
@@ -161,25 +133,12 @@ function generateConfigurator(id, cssThemeName) {
             <div class="col-md-4">
               <label for="colorSetInput" class="form-label">Categorical Color</label>
               <select class="form-select custom-select" aria-label="Color set" id="colorSetInput" onchange="changeTheme('${id}')">
-                <option value="${
-                  ODSCharts.ODSChartsCategoricalColorsSet
-                    .DEFAULT_SUPPORTING_COLORS
-                }" >Default supporting colours</option>
-                <option value="${
-                  ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS
-                }" >Lighter tints</option>
-                <option value="${
-                  ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS
-                }">Darker tints</option>
-                <option value="${
-                  ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_BLUE
-                }">Blue</option>
-                <option value="${
-                  ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN
-                }">Green</option>
-                <option value="${
-                  ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE
-                }">Purple</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS}" >Default supporting colours</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS}" >Lighter tints</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS}">Darker tints</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_BLUE}">Blue</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN}">Green</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE}">Purple</option>
               </select>
             </div>
 
@@ -258,31 +217,13 @@ function generateConfigurator(id, cssThemeName) {
             </div>
           </form>
         </div>
-      ${accordionThemes[cssThemeName].content.end(
-        'accordion_' + id,
-        'content_1_' + id
-      )}
-    ${accordionThemes[cssThemeName].item.end(
-      'accordion_' + id,
-      'content_1_' + id
-    )}
-    ${accordionThemes[cssThemeName].item.begin(
-      'accordion_' + id,
-      'content_2_' + id
-    )}
-      ${accordionThemes[cssThemeName].header.begin(
-        'accordion_' + id,
-        'content_2_' + id
-      )}
+      ${accordionThemes[cssThemeName].content.end('accordion_' + id, 'content_1_' + id)}
+    ${accordionThemes[cssThemeName].item.end('accordion_' + id, 'content_1_' + id)}
+    ${accordionThemes[cssThemeName].item.begin('accordion_' + id, 'content_2_' + id)}
+      ${accordionThemes[cssThemeName].header.begin('accordion_' + id, 'content_2_' + id)}
         View code
-      ${accordionThemes[cssThemeName].header.end(
-        'accordion_' + id,
-        'content_2_' + id
-      )}
-      ${accordionThemes[cssThemeName].content.begin(
-        'accordion_' + id,
-        'content_2_' + id
-      )}
+      ${accordionThemes[cssThemeName].header.end('accordion_' + id, 'content_2_' + id)}
+      ${accordionThemes[cssThemeName].content.begin('accordion_' + id, 'content_2_' + id)}
         <div class="border border-light position-relative mt-2 p-2">
           <div class="display-5"> HTML
           </div>
@@ -299,14 +240,8 @@ function generateConfigurator(id, cssThemeName) {
             </pre>
           </code>
         </div>
-      ${accordionThemes[cssThemeName].content.end(
-        'accordion_' + id,
-        'content_2_' + id
-      )}
-    ${accordionThemes[cssThemeName].item.end(
-      'accordion_' + id,
-      'content_2_' + id
-    )}
+      ${accordionThemes[cssThemeName].content.end('accordion_' + id, 'content_2_' + id)}
+    ${accordionThemes[cssThemeName].item.end('accordion_' + id, 'content_2_' + id)}
   ${accordionThemes[cssThemeName].accordion.end('accordion_' + id)}
 `;
 }
@@ -356,21 +291,13 @@ async function displayChart(
     lineStyle,
     cssTheme,
   });
-  cssThemeName = Object.keys(ODSCharts.ODSChartsCSSThemes).find((name) =>
-    _.isEqual(ODSCharts.ODSChartsCSSThemes[name], themeManager.options.cssTheme)
-  );
+  cssThemeName = Object.keys(ODSCharts.ODSChartsCSSThemes).find((name) => _.isEqual(ODSCharts.ODSChartsCSSThemes[name], themeManager.options.cssTheme));
   if (!popoverTemplateInput) {
-    popoverTemplateInput =
-      ODSCharts.ODSChartsCSSThemesNames.NONE === cssThemeName
-        ? 'internal'
-        : 'external';
+    popoverTemplateInput = ODSCharts.ODSChartsCSSThemesNames.NONE === cssThemeName ? 'internal' : 'external';
   }
 
   const actualTheme = document.querySelector('[data-css-theme]');
-  if (
-    (!actualTheme && 'NONE' !== cssThemeName) ||
-    (actualTheme && cssThemeName !== actualTheme.getAttribute('data-css-theme'))
-  ) {
+  if ((!actualTheme && 'NONE' !== cssThemeName) || (actualTheme && cssThemeName !== actualTheme.getAttribute('data-css-theme'))) {
     for (const elt of document.querySelectorAll('[data-css-theme]')) {
       elt.remove();
     }
@@ -407,22 +334,13 @@ async function displayChart(
 
   var legends = false;
 
-  if (
-    !(options.dataset && options.dataset.source) &&
-    !(options.legend && options.legend.data) &&
-    options.series.length > 1
-  ) {
+  if (!(options.dataset && options.dataset.source) && !(options.legend && options.legend.data) && options.series.length > 1) {
     options.legend = {
-      data:
-        options.series.length > 1
-          ? options.series.map((serie, i) => 'label ' + i)
-          : undefined,
+      data: options.series.length > 1 ? options.series.map((serie, i) => 'label ' + i) : undefined,
     };
   }
 
-  legends =
-    (options.legend && options.legend.data && !options.legend.show) ||
-    (options.dataset && options.dataset.source);
+  legends = (options.legend && options.legend.data && !options.legend.show) || (options.dataset && options.dataset.source);
 
   var dataOptions = _.cloneDeep(options);
 
@@ -432,20 +350,12 @@ async function displayChart(
   if (!refresh) {
     generateExampleDiv(id, cssThemeName);
   } else {
-    newCSSTheme =
-      document
-        .getElementById('configurator_' + id)
-        .getAttribute('data-css-theme-name') !== cssThemeName;
+    newCSSTheme = document.getElementById('configurator_' + id).getAttribute('data-css-theme-name') !== cssThemeName;
     if (newCSSTheme) {
-      customColorOption = document.querySelector(
-        `#configurator_${id} [data-custom-categorical-color]`
-      );
+      customColorOption = document.querySelector(`#configurator_${id} [data-custom-categorical-color]`);
 
-      document
-        .getElementById('configurator_' + id)
-        .setAttribute('data-css-theme-name', cssThemeName);
-      document.getElementById('configurator_' + id).innerHTML =
-        generateConfigurator(id, cssThemeName);
+      document.getElementById('configurator_' + id).setAttribute('data-css-theme-name', cssThemeName);
+      document.getElementById('configurator_' + id).innerHTML = generateConfigurator(id, cssThemeName);
     }
   }
 
@@ -459,9 +369,7 @@ async function displayChart(
   }
 
   document.getElementById(id + '_html').innerText = generateChartDiv(id);
-  document.getElementById(
-    id + '_code'
-  ).innerText = `///////////////////////////////////////////////////
+  document.getElementById(id + '_code').innerText = `///////////////////////////////////////////////////
 // Used data
 ///////////////////////////////////////////////////
 
@@ -473,19 +381,12 @@ var dataOptions = ${JSON.stringify(options, undefined, 2)};
 ///////////////////////////////////////////////////
 // Build the theme
 var themeManager = ODSCharts.getThemeManager({
-  mode: ${
-    'ODSCharts.ODSChartsMode.' +
-    Object.keys(ODSCharts.ODSChartsMode).find(
-      (key) => ODSCharts.ODSChartsMode[key] === themeManager.options.mode
-    )
-  },
+  mode: ${'ODSCharts.ODSChartsMode.' + Object.keys(ODSCharts.ODSChartsMode).find((key) => ODSCharts.ODSChartsMode[key] === themeManager.options.mode)},
   categoricalColors: ${
     'string' === typeof themeManager.options.categoricalColors
       ? 'ODSCharts.ODSChartsCategoricalColorsSet.' +
         Object.keys(ODSCharts.ODSChartsCategoricalColorsSet).find(
-          (key) =>
-            ODSCharts.ODSChartsCategoricalColorsSet[key] ===
-            themeManager.options.categoricalColors
+          (key) => ODSCharts.ODSChartsCategoricalColorsSet[key] === themeManager.options.categoricalColors
         )
       : `[
       ${themeManager.options.categoricalColors.map((color) =>
@@ -493,11 +394,7 @@ var themeManager = ODSCharts.getThemeManager({
           ? JSON.stringify(color)
           : `{"colorPalette": ${
               'ODSCharts.ODSChartsCategoricalColorsSet.' +
-              Object.keys(ODSCharts.ODSChartsCategoricalColorsSet).find(
-                (key) =>
-                  ODSCharts.ODSChartsCategoricalColorsSet[key] ===
-                  color.colorPalette
-              )
+              Object.keys(ODSCharts.ODSChartsCategoricalColorsSet).find((key) => ODSCharts.ODSChartsCategoricalColorsSet[key] === color.colorPalette)
             }, "colorIndex": ${color.colorIndex}}`
       ).join(`,
       `)}
@@ -505,22 +402,13 @@ var themeManager = ODSCharts.getThemeManager({
   },
   visualMapColor:  ${
     'ODSCharts.ODSChartsSequentialColorsSet.' +
-    Object.keys(ODSCharts.ODSChartsSequentialColorsSet).find(
-      (key) =>
-        ODSCharts.ODSChartsSequentialColorsSet[key] ===
-        themeManager.options.visualMapColor
-    )
+    Object.keys(ODSCharts.ODSChartsSequentialColorsSet).find((key) => ODSCharts.ODSChartsSequentialColorsSet[key] === themeManager.options.visualMapColor)
   },
   lineStyle: ${
     'ODSCharts.ODSChartsLineStyle.' +
-    Object.keys(ODSCharts.ODSChartsLineStyle).find(
-      (key) =>
-        ODSCharts.ODSChartsLineStyle[key] === themeManager.options.lineStyle
-    )
+    Object.keys(ODSCharts.ODSChartsLineStyle).find((key) => ODSCharts.ODSChartsLineStyle[key] === themeManager.options.lineStyle)
   },
-  cssTheme: ODSCharts.ODSChartsCSSThemes.${Object.keys(
-    ODSCharts.ODSChartsCSSThemes
-  ).find((key) => key === cssThemeName)}
+  cssTheme: ODSCharts.ODSChartsCSSThemes.${Object.keys(ODSCharts.ODSChartsCSSThemes).find((key) => key === cssThemeName)}
 });
 
 // register this theme to echarts
@@ -551,9 +439,7 @@ themeManager.externalizePopover({
     tooltip: ${'tooltip' === popoverInput ? 'true' : 'false'},
     axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.${popoverAxisInput},
   }, 
-  ODSCharts.ODSChartsPopoverManagers.${
-    'external' === popoverTemplateInput ? cssThemeName : 'NONE'
-  }
+  ODSCharts.ODSChartsPopoverManagers.${'external' === popoverTemplateInput ? cssThemeName : 'NONE'}
 );`
       : ''
   }
@@ -568,17 +454,11 @@ myChart.setOption(themeManager.getChartOptions());
 
   if (newCSSTheme || !refresh) {
     if ('string' === typeof themeManager.options.categoricalColors) {
-      document
-        .querySelector(
-          `#accordion_${id} #colorSetInput option[value="${themeManager.options.categoricalColors}"]`
-        )
-        .setAttribute('selected', 'selected');
+      document.querySelector(`#accordion_${id} #colorSetInput option[value="${themeManager.options.categoricalColors}"]`).setAttribute('selected', 'selected');
     } else {
       if (!customColorOption) {
         customColorOption = document.createElement('option');
-        customColorOption.value = JSON.stringify(
-          themeManager.options.categoricalColors
-        );
+        customColorOption.value = JSON.stringify(themeManager.options.categoricalColors);
         customColorOption.selected = true;
         customColorOption.setAttribute('selected', 'selected');
         customColorOption.setAttribute('data-custom-categorical-color', true);
@@ -586,9 +466,7 @@ myChart.setOption(themeManager.getChartOptions());
       }
     }
     if (customColorOption) {
-      document
-        .querySelector(`#accordion_${id} #colorSetInput`)
-        .append(customColorOption);
+      document.querySelector(`#accordion_${id} #colorSetInput`).append(customColorOption);
       let custumColorDiv = document.createElement('div');
       custumColorDiv.id = 'view_custom_color_' + id;
       custumColorDiv.innerHTML = `
@@ -601,11 +479,7 @@ myChart.setOption(themeManager.getChartOptions());
             ? JSON.stringify(color)
             : `{"colorPalette": ${
                 'ODSCharts.ODSChartsCategoricalColorsSet.' +
-                Object.keys(ODSCharts.ODSChartsCategoricalColorsSet).find(
-                  (key) =>
-                    ODSCharts.ODSChartsCategoricalColorsSet[key] ===
-                    color.colorPalette
-                )
+                Object.keys(ODSCharts.ODSChartsCategoricalColorsSet).find((key) => ODSCharts.ODSChartsCategoricalColorsSet[key] === color.colorPalette)
               }, "colorIndex": ${color.colorIndex}}`
         ).join(`,
         `)}
@@ -616,63 +490,23 @@ myChart.setOption(themeManager.getChartOptions());
       document.querySelector(`#body_content_1_${id}`).append(custumColorDiv);
     }
 
-    document
-      .querySelector(
-        `#accordion_${id} #darkModeInput option[value="${themeManager.options.mode}"]`
-      )
-      .setAttribute('selected', 'selected');
-    document
-      .querySelector(
-        `#accordion_${id} #visualMapColorInput option[value="${themeManager.options.visualMapColor}"]`
-      )
-      .setAttribute('selected', 'selected');
-    document
-      .querySelector(
-        `#accordion_${id} #lineStyleInput option[value="${themeManager.options.lineStyle}"]`
-      )
-      .setAttribute('selected', 'selected');
-    document
-      .querySelector(
-        `#accordion_${id} #popoverInput option[value="${popoverInput}"]`
-      )
-      .setAttribute('selected', 'selected');
-    document
-      .querySelector(
-        `#accordion_${id} #popoverSharedInput option[value="${popoverSharedInput}"]`
-      )
-      .setAttribute('selected', 'selected');
-    document
-      .querySelector(
-        `#accordion_${id} #popoverAxisInput option[value="${popoverAxisInput}"]`
-      )
-      .setAttribute('selected', 'selected');
-    document
-      .querySelector(
-        `#accordion_${id} #popoverTemplateInput option[value="${popoverTemplateInput}"]`
-      )
-      .setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #darkModeInput option[value="${themeManager.options.mode}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #visualMapColorInput option[value="${themeManager.options.visualMapColor}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #lineStyleInput option[value="${themeManager.options.lineStyle}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #popoverInput option[value="${popoverInput}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #popoverSharedInput option[value="${popoverSharedInput}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #popoverAxisInput option[value="${popoverAxisInput}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #popoverTemplateInput option[value="${popoverTemplateInput}"]`).setAttribute('selected', 'selected');
 
-    document
-      .querySelector(
-        `#accordion_${id} #cssTheme option[value="${cssThemeName}"]`
-      )
-      .setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${id} #cssTheme option[value="${cssThemeName}"]`).setAttribute('selected', 'selected');
   }
 
-  document
-    .querySelectorAll(`#accordion_${id} .popover-renderer`)
-    .forEach((elt) => {
-      elt.style.display =
-        ODSCharts.ODSChartsCSSThemesNames.NONE === cssThemeName ||
-        'none' === popoverInput
-          ? 'none'
-          : 'block';
-    });
-  document
-    .querySelectorAll(`#accordion_${id} .popover-config`)
-    .forEach((elt) => {
-      elt.style.display = 'none' === popoverInput ? 'none' : 'block';
-    });
+  document.querySelectorAll(`#accordion_${id} .popover-renderer`).forEach((elt) => {
+    elt.style.display = ODSCharts.ODSChartsCSSThemesNames.NONE === cssThemeName || 'none' === popoverInput ? 'none' : 'block';
+  });
+  document.querySelectorAll(`#accordion_${id} .popover-config`).forEach((elt) => {
+    elt.style.display = 'none' === popoverInput ? 'none' : 'block';
+  });
 
   var myChart = echarts.init(div, themeManager.name, {
     renderer: 'svg',
@@ -691,11 +525,7 @@ myChart.setOption(themeManager.getChartOptions());
         tooltip: 'tooltip' === popoverInput,
         axisPointer: popoverAxisInput,
       },
-      ODSCharts.ODSChartsPopoverManagers[
-        'external' === popoverTemplateInput
-          ? cssThemeName
-          : ODSCharts.ODSChartsCSSThemesNames.NONE
-      ]
+      ODSCharts.ODSChartsPopoverManagers['external' === popoverTemplateInput ? cssThemeName : ODSCharts.ODSChartsCSSThemesNames.NONE]
     );
   }
 
@@ -709,14 +539,8 @@ async function changeCssTheme(newCss) {
   document.querySelectorAll('.one-chart-configurator').forEach((elt) => {
     const chartId = elt.getAttribute('data-chart-id');
     chartIds.push(chartId);
-    document
-      .querySelector(
-        `#accordion_${chartId} #cssTheme option[value="${newCss}"]`
-      )
-      .setAttribute('selected', 'selected');
-    document.querySelector(
-      `#accordion_${chartId} #cssTheme option[value="${newCss}"]`
-    ).value = newCss;
+    document.querySelector(`#accordion_${chartId} #cssTheme option[value="${newCss}"]`).setAttribute('selected', 'selected');
+    document.querySelector(`#accordion_${chartId} #cssTheme option[value="${newCss}"]`).value = newCss;
   });
   for (const chartId of chartIds) {
     await changeTheme(chartId);
@@ -729,11 +553,8 @@ async function changeTheme(id) {
     id,
     option,
     document.querySelector(`#accordion_${id} #darkModeInput`).value,
-    6 ===
-      document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex
-      ? JSON.parse(
-          document.querySelector(`#accordion_${id} #colorSetInput`).value
-        )
+    6 === document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex
+      ? JSON.parse(document.querySelector(`#accordion_${id} #colorSetInput`).value)
       : document.querySelector(`#accordion_${id} #colorSetInput`).value,
     document.querySelector(`#accordion_${id} #visualMapColorInput`).value,
     document.querySelector(`#accordion_${id} #lineStyleInput`).value,
@@ -746,17 +567,10 @@ async function changeTheme(id) {
     true
   );
   if (document.querySelector('#view_custom_color_' + id)) {
-    if (
-      6 ===
-      document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex
-    ) {
-      document
-        .querySelector('#view_custom_color_' + id)
-        .classList.remove('d-none');
+    if (6 === document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex) {
+      document.querySelector('#view_custom_color_' + id).classList.remove('d-none');
     } else {
-      document
-        .querySelector('#view_custom_color_' + id)
-        .classList.add('d-none');
+      document.querySelector('#view_custom_color_' + id).classList.add('d-none');
     }
   }
 }
@@ -764,9 +578,7 @@ window.changeTheme = changeTheme;
 window.changeCssTheme = changeCssTheme;
 
 function downloadTheme(id) {
-  var { themeManager } = JSON.parse(
-    document.getElementById(id).dataset.odsExample
-  );
+  var { themeManager } = JSON.parse(document.getElementById(id).dataset.odsExample);
 
   const filename = `${themeManager.name}.json`;
 
@@ -801,12 +613,7 @@ window.generateSingleLineChart = async (id) => {
       },
     ],
   };
-  displayChart(
-    id,
-    option,
-    undefined,
-    ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE
-  );
+  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE);
 };
 
 window.generateMultipleLineChart = async (id) => {
@@ -823,14 +630,7 @@ window.generateMultipleLineChart = async (id) => {
       { data: [12, 28.8956454657, 23, 15, 15, 18], type: 'line' },
     ],
   };
-  displayChart(
-    id,
-    option,
-    undefined,
-    ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
-    undefined,
-    ODSCharts.ODSChartsLineStyle.BROKEN
-  );
+  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
 };
 
 window.generateTimeSeriesLineChart = async (id) => {
@@ -854,15 +654,9 @@ window.generateTimeSeriesLineChart = async (id) => {
     for (var i = 1; i < NB_POINTS; i++) {
       data.push({
         time: dataDates[i],
-        value:
-          Math.random() < 0.3
-            ? undefined
-            : Math.round((Math.random() - 0.5) * 20 + lastValue),
+        value: Math.random() < 0.3 ? undefined : Math.round((Math.random() - 0.5) * 20 + lastValue),
       });
-      lastValue =
-        undefined !== data[data.length - 1].value
-          ? data[data.length - 1].value
-          : lastValue;
+      lastValue = undefined !== data[data.length - 1].value ? data[data.length - 1].value : lastValue;
     }
     return data;
   };
@@ -898,22 +692,10 @@ window.generateTimeSeriesLineChart = async (id) => {
       },
     ],
   };
-  displayChart(
-    id,
-    option,
-    undefined,
-    ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
-    undefined,
-    ODSCharts.ODSChartsLineStyle.BROKEN
-  );
+  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
 };
 
-window.generateBarChart = async (
-  id,
-  horizontal = false,
-  grouped = false,
-  stacked = false
-) => {
+window.generateBarChart = async (id, horizontal = false, grouped = false, stacked = false) => {
   // Specify the configuration items and data for the chart
   var option = {
     [horizontal ? 'yAxis' : 'xAxis']: {
@@ -962,8 +744,7 @@ window.generateBarChart = async (
             colorIndex: 0,
           },
           {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
             colorIndex: 0,
           },
           {
@@ -972,32 +753,29 @@ window.generateBarChart = async (
           },
         ]
       : grouped
-      ? [
-          {
-            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS,
-            colorIndex: 0,
-          },
-          {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
-            colorIndex: 0,
-          },
-        ]
-      : horizontal
-      ? [
-          {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
-            colorIndex: 1,
-          },
-        ]
-      : [
-          {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
-            colorIndex: 3,
-          },
-        ]
+        ? [
+            {
+              colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS,
+              colorIndex: 0,
+            },
+            {
+              colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+              colorIndex: 0,
+            },
+          ]
+        : horizontal
+          ? [
+              {
+                colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+                colorIndex: 1,
+              },
+            ]
+          : [
+              {
+                colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+                colorIndex: 3,
+              },
+            ]
   );
 };
 
@@ -1025,20 +803,10 @@ window.generateDatasetBarChart = async (id) => {
     // every series will auto-map to each column by default.
     series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
   };
-  displayChart(
-    id,
-    option,
-    undefined,
-    ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS
-  );
+  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS);
 };
 
-window.generateBarLineChart = async (
-  id,
-  horizontal = false,
-  grouped = false,
-  stacked = true
-) => {
+window.generateBarLineChart = async (id, horizontal = false, grouped = false, stacked = true) => {
   // Specify the configuration items and data for the chart
   var option = {
     [horizontal ? 'yAxis' : 'xAxis']: {
@@ -1074,8 +842,7 @@ window.generateBarLineChart = async (
     grouped
       ? [
           {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
             colorIndex: 1,
           },
           {
@@ -1083,20 +850,17 @@ window.generateBarLineChart = async (
             colorIndex: 1,
           },
           {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE,
             colorIndex: 0,
           },
         ]
       : [
           {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
             colorIndex: 2,
           },
           {
-            colorPalette:
-              ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN,
             colorIndex: 0,
           },
         ],
diff --git a/docs/examples/multiple-line-chart.html b/docs/examples/multiple-line-chart.html
index 7f6b3cc..b29936e 100644
--- a/docs/examples/multiple-line-chart.html
+++ b/docs/examples/multiple-line-chart.html
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Multiple Line Charts - Examples - ODS Charts</title>
-    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous"/>
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous"/>
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
 
     <!--------------------------------------------------
        Echarts 
@@ -27,20 +27,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -56,9 +47,7 @@ <h1 class="display-1">Multiple line charts example</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Multiple line chart example</h5>
-          <p class="card-text">
-            Compare the relationship between several values over categories.
-          </p>
+          <p class="card-text">Compare the relationship between several values over categories.</p>
           <div id="multipleLineChart"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
@@ -72,9 +61,7 @@ <h5 class="card-title">Multiple line chart example</h5>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Time series line chart example</h5>
-          <p class="card-text">
-            Compare the relationship between several values over time.
-          </p>
+          <p class="card-text">Compare the relationship between several values over time.</p>
           <div id="timeSeriesChart"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
diff --git a/docs/examples/single-line-chart.html b/docs/examples/single-line-chart.html
index 32ea9f8..1ad49ea 100644
--- a/docs/examples/single-line-chart.html
+++ b/docs/examples/single-line-chart.html
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Single Line Charts - Examples - ODS Charts</title>
-    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous"/>
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous"/>
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
 
     <!--------------------------------------------------
        Echarts 
@@ -27,20 +27,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -56,10 +47,7 @@ <h1 class="display-1">Single line charts example</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Single line chart example</h5>
-          <p class="card-text">
-            A single line chart is used to show the change of values over a
-            continuous time interval or time span.
-          </p>
+          <p class="card-text">A single line chart is used to show the change of values over a continuous time interval or time span.</p>
           <div id="singleLineChart"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
diff --git a/docs/examples/stacked-bar-chart.html b/docs/examples/stacked-bar-chart.html
index 3bdf33f..f8c707c 100644
--- a/docs/examples/stacked-bar-chart.html
+++ b/docs/examples/stacked-bar-chart.html
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Stacked bar Charts - Examples - ODS Charts</title>
-    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous"/>
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous"/>
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
 
     <!--------------------------------------------------
        Echarts 
@@ -27,20 +27,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -56,9 +47,7 @@ <h1 class="display-1">Stacked bar charts example</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Vertical stacked bar chart</h5>
-          <p class="card-text">
-            Compare proportional contributions within a category.
-          </p>
+          <p class="card-text">Compare proportional contributions within a category.</p>
           <div id="barChartSV"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
@@ -72,9 +61,7 @@ <h5 class="card-title">Vertical stacked bar chart</h5>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Horizontal stacked bar chart</h5>
-          <p class="card-text">
-            Compare proportional contributions within a category.
-          </p>
+          <p class="card-text">Compare proportional contributions within a category.</p>
           <div id="barChartSH"></div>
           <script>
             window.addEventListener('DOMContentLoaded', () => {
diff --git a/docs/examples/tool.js b/docs/examples/tool.js
index 5084566..9a301b5 100644
--- a/docs/examples/tool.js
+++ b/docs/examples/tool.js
@@ -8,12 +8,7 @@
  *  timestamp: Date,
  * }[]
  */
-export function generatedata(
-  from = new Date('1971-01-26T10:15:30.996+0200'),
-  to = new Date(),
-  nbpoints = 1000,
-  index = 0
-) {
+export function generatedata(from = new Date('1971-01-26T10:15:30.996+0200'), to = new Date(), nbpoints = 1000, index = 0) {
   const result = [];
 
   let step = Math.max(10, (to.getTime() - from.getTime()) / (nbpoints + 1));
@@ -24,10 +19,7 @@ export function generatedata(
 
   while (date.getTime() < to.getTime()) {
     const value =
-      date.getTime() /
-        new Date(
-          '' + (1971 + index * 5) + '-01-26T10:15:30.996+0200'
-        ).getTime() +
+      date.getTime() / new Date('' + (1971 + index * 5) + '-01-26T10:15:30.996+0200').getTime() +
       index +
       Math.cos(date.getTime() * random) +
       Math.sin(date.getTime() * 3 * random) +
@@ -43,13 +35,6 @@ export function generatedata(
   return result;
 }
 
-export function getTimeSeriesData(
-  nbPoint = 10000,
-  nbSeries = 3,
-  start = new Date('1971-01-26T10:15:30.996+0200'),
-  end = new Date()
-) {
-  return Array.from({ length: nbSeries }, (val, index) =>
-    generatedata(start, end, nbPoint, index)
-  );
+export function getTimeSeriesData(nbPoint = 10000, nbSeries = 3, start = new Date('1971-01-26T10:15:30.996+0200'), end = new Date()) {
+  return Array.from({ length: nbSeries }, (val, index) => generatedata(start, end, nbPoint, index));
 }
diff --git a/docs/index.html b/docs/index.html
index f41ddec..464c376 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>ODS Charts</title>
-    
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
-    <link href="assets/tarteaucitron-config.css" rel="stylesheet"/>
 
-    <link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="images/favicons/manifest.json">
-    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
+    <link href="assets/tarteaucitron-config.css" rel="stylesheet" />
+
+    <link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="images/favicons/manifest.json" />
+    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
 
     <script>
       if (document.location.href.endsWith('/docs')) {
@@ -26,20 +26,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="/">
-              <img
-                src="images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -54,21 +45,10 @@ <h1 class="title">Orange Design System Charts</h1>
             <div class="card-body">
               <h5 class="card-title">Orange Design System</h5>
               <h6 class="card-subtitle">Data display</h6>
-              <p class="card-text">
-                This project implements the Orange Design System data display
-                using Apache ECharts theme.
-              </p>
-              <a
-                href="https://system.design.orange.com/0c1af118d/p/37a8d3-data-display/b/5127c6"
-                class="card-link"
-                >Orange Design System - Data display</a
-              >
+              <p class="card-text">This project implements the Orange Design System data display using Apache ECharts theme.</p>
+              <a href="https://system.design.orange.com/0c1af118d/p/37a8d3-data-display/b/5127c6" class="card-link">Orange Design System - Data display</a>
               <br />
-              <a
-                href="https://echarts.apache.org/en/theme-builder.html"
-                class="card-link"
-                >Apache ECharts theme builder</a
-              >
+              <a href="https://echarts.apache.org/en/theme-builder.html" class="card-link">Apache ECharts theme builder</a>
             </div>
 
             <div class="card-footer">
@@ -81,14 +61,8 @@ <h6 class="card-subtitle">Data display</h6>
             <div class="card-body">
               <h5 class="card-title">ODS Charts</h5>
               <h6 class="card-subtitle">Example</h6>
-              <p class="card-text">
-                Examples of use of Apache ECharts with ODS data display theme.
-              </p>
-              <a
-                href="https://system.design.orange.com/0c1af118d/p/37a8d3-data-display/b/5127c6"
-                class="card-link"
-                >Orange Design System - Data display</a
-              >
+              <p class="card-text">Examples of use of Apache ECharts with ODS data display theme.</p>
+              <a href="https://system.design.orange.com/0c1af118d/p/37a8d3-data-display/b/5127c6" class="card-link">Orange Design System - Data display</a>
             </div>
 
             <div class="card-footer">
@@ -101,9 +75,7 @@ <h6 class="card-subtitle">Example</h6>
             <div class="card-body">
               <h5 class="card-title">Specific use cases</h5>
               <h6 class="card-subtitle">Example</h6>
-              <p class="card-text">
-                Examples of specific features illustrated using Apache ECharts and ODS Charts.
-              </p>
+              <p class="card-text">Examples of specific features illustrated using Apache ECharts and ODS Charts.</p>
             </div>
 
             <div class="card-footer">
diff --git a/docs/use_cases/add-unit.html b/docs/use_cases/add-unit.html
index 25094b7..ec1dd33 100644
--- a/docs/use_cases/add-unit.html
+++ b/docs/use_cases/add-unit.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Examples - Specific use cases - Add unit</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
 
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
     <script type="text/javascript" src="../../dist/ods-charts.js"></script>
     <script type="text/javascript" src="./index.js"></script>
@@ -27,7 +27,7 @@
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy"/>
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -43,9 +43,7 @@ <h1 class="display-1">Add unit</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Add unit in both Y axis and tooltip display</h5>
-          <p class="card-text">
-            Apache Echarts offer the availbility to add a unit formatter.
-          </p>
+          <p class="card-text">Apache Echarts offer the availbility to add a unit formatter.</p>
           <p class="card-text">
             There are two functions to provide. One for Y axis and one for the tooltip:
             <code>
@@ -102,8 +100,8 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
           var d = new Date();
           d.setMonth(d.getMonth() - i);
           return d.toLocaleDateString(undefined, {
-            month: "short",
-            year: "numeric"
+            month: 'short',
+            year: 'numeric',
           });
         });
 
@@ -115,16 +113,14 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
           },
           yAxis: {
             axisLabel: {
-              formatter: "{value} °C" 
-            }
+              formatter: '{value} °C',
+            },
           },
           tooltip: {
             formatter: function (params) {
-              return (
-                Math.round(params[0].value * 100) / 100 + " °C"
-              );
-            }
-          },  
+              return Math.round(params[0].value * 100) / 100 + ' °C';
+            },
+          },
           series: [
             {
               data: resultsOK,
@@ -132,7 +128,7 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
             },
             {
               data: resultsNOK,
-              type: "bar"
+              type: 'bar',
             },
             {
               data: goals,
@@ -140,7 +136,7 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
             },
           ],
           legend: {
-            data: ["Results OK", "Results NOK", "Goal"]
+            data: ['Results OK', 'Results NOK', 'Goal'],
           },
         };
 
diff --git a/docs/use_cases/confine-tooltip.html b/docs/use_cases/confine-tooltip.html
index c7deacf..030b661 100644
--- a/docs/use_cases/confine-tooltip.html
+++ b/docs/use_cases/confine-tooltip.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Examples - Specific use cases - Confine tooltip example</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
 
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
     <script type="text/javascript" src="../../dist/ods-charts.js"></script>
     <script type="text/javascript" src="./index.js"></script>
@@ -27,7 +27,7 @@
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy"/>
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -43,9 +43,7 @@ <h1 class="display-1">Confine tooltip example</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Confine tooltip example</h5>
-          <p class="card-text">
-            ODS Charts library uses the tooltip containment feature of the Apache ECharts library to ensure that the tooltip or popover is displayed within the confines of the graph, avoiding overflow beyond the display window.
-          </p>
+          <p class="card-text">ODS Charts library uses the tooltip containment feature of the Apache ECharts library to ensure that the tooltip or popover is displayed within the confines of the graph, avoiding overflow beyond the display window.</p>
           <p class="card-text">
             This function is activated by configuring the graph options as follows:
             <code>
diff --git a/docs/use_cases/index.html b/docs/use_cases/index.html
index 655adda..2469a5d 100644
--- a/docs/use_cases/index.html
+++ b/docs/use_cases/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Examples - Specific use cases</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
-    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
-    <link href="../assets/tarteaucitron-config.css" rel="stylesheet"/>
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
+    <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
 
-    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
-    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-    <link rel="manifest" href="../images/favicons/manifest.json">
-    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000">
-    <link rel="icon" href="../images/favicons/favicon.ico">
-    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#000">
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+    <link rel="manifest" href="../images/favicons/manifest.json" />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
+    <link rel="icon" href="../images/favicons/favicon.ico" />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
     <script>
       if (document.location.href.endsWith('/use_cases')) {
         document.location.href = document.location.href + '/';
@@ -29,7 +29,7 @@
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="../">
-              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy"/>
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -47,9 +47,7 @@ <h1 class="display-1">Specific use cases illustrations</h1>
           <div class="card h-100">
             <div class="card-body">
               <h5 class="card-title">Confine tooltip</h5>
-              <p class="card-text">
-                Prevent the tooltip or popover from being cut off at the edge of the graph.
-              </p>
+              <p class="card-text">Prevent the tooltip or popover from being cut off at the edge of the graph.</p>
             </div>
             <div class="card-footer">
               <a href="./confine-tooltip.html" class="btn btn-primary mt-3">Go to example</a>
@@ -61,9 +59,7 @@ <h5 class="card-title">Confine tooltip</h5>
           <div class="card h-100">
             <div class="card-body">
               <h5 class="card-title">Two colours for one series</h5>
-              <p class="card-text">
-                Highlight values in a series with a different colour.
-              </p>
+              <p class="card-text">Highlight values in a series with a different colour.</p>
             </div>
             <div class="card-footer">
               <a href="./two-colors-serie.html" class="btn btn-primary mt-3">Go to example</a>
@@ -75,9 +71,7 @@ <h5 class="card-title">Two colours for one series</h5>
           <div class="card h-100">
             <div class="card-body">
               <h5 class="card-title">Add unit</h5>
-              <p class="card-text">
-                Add a unit on Y axis and in the tooltip.
-              </p>
+              <p class="card-text">Add a unit on Y axis and in the tooltip.</p>
             </div>
             <div class="card-footer">
               <a href="./add-unit.html" class="btn btn-primary mt-3">Go to example</a>
@@ -89,9 +83,7 @@ <h5 class="card-title">Add unit</h5>
           <div class="card h-100">
             <div class="card-body">
               <h5 class="card-title">Specific series color</h5>
-              <p class="card-text">
-                You may want to specify the color of a series in the series itself, regardless of its index.
-              </p>
+              <p class="card-text">You may want to specify the color of a series in the series itself, regardless of its index.</p>
             </div>
             <div class="card-footer">
               <a href="./specify-color.html" class="btn btn-primary mt-3">Go to example</a>
diff --git a/docs/use_cases/specify-color.html b/docs/use_cases/specify-color.html
index 9e6d364..37cf0fd 100644
--- a/docs/use_cases/specify-color.html
+++ b/docs/use_cases/specify-color.html
@@ -1,52 +1,21 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Examples - Specific use cases - Specific series color</title>
 
-    <link
-      href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css"
-      rel="stylesheet"
-      integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ"
-      crossorigin="anonymous"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css"
-      rel="stylesheet"
-      integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR"
-      crossorigin="anonymous"
-    />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
     <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
 
-    <link
-      rel="apple-touch-icon"
-      href="../images/favicons/apple-touch-icon.png"
-      sizes="180x180"
-    />
-    <link
-      rel="icon"
-      href="../images/favicons/favicon-32x32.png"
-      sizes="32x32"
-      type="image/png"
-    />
-    <link
-      rel="icon"
-      href="../images/favicons/favicon-16x16.png"
-      sizes="16x16"
-      type="image/png"
-    />
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
     <link rel="manifest" href="../images/favicons/manifest.json" />
-    <link
-      rel="mask-icon"
-      href="../images/favicons/safari-pinned-tab.svg"
-      color="#000"
-    />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
     <link rel="icon" href="../images/favicons/favicon.ico" />
-    <meta
-      name="msapplication-config"
-      content="../images/favicons/browserconfig.xml"
-    />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
     <meta name="theme-color" content="#000" />
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
     <script type="text/javascript" src="../../dist/ods-charts.js"></script>
@@ -58,13 +27,7 @@
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -80,18 +43,10 @@ <h1 class="display-1">Specific series color</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Specify the color of a series</h5>
-          <p class="card-text">
-            You may want to specify the color of a series in the series itself,
-            regardless of its index. This can happen if the number of series
-            displayed changes but, for a specific type of data, you want to keep
-            the same color regardless of the series' place in the list of
-            series to be displayed. This means that the ordered list of colors
-            to use will change according to the series displayed.
-          </p>
+          <p class="card-text">You may want to specify the color of a series in the series itself, regardless of its index. This can happen if the number of series displayed changes but, for a specific type of data, you want to keep the same color regardless of the series' place in the list of series to be displayed. This means that the ordered list of colors to use will change according to the series displayed.</p>
           <p class="card-text">
             To freeze the color of a series, Apache ECharts provides the
-            <code>itemStyle.color</code> option, which can be added to the
-            series definition like this:
+            <code>itemStyle.color</code> option, which can be added to the series definition like this:
             <code>
               <pre>
 series: [
@@ -112,11 +67,7 @@ <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
                 <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
               </div>
               <div id="barLine_holder">
-                <div
-                  id="barLine_chart"
-                  style="width: 100%; height: 50vh"
-                  class="position-relative"
-                ></div>
+                <div id="barLine_chart" style="width: 100%; height: 50vh" class="position-relative"></div>
               </div>
               <div id="barLine_legend"></div>
             </div>
@@ -212,16 +163,8 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
         myChart.setOption(themeManager.getChartOptions());
       </script>
     </div>
-    <script
-      src="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/js/boosted.bundle.min.js"
-      integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/tarteaucitronjs@1.17.0/tarteaucitron.min.js"
-      integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN"
-      crossorigin="anonymous"
-    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/js/boosted.bundle.min.js" integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tarteaucitronjs@1.17.0/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
     <script src="../assets/tarteaucitron-config.js"></script>
   </body>
 </html>
diff --git a/docs/use_cases/two-colors-serie.html b/docs/use_cases/two-colors-serie.html
index dec6612..edfcd60 100644
--- a/docs/use_cases/two-colors-serie.html
+++ b/docs/use_cases/two-colors-serie.html
@@ -1,52 +1,21 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Examples - Specific use cases - Two colours for one series</title>
 
-    <link
-      href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css"
-      rel="stylesheet"
-      integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ"
-      crossorigin="anonymous"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css"
-      rel="stylesheet"
-      integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR"
-      crossorigin="anonymous"
-    />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
     <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
 
-    <link
-      rel="apple-touch-icon"
-      href="../images/favicons/apple-touch-icon.png"
-      sizes="180x180"
-    />
-    <link
-      rel="icon"
-      href="../images/favicons/favicon-32x32.png"
-      sizes="32x32"
-      type="image/png"
-    />
-    <link
-      rel="icon"
-      href="../images/favicons/favicon-16x16.png"
-      sizes="16x16"
-      type="image/png"
-    />
+    <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
+    <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
     <link rel="manifest" href="../images/favicons/manifest.json" />
-    <link
-      rel="mask-icon"
-      href="../images/favicons/safari-pinned-tab.svg"
-      color="#000"
-    />
+    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#000" />
     <link rel="icon" href="../images/favicons/favicon.ico" />
-    <meta
-      name="msapplication-config"
-      content="../images/favicons/browserconfig.xml"
-    />
+    <meta name="msapplication-config" content="../images/favicons/browserconfig.xml" />
     <meta name="theme-color" content="#000" />
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
     <script type="text/javascript" src="../../dist/ods-charts.js"></script>
@@ -54,20 +23,11 @@
   </head>
   <body>
     <header data-bs-theme="dark">
-      <nav
-        class="navbar navbar-expand-lg"
-        aria-label="Global navigation"
-      >
+      <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
           <div class="navbar-brand me-auto me-lg-4">
             <a class="stretched-link" href="./">
-              <img
-                src="../images/orange-logo.svg"
-                width="50"
-                height="50"
-                alt="ODS Charts - Back to Home"
-                loading="lazy"
-              />
+              <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
@@ -83,34 +43,16 @@ <h1 class="display-1">Two colours for one series</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Two colours for one series example</h5>
-          <p class="card-text">
-            When representing data on a bar chart, it is possible to want to
-            represent this data with a different colour depending on a condition
-            on the value. For example, green for a target achieved, red
-            otherwise.
-          </p>
+          <p class="card-text">When representing data on a bar chart, it is possible to want to represent this data with a different colour depending on a condition on the value. For example, green for a target achieved, red otherwise.</p>
           <p class="card-text">You would then need to be able to have:</p>
           <ul>
             <li>both colours in the legend</li>
-            <li>
-              the colour associated with the current value in the tooltip or
-              popover
-            </li>
+            <li>the colour associated with the current value in the tooltip or popover</li>
           </ul>
+          <p class="card-text">For this example, we have chosen to put the data in two series depending on whether or not the objective has been achieved. In this way, the two colours are clearly visible both on the graph and in the legend.</p>
+          <p class="card-text">On the other hand, this requires us to filter the values displayed in the tooltip so as not to display the series of a target that has not been reached when it has been reached and vice versa.</p>
           <p class="card-text">
-            For this example, we have chosen to put the data in two series
-            depending on whether or not the objective has been achieved. In this
-            way, the two colours are clearly visible both on the graph and in
-            the legend.
-          </p>
-          <p class="card-text">
-            On the other hand, this requires us to filter the values displayed
-            in the tooltip so as not to display the series of a target that has
-            not been reached when it has been reached and vice versa.
-          </p>
-          <p class="card-text">
-            This filter is created using tooltip value formatter in the default
-            Apache ECharts configuration, and to send back
+            This filter is created using tooltip value formatter in the default Apache ECharts configuration, and to send back
             <code>undefined</code> if we don't want the value to be displayed:
             <code>
               <pre>
@@ -124,12 +66,11 @@ <h5 class="card-title">Two colours for one series example</h5>
               </pre>
             </code>
           </p>
-          <div class="ms-5 mb-2 p-2  text-body-secondary border-start border-dark bg-light">
+          <div class="ms-5 mb-2 p-2 text-body-secondary border-start border-dark bg-light">
             <p class="card-text text-body-secondary">
-              <small >
+              <small>
                 NB: This formater could also be provided through
-                <code class="text-body-secondary">getPopupContentValue()</code> callback of the
-                <code class="text-body-secondary">externalizePopover()</code> feature:
+                <code class="text-body-secondary">getPopupContentValue()</code> callback of the <code class="text-body-secondary">externalizePopover()</code> feature:
                 <code class="text-body-secondary">
                   <pre>
 themeManager.externalizePopover(undefined, {
@@ -142,7 +83,6 @@ <h5 class="card-title">Two colours for one series example</h5>
                 </code>
               </small>
             </p>
-
           </div>
           <p>
             In the example below, we prefer the Apache Echarts
@@ -155,11 +95,7 @@ <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
                 <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
               </div>
               <div id="barLine_holder">
-                <div
-                  id="barLine_chart"
-                  style="width: 100%; height: 50vh"
-                  class="position-relative"
-                ></div>
+                <div id="barLine_chart" style="width: 100%; height: 50vh" class="position-relative"></div>
               </div>
               <div id="barLine_legend"></div>
             </div>
@@ -182,12 +118,8 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
           return 50 + Math.random() * 50;
         });
 
-        var resultsOK = results.map((res, i) =>
-          res >= goals[i] ? results[i] : 0
-        );
-        var resultsNOK = results.map((res, i) =>
-          res < goals[i] ? results[i] : 0
-        );
+        var resultsOK = results.map((res, i) => (res >= goals[i] ? results[i] : 0));
+        var resultsNOK = results.map((res, i) => (res < goals[i] ? results[i] : 0));
         var dates = new Array(...new Array(12).keys()).map((i) => {
           var d = new Date();
           d.setMonth(d.getMonth() - i);
@@ -225,9 +157,7 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
           },
           tooltip: {
             formatter: function (params) {
-              return params[0].value
-                ? Math.round(params[0].value * 100) / 100 + '$'
-                : undefined;
+              return params[0].value ? Math.round(params[0].value * 100) / 100 + '$' : undefined;
             },
           },
         };
@@ -257,16 +187,8 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
         myChart.setOption(themeManager.getChartOptions());
       </script>
     </div>
-    <script
-      src="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/js/boosted.bundle.min.js"
-      integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/tarteaucitronjs@1.17.0/tarteaucitron.min.js"
-      integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN"
-      crossorigin="anonymous"
-    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/js/boosted.bundle.min.js" integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tarteaucitronjs@1.17.0/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
     <script src="../assets/tarteaucitron-config.js"></script>
   </body>
 </html>
diff --git a/src/theme/ODS.project.ts b/src/theme/ODS.project.ts
index d652849..1161974 100644
--- a/src/theme/ODS.project.ts
+++ b/src/theme/ODS.project.ts
@@ -23,7 +23,7 @@ export interface EChartsProject {
       borderWidth: number;
     };
     lineStyle: {
-      width: number
+      width: number;
     };
     symbolSize: number;
     symbol: string;
@@ -34,7 +34,7 @@ export interface EChartsProject {
       borderWidth: number;
     };
     lineStyle: {
-      width: number
+      width: number;
     };
     symbolSize: number;
     symbol: string;
@@ -304,7 +304,7 @@ export interface EChartsProject {
   timeline: {
     lineStyle: {
       color: string;
-      width: number
+      width: number;
     };
     itemStyle: {
       color: string;
diff --git a/src/theme/const/main-axis-type.const.ts b/src/theme/const/main-axis-type.const.ts
index 0623748..17537a1 100644
--- a/src/theme/const/main-axis-type.const.ts
+++ b/src/theme/const/main-axis-type.const.ts
@@ -4,10 +4,5 @@ export enum MainAxisType {
 }
 
 export function isMainAxis(axis: { data?: any; type?: MainAxisType | string }) {
-  return (
-    axis &&
-    (axis.data ||
-      (axis.type &&
-        Object.values(MainAxisType).includes(axis.type as MainAxisType)))
-  );
+  return axis && (axis.data || (axis.type && Object.values(MainAxisType).includes(axis.type as MainAxisType)));
 }
diff --git a/src/theme/dark/ODS.sequential-colors.blue.ts b/src/theme/dark/ODS.sequential-colors.blue.ts
index 4401d12..cbc5829 100644
--- a/src/theme/dark/ODS.sequential-colors.blue.ts
+++ b/src/theme/dark/ODS.sequential-colors.blue.ts
@@ -7,12 +7,5 @@
 //
 
 export const DARK_SEQUENTIAL_COLORS_BLUE = {
-  visualMapColor: [
-    '#d6e4f4',
-    '#adc9e9',
-    '#84afde',
-    '#5a94d3',
-    '#3179c8',
-    '#085ebd',
-  ],
+  visualMapColor: ['#d6e4f4', '#adc9e9', '#84afde', '#5a94d3', '#3179c8', '#085ebd'],
 };
diff --git a/src/theme/dark/ODS.sequential-colors.green.ts b/src/theme/dark/ODS.sequential-colors.green.ts
index a3d323a..45b5aa3 100644
--- a/src/theme/dark/ODS.sequential-colors.green.ts
+++ b/src/theme/dark/ODS.sequential-colors.green.ts
@@ -7,12 +7,5 @@
 //
 
 export const DARK_SEQUENTIAL_COLORS_GREEN = {
-  visualMapColor: [
-    '#D6E7DD',
-    '#85B798',
-    '#85B798',
-    '#5C9E76',
-    '#338653',
-    '#0A6E31',
-  ],
+  visualMapColor: ['#D6E7DD', '#85B798', '#85B798', '#5C9E76', '#338653', '#0A6E31'],
 };
diff --git a/src/theme/dark/ODS.sequential-colors.purple.ts b/src/theme/dark/ODS.sequential-colors.purple.ts
index 3659d57..c0416d8 100644
--- a/src/theme/dark/ODS.sequential-colors.purple.ts
+++ b/src/theme/dark/ODS.sequential-colors.purple.ts
@@ -7,12 +7,5 @@
 //
 
 export const DARK_SEQUENTIAL_COLORS_PURPLE = {
-  visualMapColor: [
-    '#E1DAED',
-    '#C2B5DA',
-    '#A490C8',
-    '#866BB6',
-    '#6746A3',
-    '#492191',
-  ],
+  visualMapColor: ['#E1DAED', '#C2B5DA', '#A490C8', '#866BB6', '#6746A3', '#492191'],
 };
diff --git a/src/theme/legends/ods-chart-legends.ts b/src/theme/legends/ods-chart-legends.ts
index a6c25d4..6fc7fbb 100644
--- a/src/theme/legends/ods-chart-legends.ts
+++ b/src/theme/legends/ods-chart-legends.ts
@@ -7,11 +7,7 @@
 //
 
 import { type ECharts } from 'echarts';
-import {
-  ODSChartsCSSThemeDefinition,
-  ODSChartsCSSThemesNames,
-  ODSChartsItemCSSDefinition,
-} from '../css-themes/css-themes';
+import { ODSChartsCSSThemeDefinition, ODSChartsCSSThemesNames, ODSChartsItemCSSDefinition } from '../css-themes/css-themes';
 import { ODSChartsMode } from '../ods-chart-theme';
 
 const DEFAULT_CSS = `.ods-charts-no-css-lib.ods-charts-legend-holder {
@@ -75,21 +71,12 @@ export class ODSChartsLegends {
     private legendHolderSelector: string
   ) {}
 
-  public static addLegend(
-    echart: ECharts,
-    legendHolderSelector: string
-  ): ODSChartsLegends {
+  public static addLegend(echart: ECharts, legendHolderSelector: string): ODSChartsLegends {
     return new ODSChartsLegends(echart, legendHolderSelector);
   }
 
-  public static getLegendData(
-    dataOptions: any,
-    updateDataOption: boolean = true
-  ): ODSChartsLegendData {
-    let legendData: string[] =
-      dataOptions.legend && dataOptions.legend.data
-        ? dataOptions.legend.data
-        : [];
+  public static getLegendData(dataOptions: any, updateDataOption: boolean = true): ODSChartsLegendData {
+    let legendData: string[] = dataOptions.legend && dataOptions.legend.data ? dataOptions.legend.data : [];
 
     if (!dataOptions.legend || !dataOptions.legend.data) {
       if (dataOptions.dataset && dataOptions.dataset.source) {
@@ -97,22 +84,17 @@ export class ODSChartsLegends {
           if (updateDataOption && !dataOptions.legend) {
             dataOptions.legend = {};
           }
-          legendData = dataOptions.dataset.source[0].reduce(
-            (accumulator: any[], currentValue: any, currentIndex: number) => {
-              if (currentIndex > 0) {
-                accumulator.push(currentValue);
-              }
-              return accumulator;
-            },
-            []
-          );
+          legendData = dataOptions.dataset.source[0].reduce((accumulator: any[], currentValue: any, currentIndex: number) => {
+            if (currentIndex > 0) {
+              accumulator.push(currentValue);
+            }
+            return accumulator;
+          }, []);
           if (updateDataOption) {
             dataOptions.legend.data = legendData;
           }
         } catch (error) {
-          throw new Error(
-            `Missing data array of legends in legend chart option`
-          );
+          throw new Error(`Missing data array of legends in legend chart option`);
         }
       } else if (!dataOptions.series) {
         throw new Error(`Missing data array of legends in legend chart option`);
@@ -122,9 +104,7 @@ export class ODSChartsLegends {
         }
         legendData = dataOptions.series.map((serie: any, index: number) => {
           if (!serie.name) {
-            throw new Error(
-              `Missing data array of legends in legend chart option`
-            );
+            throw new Error(`Missing data array of legends in legend chart option`);
           }
           return serie.name;
         });
@@ -153,100 +133,53 @@ export class ODSChartsLegends {
     };
   }
 
-  public addLegend(
-    dataOptions: any,
-    colors: string[],
-    cssTheme: ODSChartsCSSThemeDefinition,
-    cssThemeName: ODSChartsCSSThemesNames,
-    mode: ODSChartsMode
-  ) {
-    if (
-      ODSChartsCSSThemesNames.NONE === cssThemeName &&
-      !document.querySelector('#ods-chart-legends-none-css')
-    ) {
+  public addLegend(dataOptions: any, colors: string[], cssTheme: ODSChartsCSSThemeDefinition, cssThemeName: ODSChartsCSSThemesNames, mode: ODSChartsMode) {
+    if (ODSChartsCSSThemesNames.NONE === cssThemeName && !document.querySelector('#ods-chart-legends-none-css')) {
       let style = document.createElement('style');
       style.id = 'ods-chart-legends-none-css';
       style.textContent = DEFAULT_CSS;
       document.head.appendChild(style);
     }
     if (!document.querySelector(this.legendHolderSelector)) {
-      throw new Error(
-        `No legend holder found with selector ${this.legendHolderSelector}`
-      );
+      throw new Error(`No legend holder found with selector ${this.legendHolderSelector}`);
     }
 
-    const legends: ODSChartsLegendData =
-      ODSChartsLegends.getLegendData(dataOptions);
+    const legends: ODSChartsLegendData = ODSChartsLegends.getLegendData(dataOptions);
     dataOptions.legend.show = false;
 
     this.generateHandler(cssTheme);
     const legendHolder = document.querySelector(this.legendHolderSelector);
     if (!legendHolder) {
-      throw new Error(
-        `Can't find legend holder using the selector ${this.legendHolderSelector}`
-      );
+      throw new Error(`Can't find legend holder using the selector ${this.legendHolderSelector}`);
     }
 
-    (document.querySelector(this.legendHolderSelector) as Element).innerHTML =
-      this.generateLegend(colors, legends, cssTheme, mode);
+    (document.querySelector(this.legendHolderSelector) as Element).innerHTML = this.generateLegend(colors, legends, cssTheme, mode);
   }
 
-  private generateLegend(
-    colors: string[],
-    legends: { labels: string[]; names: string[] },
-    cssTheme: ODSChartsCSSThemeDefinition,
-    mode: ODSChartsMode
-  ) {
-    return `<div class="ods-charts-legend-holder ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(
-      cssTheme.legends?.odsChartsLegendHolder
-    )}"
-    style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.legends?.odsChartsLegendHolder
-    )}"
+  private generateLegend(colors: string[], legends: { labels: string[]; names: string[] }, cssTheme: ODSChartsCSSThemeDefinition, mode: ODSChartsMode) {
+    return `<div class="ods-charts-legend-holder ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendHolder)}"
+    style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendHolder)}"
     >
-    <div class="ods-charts-legend-container ${ODSChartsItemCSSDefinition.getClasses(
-      cssTheme.legends?.odsChartsLegendContainer
-    )}"
-    style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.legends?.odsChartsLegendContainer
-    )}"
+    <div class="ods-charts-legend-container ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendContainer)}"
+    style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendContainer)}"
     >
     ${(legends ? legends.labels : []).map(
-      (
-        legendLabel: string,
-        index: number
-      ) => `<a class="ods-charts-legend-link ${ODSChartsItemCSSDefinition.getClasses(
+      (legendLabel: string, index: number) => `<a class="ods-charts-legend-link ${ODSChartsItemCSSDefinition.getClasses(
         cssTheme.legends?.odsChartsLegendLink
       )}" 
-      style="${ODSChartsItemCSSDefinition.getStyles(
-        cssTheme.legends?.odsChartsLegendLink
-      )}"
-      href="javascript:" onclick="ods_chart_legend_switchLegend[${JSON.stringify(
-        this.legendHolderSelector
-      ).replace(/"/g, '&quot;')}](this, ${JSON.stringify(
+      style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendLink)}"
+      href="javascript:" onclick="ods_chart_legend_switchLegend[${JSON.stringify(this.legendHolderSelector).replace(/"/g, '&quot;')}](this, ${JSON.stringify(
         legends.names[index]
       ).replace(/"/g, '&quot;')})">
-      <span class="ods-charts-legend-color-holder ${ODSChartsItemCSSDefinition.getClasses(
-        cssTheme.legends?.odsChartsLegendColorHolder
-      )}"
-      style="${ODSChartsItemCSSDefinition.getStyles(
-        cssTheme.legends?.odsChartsLegendColorHolder
-      )}">  
-      <span style="background-color:${
-        colors[index]
-      }; ${ODSChartsItemCSSDefinition.getStyles(
-        cssTheme.legends?.odsChartsLegendColor
-      )}" class="ods-charts-legend-color ${ODSChartsItemCSSDefinition.getClasses(
+      <span class="ods-charts-legend-color-holder ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendColorHolder)}"
+      style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendColorHolder)}">  
+      <span style="background-color:${colors[index]}; ${ODSChartsItemCSSDefinition.getStyles(
         cssTheme.legends?.odsChartsLegendColor
-      )}"></span>
+      )}" class="ods-charts-legend-color ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendColor)}"></span>
       </span>
   
-    <label class="ods-charts-legend-label ${ODSChartsItemCSSDefinition.getClasses(
-      cssTheme.legends?.odsChartsLegendLabel
-    )}"
-    style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.legends?.odsChartsLegendLabel
-    )}"
+    <label class="ods-charts-legend-label ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendLabel)}"
+    style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendLabel)}"
     role="button">${legendLabel}</label>
   </a>`
     ).join(`
@@ -259,28 +192,19 @@ export class ODSChartsLegends {
     if (!(window as any).ods_chart_legend_switchLegend) {
       (window as any).ods_chart_legend_switchLegend = {};
     }
-    (window as any).ods_chart_legend_switchLegend[this.legendHolderSelector] = (
-      elt: HTMLElement,
-      legendName: string
-    ) => {
+    (window as any).ods_chart_legend_switchLegend[this.legendHolderSelector] = (elt: HTMLElement, legendName: string) => {
       const visible = !elt.classList.contains('ods-charts-legend-link-opacity');
       const themeClasses =
-        cssTheme.legends &&
-        cssTheme.legends.odsChartsLegendLinkOpacity &&
-        cssTheme.legends.odsChartsLegendLinkOpacity.classes
+        cssTheme.legends && cssTheme.legends.odsChartsLegendLinkOpacity && cssTheme.legends.odsChartsLegendLinkOpacity.classes
           ? cssTheme.legends.odsChartsLegendLinkOpacity.classes
           : [];
       const themeStyles: { [cssProperty: string]: string } = visible
-        ? cssTheme.legends &&
-          cssTheme.legends.odsChartsLegendLinkOpacity &&
-          cssTheme.legends.odsChartsLegendLinkOpacity.styles
+        ? cssTheme.legends && cssTheme.legends.odsChartsLegendLinkOpacity && cssTheme.legends.odsChartsLegendLinkOpacity.styles
           ? cssTheme.legends.odsChartsLegendLinkOpacity.styles
           : {}
-        : cssTheme.legends &&
-          cssTheme.legends.odsChartsLegendLink &&
-          cssTheme.legends.odsChartsLegendLink.styles
-        ? cssTheme.legends.odsChartsLegendLink.styles
-        : {};
+        : cssTheme.legends && cssTheme.legends.odsChartsLegendLink && cssTheme.legends.odsChartsLegendLink.styles
+          ? cssTheme.legends.odsChartsLegendLink.styles
+          : {};
       if (visible) {
         elt.classList.add('ods-charts-legend-link-opacity');
         for (const themeClass of themeClasses) {
diff --git a/src/theme/light/ODS.sequential-colors.blue.ts b/src/theme/light/ODS.sequential-colors.blue.ts
index 470d58f..5e61865 100644
--- a/src/theme/light/ODS.sequential-colors.blue.ts
+++ b/src/theme/light/ODS.sequential-colors.blue.ts
@@ -7,12 +7,5 @@
 //
 
 export const LIGHT_SEQUENTIAL_COLORS_BLUE = {
-  visualMapColor: [
-    '#085ebd',
-    '#3179c8',
-    '#5a94d3',
-    '#84afde',
-    '#adc9e9',
-    '#d6e4f4',
-  ],
+  visualMapColor: ['#085ebd', '#3179c8', '#5a94d3', '#84afde', '#adc9e9', '#d6e4f4'],
 };
diff --git a/src/theme/light/ODS.sequential-colors.green.ts b/src/theme/light/ODS.sequential-colors.green.ts
index b643931..1b75072 100644
--- a/src/theme/light/ODS.sequential-colors.green.ts
+++ b/src/theme/light/ODS.sequential-colors.green.ts
@@ -7,12 +7,5 @@
 //
 
 export const LIGHT_SEQUENTIAL_COLORS_GREEN = {
-  visualMapColor: [
-    '#0A6E31',
-    '#338653',
-    '#5C9E76',
-    '#85B798',
-    '#85B798',
-    '#D6E7DD',
-  ],
+  visualMapColor: ['#0A6E31', '#338653', '#5C9E76', '#85B798', '#85B798', '#D6E7DD'],
 };
diff --git a/src/theme/light/ODS.sequential-colors.purple.ts b/src/theme/light/ODS.sequential-colors.purple.ts
index b7797a7..07277ab 100644
--- a/src/theme/light/ODS.sequential-colors.purple.ts
+++ b/src/theme/light/ODS.sequential-colors.purple.ts
@@ -7,12 +7,5 @@
 //
 
 export const LIGHT_SEQUENTIAL_COLORS_PURPLE = {
-  visualMapColor: [
-    '#492191',
-    '#6746A3',
-    '#866BB6',
-    '#A490C8',
-    '#C2B5DA',
-    '#E1DAED',
-  ],
+  visualMapColor: ['#492191', '#6746A3', '#866BB6', '#A490C8', '#C2B5DA', '#E1DAED'],
 };
diff --git a/src/theme/ods-chart-theme.ts b/src/theme/ods-chart-theme.ts
index f9cf87a..aead430 100644
--- a/src/theme/ods-chart-theme.ts
+++ b/src/theme/ods-chart-theme.ts
@@ -35,19 +35,11 @@ import { EChartsProject, ODS_PROJECT } from './ODS.project';
 import { ODSChartsLegends } from './legends/ods-chart-legends';
 import { mergeObjects } from '../tools/merge-objects';
 import { ODSChartsResize } from './resize/ods-chart-resize';
-import {
-  ODSChartsCSSThemeDefinition,
-  ODSChartsCSSThemes,
-  ODSChartsCSSThemesNames,
-} from './css-themes/css-themes';
+import { ODSChartsCSSThemeDefinition, ODSChartsCSSThemes, ODSChartsCSSThemesNames } from './css-themes/css-themes';
 import { getStringValue } from '../tools/hash';
 import { cloneDeepObject } from '../tools/clone-deep-object';
 import { ODSChartsPopover } from './popover/ods-chart-popover';
-import {
-  ODSChartsPopoverConfig,
-  ODSChartsPopoverDefinition,
-  ODSChartsPopoverManagers,
-} from './popover/ods-chart-popover-definitions';
+import { ODSChartsPopoverConfig, ODSChartsPopoverDefinition, ODSChartsPopoverManagers } from './popover/ods-chart-popover-definitions';
 import { isMainAxis } from './const/main-axis-type.const';
 
 export enum ODSChartsCategoricalColorsSet {
@@ -74,9 +66,7 @@ export enum ODSChartsCategoricalColorsSet {
  * }
  * ```
  */
-export type ODSChartsCustomCategoricalColor =
-  | ODSChartsCategoricalColor
-  | string;
+export type ODSChartsCustomCategoricalColor = ODSChartsCategoricalColor | string;
 
 /**
  * ODSChartsCategoricalColor is a color extract from one set of color of Orange Design System.
@@ -145,9 +135,7 @@ export interface ODSChartsThemeOptions {
    * ```
    * Default categoricalColors is {@link ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS}
    */
-  categoricalColors?:
-    | ODSChartsCategoricalColorsSet
-    | ODSChartsCustomCategoricalColor[];
+  categoricalColors?: ODSChartsCategoricalColorsSet | ODSChartsCustomCategoricalColor[];
   /**
    * visualMapColor is the set of colors to be used if map graphs (like Heatmap)
    *
@@ -259,12 +247,9 @@ const THEMES: {
  */
 export class ODSChartsTheme {
   private dataOptions: any;
-  private chartLegendManager: ODSChartsLegends =
-    undefined as unknown as ODSChartsLegends;
-  private chartResizeManager: ODSChartsResize =
-    undefined as unknown as ODSChartsResize;
-  private chartPopoverManager: ODSChartsPopover =
-    undefined as unknown as ODSChartsPopover;
+  private chartLegendManager: ODSChartsLegends = undefined as unknown as ODSChartsLegends;
+  private chartResizeManager: ODSChartsResize = undefined as unknown as ODSChartsResize;
+  private chartPopoverManager: ODSChartsPopover = undefined as unknown as ODSChartsPopover;
   public cssThemeName: ODSChartsCSSThemesNames;
 
   private constructor(
@@ -274,9 +259,7 @@ export class ODSChartsTheme {
   ) {
     this.cssThemeName =
       (Object.keys(ODSChartsCSSThemes).find(
-        (oneTheme) =>
-          ODSChartsCSSThemes[oneTheme as ODSChartsCSSThemesNames] ===
-          options.cssTheme
+        (oneTheme) => ODSChartsCSSThemes[oneTheme as ODSChartsCSSThemesNames] === options.cssTheme
       ) as ODSChartsCSSThemesNames) || ODSChartsCSSThemesNames.CUSTOM;
   }
 
@@ -289,9 +272,7 @@ export class ODSChartsTheme {
    * @param options: default option used to generate the theme
    * @returns the theme manager
    */
-  public static getThemeManager(
-    options?: ODSChartsThemeOptions
-  ): ODSChartsTheme {
+  public static getThemeManager(options?: ODSChartsThemeOptions): ODSChartsTheme {
     if (!options) {
       options = {};
     }
@@ -300,8 +281,7 @@ export class ODSChartsTheme {
     }
     const mode: ODSChartsMode = options.mode;
     if (!options.categoricalColors) {
-      options.categoricalColors =
-        ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS;
+      options.categoricalColors = ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS;
     }
     if (!options.visualMapColor) {
       options.visualMapColor = ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE;
@@ -312,9 +292,7 @@ export class ODSChartsTheme {
     if (!options.cssTheme) {
       options.cssTheme = ODSChartsCSSThemes.NONE;
     }
-    var themeName = `ods.${getStringValue(mode)}.${getStringValue(
-      options.categoricalColors
-    )}.${getStringValue(options.visualMapColor)}.${getStringValue(
+    var themeName = `ods.${getStringValue(mode)}.${getStringValue(options.categoricalColors)}.${getStringValue(options.visualMapColor)}.${getStringValue(
       options.lineStyle
     )}`;
 
@@ -325,36 +303,21 @@ export class ODSChartsTheme {
     mergeObjects(theme, cloneDeepObject(THEMES[mode].linesAxis));
 
     if (typeof options.categoricalColors === 'string') {
-      mergeObjects(
-        theme,
-        cloneDeepObject(
-          THEMES[mode].categoricalColors[options.categoricalColors]
-        )
-      );
+      mergeObjects(theme, cloneDeepObject(THEMES[mode].categoricalColors[options.categoricalColors]));
     } else {
       mergeObjects(
         theme,
         cloneDeepObject({
           color: options.categoricalColors.map((color) =>
-            'string' === typeof color
-              ? color
-              : THEMES[mode].categoricalColors[color.colorPalette].color[
-                  color.colorIndex
-                ]
+            'string' === typeof color ? color : THEMES[mode].categoricalColors[color.colorPalette].color[color.colorIndex]
           ),
         })
       );
     }
 
-    mergeObjects(
-      theme,
-      cloneDeepObject(THEMES[mode].sequentialColors[options.visualMapColor])
-    );
+    mergeObjects(theme, cloneDeepObject(THEMES[mode].sequentialColors[options.visualMapColor]));
 
-    mergeObjects(
-      theme,
-      cloneDeepObject(THEMES[mode].linesStyle[options.lineStyle])
-    );
+    mergeObjects(theme, cloneDeepObject(THEMES[mode].linesStyle[options.lineStyle]));
 
     return new ODSChartsTheme(themeName, theme, options);
   }
@@ -389,17 +352,9 @@ export class ODSChartsTheme {
   private getDisplayedColors(themeColors: string[]) {
     const colors: string[] = cloneDeepObject(themeColors);
     if (this.dataOptions && this.dataOptions.series) {
-      for (
-        let serieIndex = 0;
-        serieIndex < this.dataOptions.series.length;
-        serieIndex++
-      ) {
+      for (let serieIndex = 0; serieIndex < this.dataOptions.series.length; serieIndex++) {
         const serie = this.dataOptions.series[serieIndex];
-        if (
-          serie.itemStyle &&
-          serie.itemStyle.color &&
-          serie.itemStyle.color !== colors[serieIndex]
-        ) {
+        if (serie.itemStyle && serie.itemStyle.color && serie.itemStyle.color !== colors[serieIndex]) {
           const previousColorIndex = colors.indexOf(serie.itemStyle.color);
           if (previousColorIndex > -1) {
             colors.splice(previousColorIndex, 1);
@@ -424,9 +379,7 @@ export class ODSChartsTheme {
       this.dataOptions = dataOptions;
     }
     if (!this.dataOptions) {
-      throw new Error(
-        'the chart basic options must be set to get the theme completion'
-      );
+      throw new Error('the chart basic options must be set to get the theme completion');
     }
     // need to copy dataOptions as theme feature may change the original dataOptions
     // only make an asign at the first level in order to avoid deep copy of all data
@@ -438,25 +391,20 @@ export class ODSChartsTheme {
       fontWeight: '700',
       fontSize: 14,
       fontFamily: 'Helvetica Neue, sans-serif',
-      color:
-        ODSChartsMode.LIGHT === this.options.mode
-          ? 'rgba(0, 0, 0, 1)'
-          : '#FFFFFF',
+      color: ODSChartsMode.LIGHT === this.options.mode ? 'rgba(0, 0, 0, 1)' : '#FFFFFF',
     };
     const axisLine = {
       show: true,
       lineStyle: {
         width: 2,
-        color:
-          ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666',
+        color: ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666',
       },
     };
     const splitLine = {
       show: true,
       lineStyle: {
         width: 1,
-        color:
-          ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666',
+        color: ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666',
       },
     };
     const themeOptions: any = {
@@ -464,10 +412,7 @@ export class ODSChartsTheme {
       yAxis: { axisLabel: cloneDeepObject(axisLabel) },
     };
     for (const axis of ['xAxis', 'yAxis']) {
-      if (
-        !isMainAxis(this.dataOptions[axis]) &&
-        !(this.dataOptions[axis] && this.dataOptions[axis].axisLine)
-      ) {
+      if (!isMainAxis(this.dataOptions[axis]) && !(this.dataOptions[axis] && this.dataOptions[axis].axisLine)) {
         themeOptions[axis].axisLine = { show: false };
         themeOptions[axis].splitLine = { show: false };
       } else {
@@ -519,18 +464,11 @@ export class ODSChartsTheme {
    * optionally you can use this call to set dataOptions
    * @returns returns back the theme manager object
    */
-  public externalizeLegends(
-    echart: any,
-    legendHolderSelector: string,
-    dataOptions?: any
-  ): ODSChartsTheme {
+  public externalizeLegends(echart: any, legendHolderSelector: string, dataOptions?: any): ODSChartsTheme {
     if (dataOptions) {
       this.dataOptions = dataOptions;
     }
-    this.chartLegendManager = ODSChartsLegends.addLegend(
-      echart,
-      legendHolderSelector
-    );
+    this.chartLegendManager = ODSChartsLegends.addLegend(echart, legendHolderSelector);
     return this;
   }
 
@@ -550,21 +488,14 @@ export class ODSChartsTheme {
    * optionally you can use this call to set dataOptions
    * @returns returns back the theme manager object
    */
-  public externalizePopover(
-    popoverConfig: ODSChartsPopoverConfig = {},
-    popoverDefinition?: ODSChartsPopoverDefinition,
-    dataOptions?: any
-  ): ODSChartsTheme {
+  public externalizePopover(popoverConfig: ODSChartsPopoverConfig = {}, popoverDefinition?: ODSChartsPopoverDefinition, dataOptions?: any): ODSChartsTheme {
     if (dataOptions) {
       this.dataOptions = dataOptions;
     }
     if (!popoverDefinition) {
       popoverDefinition = ODSChartsPopoverManagers.NONE;
     }
-    this.chartPopoverManager = ODSChartsPopover.addPopoverManagement(
-      popoverDefinition as ODSChartsPopoverDefinition,
-      popoverConfig
-    );
+    this.chartPopoverManager = ODSChartsPopover.addPopoverManagement(popoverDefinition as ODSChartsPopoverDefinition, popoverConfig);
     return this;
   }
 
@@ -578,18 +509,11 @@ export class ODSChartsTheme {
    * optionally you can use this call to set dataOptions
    * @returns returns back the theme manager object
    */
-  public manageChartResize(
-    echart: any,
-    chartId: string,
-    dataOptions?: any
-  ): ODSChartsTheme {
+  public manageChartResize(echart: any, chartId: string, dataOptions?: any): ODSChartsTheme {
     if (dataOptions) {
       this.dataOptions = dataOptions;
     }
-    this.chartResizeManager = ODSChartsResize.addResizeManagement(
-      echart,
-      chartId
-    );
+    this.chartResizeManager = ODSChartsResize.addResizeManagement(echart, chartId);
     return this;
   }
 
@@ -609,9 +533,7 @@ export class ODSChartsTheme {
       this.dataOptions = dataOptions;
     }
     if (!this.dataOptions) {
-      throw new Error(
-        'the chart basic options must be set to get the theme completion'
-      );
+      throw new Error('the chart basic options must be set to get the theme completion');
     }
     const result = mergeObjects(this.getThemeOptions(), this.dataOptions);
     return result;
diff --git a/src/theme/popover/ods-chart-popover-definitions.ts b/src/theme/popover/ods-chart-popover-definitions.ts
index 7edbb2a..b0da3c0 100644
--- a/src/theme/popover/ods-chart-popover-definitions.ts
+++ b/src/theme/popover/ods-chart-popover-definitions.ts
@@ -39,26 +39,13 @@ export class ODSChartsPopoverItem {
 }
 
 export class ODSChartsPopoverDefinition {
-  public getOrCreatePopupInstance?: (
-    selector: string,
-    title: string,
-    htmlContent: string
-  ) => ODSChartsPopoverManager;
+  public getOrCreatePopupInstance?: (selector: string, title: string, htmlContent: string) => ODSChartsPopoverManager;
   public tooltipDelay?: number;
-  public getPopupTitle?: (
-    axisValue: string,
-    axisValueLabel?: string,
-    name?: string
-  ) => string;
+  public getPopupTitle?: (axisValue: string, axisValueLabel?: string, name?: string) => string;
   public getPopupContent?: (tooltipElements: ODSChartsPopoverItem[]) => string;
   public getPopupContentLine?: (tooltipElement: ODSChartsPopoverItem) => string;
-  public getPopupContentValue?: (
-    tooltipElement: ODSChartsPopoverItem
-  ) => string;
-  public getPopupTemplate?: (
-    categoryLabel: string,
-    tooltipElements: ODSChartsPopoverItem[]
-  ) => string;
+  public getPopupContentValue?: (tooltipElement: ODSChartsPopoverItem) => string;
+  public getPopupTemplate?: (categoryLabel: string, tooltipElements: ODSChartsPopoverItem[]) => string;
 }
 
 export enum ODSChartsPopoverAxisPointer {
@@ -134,14 +121,9 @@ class BOOSTED5_Definition extends ODSChartsPopoverDefinition {
     this.tooltipDelay = 0;
   }
 
-  private _getOrCreatePopupInstance(
-    selector: string,
-    title: string,
-    htmlContent: string
-  ): ODSChartsPopoverManager {
+  private _getOrCreatePopupInstance(selector: string, title: string, htmlContent: string): ODSChartsPopoverManager {
     try {
-      let previousPopover: ODSChartsPopoverManager =
-        boosted.Popover.getInstance(document.querySelector(selector));
+      let previousPopover: ODSChartsPopoverManager = boosted.Popover.getInstance(document.querySelector(selector));
       if (previousPopover) {
         previousPopover.dispose();
       }
@@ -152,19 +134,16 @@ class BOOSTED5_Definition extends ODSChartsPopoverDefinition {
     allowList.div = ['class'];
     allowList.label = ['class'];
 
-    return boosted.Popover.getOrCreateInstance(
-      document.querySelector(selector),
-      {
-        allowList: allowList,
-        html: true,
-        trigger: 'click',
-        placement: 'top',
-        container: 'body',
-        title: title,
-        content: htmlContent,
-        customClass: 'pe-none',
-      }
-    );
+    return boosted.Popover.getOrCreateInstance(document.querySelector(selector), {
+      allowList: allowList,
+      html: true,
+      trigger: 'click',
+      placement: 'top',
+      container: 'body',
+      title: title,
+      content: htmlContent,
+      customClass: 'pe-none',
+    });
   }
 }
 
@@ -175,11 +154,7 @@ class BOOSTED4_Definition extends ODSChartsPopoverDefinition {
     this.tooltipDelay = 200;
   }
 
-  private _getOrCreatePopupInstance(
-    selector: string,
-    title: string,
-    htmlContent: string
-  ) {
+  private _getOrCreatePopupInstance(selector: string, title: string, htmlContent: string) {
     const elt: any = document.querySelector(selector);
     const whiteList = cloneDeepObject(boosted.Tooltip.Default.whiteList);
     whiteList.span = ['style', 'class'];
diff --git a/src/theme/popover/ods-chart-popover.ts b/src/theme/popover/ods-chart-popover.ts
index e10eb98..59c9aef 100644
--- a/src/theme/popover/ods-chart-popover.ts
+++ b/src/theme/popover/ods-chart-popover.ts
@@ -6,11 +6,7 @@
 // This software is distributed under the MIT license.
 //
 
-import {
-  ODSChartsCSSThemeDefinition,
-  ODSChartsCSSThemesNames,
-  ODSChartsItemCSSDefinition,
-} from '../css-themes/css-themes';
+import { ODSChartsCSSThemeDefinition, ODSChartsCSSThemesNames, ODSChartsItemCSSDefinition } from '../css-themes/css-themes';
 import { mergeObjects, isVarArray } from '../../tools/merge-objects';
 import {
   ODSChartsPopoverAxisPointer,
@@ -19,10 +15,7 @@ import {
   ODSChartsPopoverItem,
   ODSChartsPopoverManagers,
 } from './ods-chart-popover-definitions';
-import {
-  ODSChartsLegendData,
-  ODSChartsLegends,
-} from '../legends/ods-chart-legends';
+import { ODSChartsLegendData, ODSChartsLegends } from '../legends/ods-chart-legends';
 import { cloneDeepObject } from '../../tools/clone-deep-object';
 import { ODSChartsMode } from '../ods-chart-theme';
 import { isMainAxis } from '../const/main-axis-type.const';
@@ -116,13 +109,9 @@ export class ODSChartsPopover {
     private popoverConfig: ODSChartsPopoverConfig
   ) {}
 
-  public static addPopoverManagement(
-    popoverDefinition: ODSChartsPopoverDefinition,
-    popoverConfig: ODSChartsPopoverConfig
-  ): ODSChartsPopover {
+  public static addPopoverManagement(popoverDefinition: ODSChartsPopoverDefinition, popoverConfig: ODSChartsPopoverConfig): ODSChartsPopover {
     if (undefined === popoverDefinition) {
-      popoverDefinition =
-        ODSChartsPopoverManagers.NONE as ODSChartsPopoverDefinition;
+      popoverDefinition = ODSChartsPopoverManagers.NONE as ODSChartsPopoverDefinition;
     }
     if (undefined === popoverConfig) {
       popoverConfig = {};
@@ -140,10 +129,7 @@ export class ODSChartsPopover {
       popoverConfig.tooltip = true;
     }
     if (undefined === popoverConfig.tooltipDelay) {
-      popoverConfig.tooltipDelay =
-        undefined === popoverDefinition.tooltipDelay
-          ? 0
-          : popoverDefinition.tooltipDelay;
+      popoverConfig.tooltipDelay = undefined === popoverDefinition.tooltipDelay ? 0 : popoverDefinition.tooltipDelay;
     }
     if (!popoverConfig.shared && 'none' !== popoverConfig.axisPointer) {
       console.warn(
@@ -154,14 +140,8 @@ export class ODSChartsPopover {
     return new ODSChartsPopover(popoverDefinition, popoverConfig);
   }
 
-  private getTooltipTrigger(
-    dataOptions: any,
-    themeOptions: any
-  ): 'xAxis' | 'yAxis' | 'grid' {
-    let tooltipTrigger: 'xAxis' | 'yAxis' | 'grid' =
-      this.popoverConfig.axisPointer === 'cross'
-        ? 'grid'
-        : (this.popoverConfig.tooltipTrigger as any);
+  private getTooltipTrigger(dataOptions: any, themeOptions: any): 'xAxis' | 'yAxis' | 'grid' {
+    let tooltipTrigger: 'xAxis' | 'yAxis' | 'grid' = this.popoverConfig.axisPointer === 'cross' ? 'grid' : (this.popoverConfig.tooltipTrigger as any);
 
     if (undefined == tooltipTrigger) {
       for (const axis of ['xAxis', 'yAxis'] as ['xAxis', 'yAxis']) {
@@ -172,22 +152,14 @@ export class ODSChartsPopover {
     }
     if (undefined == tooltipTrigger) {
       for (const axis of ['xAxis', 'yAxis'] as ['xAxis', 'yAxis']) {
-        if (
-          themeOptions[axis] &&
-          themeOptions[axis].splitLine &&
-          themeOptions[axis].splitLine.show
-        ) {
+        if (themeOptions[axis] && themeOptions[axis].splitLine && themeOptions[axis].splitLine.show) {
           tooltipTrigger = tooltipTrigger ? (undefined as any) : axis;
         }
       }
     }
     if (undefined == tooltipTrigger) {
       for (const axis of ['xAxis', 'yAxis'] as ['xAxis', 'yAxis']) {
-        if (
-          themeOptions[axis] &&
-          themeOptions[axis].axisLine &&
-          themeOptions[axis].axisLine.show
-        ) {
+        if (themeOptions[axis] && themeOptions[axis].axisLine && themeOptions[axis].axisLine.show) {
           tooltipTrigger = tooltipTrigger ? (undefined as any) : axis;
         }
       }
@@ -215,11 +187,7 @@ export class ODSChartsPopover {
     return {
       categoryLabel:
         this.popoverDefinition && this.popoverDefinition.getPopupTitle
-          ? this.popoverDefinition.getPopupTitle(
-              params[0].axisValue,
-              params[0].axisValueLabel,
-              params[0].name
-            )
+          ? this.popoverDefinition.getPopupTitle(params[0].axisValue, params[0].axisValueLabel, params[0].name)
           : params[0].axisValueLabel || params[0].axisValue || params[0].name,
       tooltipElements: params
         .map(
@@ -228,11 +196,7 @@ export class ODSChartsPopover {
             color?: string;
             value?: any;
             seriesIndex?: number;
-            axisType?:
-              | 'xAxis.time'
-              | 'xAxis.category'
-              | 'yAxis.time'
-              | 'yAxis.category';
+            axisType?: 'xAxis.time' | 'xAxis.category' | 'yAxis.time' | 'yAxis.category';
           }) => {
             const legendLabel =
               legends &&
@@ -242,32 +206,21 @@ export class ODSChartsPopover {
                 return legends.names[index] === param.seriesName;
               });
             const itemValue =
-              isVarArray(param.value) &&
-              2 == param.value.length &&
-              (!param.axisType || param.axisType.endsWith('.time'))
+              isVarArray(param.value) && 2 == param.value.length && (!param.axisType || param.axisType.endsWith('.time'))
                 ? param.value[1]
-                : isVarArray(param.value) &&
-                  (param.seriesIndex as number) + 1 < param.value.length
-                ? param.value[(param.seriesIndex as number) + 1]
-                : isVarArray(param.value)
-                ? undefined
-                : param.value;
-            const element: ODSChartsPopoverItem = mergeObjects(
-              cloneDeepObject(param),
-              {
-                markerColor: param.color,
-                itemValue: itemValue,
-                label: legendLabel || '',
-              }
-            );
-
-            if (
-              undefined !== element.itemValue &&
-              this.popoverDefinition &&
-              this.popoverDefinition.getPopupContentValue
-            ) {
-              element.itemValue =
-                this.popoverDefinition.getPopupContentValue(element);
+                : isVarArray(param.value) && (param.seriesIndex as number) + 1 < param.value.length
+                  ? param.value[(param.seriesIndex as number) + 1]
+                  : isVarArray(param.value)
+                    ? undefined
+                    : param.value;
+            const element: ODSChartsPopoverItem = mergeObjects(cloneDeepObject(param), {
+              markerColor: param.color,
+              itemValue: itemValue,
+              label: legendLabel || '',
+            });
+
+            if (undefined !== element.itemValue && this.popoverDefinition && this.popoverDefinition.getPopupContentValue) {
+              element.itemValue = this.popoverDefinition.getPopupContentValue(element);
             }
 
             return element;
@@ -282,27 +235,15 @@ export class ODSChartsPopover {
     };
   }
 
-  public addPopoverManagement(
-    dataOptions: any,
-    themeOptions: any,
-    cssTheme: ODSChartsCSSThemeDefinition,
-    cssThemeName: string,
-    mode: ODSChartsMode
-  ) {
-    if (
-      ODSChartsCSSThemesNames.NONE === cssThemeName &&
-      !document.querySelector('#ods-chart-popover-none-css')
-    ) {
+  public addPopoverManagement(dataOptions: any, themeOptions: any, cssTheme: ODSChartsCSSThemeDefinition, cssThemeName: string, mode: ODSChartsMode) {
+    if (ODSChartsCSSThemesNames.NONE === cssThemeName && !document.querySelector('#ods-chart-popover-none-css')) {
       let style = document.createElement('style');
       style.id = 'ods-chart-popover-none-css';
       style.textContent = DEFAULT_NONE_CSS;
       document.head.appendChild(style);
     }
     const popoverOptions = {};
-    const tooltipTrigger: 'xAxis' | 'yAxis' | 'grid' = this.getTooltipTrigger(
-      dataOptions,
-      themeOptions
-    );
+    const tooltipTrigger: 'xAxis' | 'yAxis' | 'grid' = this.getTooltipTrigger(dataOptions, themeOptions);
 
     let legends: ODSChartsLegendData = undefined as any;
     try {
@@ -347,7 +288,7 @@ export class ODSChartsPopover {
                 const bottom = pos[1] > size.contentSize[1];
                 let tmp;
 
-                obj[['top', 'bottom'][+bottom]] = bottom ? size.viewSize[1] - pos[1] + 10 : pos[1] + 10;              
+                obj[['top', 'bottom'][+bottom]] = bottom ? size.viewSize[1] - pos[1] + 10 : pos[1] + 10;
 
                 if (x > size.viewSize[0] - size.contentSize[0] / 2) {
                   tmp = Math.min(pos[0] - size.viewSize[0] + size.contentSize[0] - arrowSize, size.contentSize[0] - arrowSize * 2 - 5);
@@ -369,9 +310,7 @@ export class ODSChartsPopover {
               return obj;
             },
 
-            formatter: (
-              params: ODSChartsPopoverItem[] | ODSChartsPopoverItem
-            ) => {
+            formatter: (params: ODSChartsPopoverItem[] | ODSChartsPopoverItem) => {
               if (!isVarArray(params)) {
                 params = [params as ODSChartsPopoverItem];
               }
@@ -381,10 +320,7 @@ export class ODSChartsPopover {
               return elements && elements.tooltipElements.length > 0
                 ? new DOMParser().parseFromString(
                     this.popoverDefinition.getPopupTemplate
-                      ? this.popoverDefinition.getPopupTemplate(
-                          elements.categoryLabel,
-                          elements.tooltipElements
-                        )
+                      ? this.popoverDefinition.getPopupTemplate(elements.categoryLabel, elements.tooltipElements)
                       : this.getPopupTemplate(elements, cssTheme, mode),
                     'text/html'
                   ).body.firstChild
@@ -394,9 +330,7 @@ export class ODSChartsPopover {
             hideDelay: 0,
             appendTo: 'body',
             renderMode: 'html',
-            className: `ods-charts-popover ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(
-              cssTheme.popover?.odsChartsPopover
-            )}`,
+            className: `ods-charts-popover ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(cssTheme.popover?.odsChartsPopover)}`,
             enterable: true,
             axisPointer: {
               type: this.popoverConfig.axisPointer,
@@ -423,9 +357,7 @@ export class ODSChartsPopover {
       } else {
         mergeObjects(popoverOptions, {
           tooltip: {
-            formatter: (
-              params: ODSChartsPopoverItem[] | ODSChartsPopoverItem
-            ) => {
+            formatter: (params: ODSChartsPopoverItem[] | ODSChartsPopoverItem) => {
               if (!isVarArray(params)) {
                 params = [params as ODSChartsPopoverItem];
               }
@@ -436,12 +368,7 @@ export class ODSChartsPopover {
                 tooltipElements: ODSChartsPopoverItem[];
               } = this.getTooltipElements(params, legends);
               if (elements && elements.tooltipElements.length > 0) {
-                this.displayPopup(
-                  window.event as MouseEvent,
-                  elements,
-                  cssTheme,
-                  mode
-                );
+                this.displayPopup(window.event as MouseEvent, elements, cssTheme, mode);
               }
               return ' ';
             },
@@ -479,17 +406,12 @@ export class ODSChartsPopover {
         // we will use the Apache Echart config
         if (!this.popoverDefinition.getPopupContentValue) {
           const formater = dataOptions.tooltip.formatter;
-          this.popoverDefinition.getPopupContentValue = (
-            tooltipElement: ODSChartsPopoverItem
-          ) => formater([tooltipElement]);
+          this.popoverDefinition.getPopupContentValue = (tooltipElement: ODSChartsPopoverItem) => formater([tooltipElement]);
         }
         delete dataOptions.tooltip.formatter;
       }
 
-      if (
-        !this.popoverConfig.shared &&
-        'none' === this.popoverConfig.axisPointer
-      ) {
+      if (!this.popoverConfig.shared && 'none' === this.popoverConfig.axisPointer) {
         mergeObjects(popoverOptions, { tooltip: { trigger: 'item' } });
       } else {
         mergeObjects(popoverOptions, { tooltip: { trigger: 'axis' } });
@@ -504,71 +426,43 @@ export class ODSChartsPopover {
     mergeObjects(themeOptions, popoverOptions);
   }
 
-  private getPopupContentLine(
-    element: ODSChartsPopoverItem,
-    cssTheme: ODSChartsCSSThemeDefinition,
-    mode: ODSChartsMode
-  ): string {
+  private getPopupContentLine(element: ODSChartsPopoverItem, cssTheme: ODSChartsCSSThemeDefinition, mode: ODSChartsMode): string {
     return `<div 
-    class="ods-charts-popover-line ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(
-      cssTheme.popover?.odsChartsPopoverLine
-    )}"
-    style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverLine
-    )}"    
+    class="ods-charts-popover-line ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(cssTheme.popover?.odsChartsPopoverLine)}"
+    style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverLine)}"    
     >
       <span class="ods-charts-popover-color-holder ${ODSChartsItemCSSDefinition.getClasses(
         cssTheme.popover?.odsChartsPopoverColorHolder
-      )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverColorHolder
-    )}" >  
+      )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverColorHolder)}" >  
         <span 
-          class="ods-charts-popover-color ${ODSChartsItemCSSDefinition.getClasses(
-            cssTheme.popover?.odsChartsPopoverColor
-          )}"  style="background-color:${
-      element.markerColor
-    };  ${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverColor
-    )};">
+          class="ods-charts-popover-color ${ODSChartsItemCSSDefinition.getClasses(cssTheme.popover?.odsChartsPopoverColor)}"  style="background-color:${
+            element.markerColor
+          };  ${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverColor)};">
         </span> 
       </span>
     
       <label class="ods-charts-popover-text ${ODSChartsItemCSSDefinition.getClasses(
         cssTheme.popover?.odsChartsPopoverText
-      )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverText
-    )}" >
+      )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverText)}" >
         <span class="ods-charts-popover-label ${ODSChartsItemCSSDefinition.getClasses(
           cssTheme.popover?.odsChartsPopoverLabel
-        )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverLabel
-    )}" >${element.label ? element.label + ': ' : ''}</span>
+        )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverLabel)}" >${element.label ? element.label + ': ' : ''}</span>
         <span class="ods-charts-popover-value ${ODSChartsItemCSSDefinition.getClasses(
           cssTheme.popover?.odsChartsPopoverValue
-        )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverValue
-    )}">${element.itemValue}</span>
+        )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverValue)}">${element.itemValue}</span>
       </label>
     </div>
         `;
   }
 
-  private getPopupContent(
-    tooltipElements: ODSChartsPopoverItem[],
-    cssTheme: ODSChartsCSSThemeDefinition,
-    mode: ODSChartsMode
-  ): string {
+  private getPopupContent(tooltipElements: ODSChartsPopoverItem[], cssTheme: ODSChartsCSSThemeDefinition, mode: ODSChartsMode): string {
     return `
     <div  class="ods-charts-popover-body-content ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(
       cssTheme.popover?.odsChartsPopoverBodyContent
-    )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverBodyContent
-    )}" >
+    )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverBodyContent)}" >
         ${tooltipElements
           .map((element) =>
-            this.popoverDefinition.getPopupContentLine
-              ? this.popoverDefinition.getPopupContentLine(element)
-              : this.getPopupContentLine(element, cssTheme, mode)
+            this.popoverDefinition.getPopupContentLine ? this.popoverDefinition.getPopupContentLine(element) : this.getPopupContentLine(element, cssTheme, mode)
           )
           .join('')}
     </div>
@@ -592,40 +486,26 @@ export class ODSChartsPopover {
 
     return `
   <div class="ods-charts-popover-holder ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(
-      cssTheme.popover?.odsChartsPopoverHolder
-    )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverHolder
-    )}">
+    cssTheme.popover?.odsChartsPopoverHolder
+  )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverHolder)}">
     <div class="ods-charts-popover-inner ${ODSChartsItemCSSDefinition.getClasses(
       cssTheme.popover?.odsChartsPopoverInner
-    )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverInner
-    )}">
+    )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverInner)}">
       <div class="ods-charts-popover-content ${ODSChartsItemCSSDefinition.getClasses(
         cssTheme.popover?.odsChartsPopoverContent
-      )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverContent
-    )}" >
+      )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverContent)}" >
         <div class="ods-charts-popover-arrow ${ODSChartsItemCSSDefinition.getClasses(
           cssTheme.popover?.odsChartsPopoverArrow
-        )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverArrow
-    )}; left: ${this.tooltipStyle}" ></div>
+        )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverArrow)}; left: ${this.tooltipStyle}" ></div>
           <div class="ods-charts-popover-header ${ODSChartsItemCSSDefinition.getClasses(
             cssTheme.popover?.odsChartsPopoverHeader
-          )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverHeader
-    )}">${elements.categoryLabel}</div>
+          )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverHeader)}">${elements.categoryLabel}</div>
           <div class="ods-charts-popover-body ${ODSChartsItemCSSDefinition.getClasses(
             cssTheme.popover?.odsChartsPopoverBody
-          )}" style="${ODSChartsItemCSSDefinition.getStyles(
-      cssTheme.popover?.odsChartsPopoverBody
-    )}">
+          )}" style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.popover?.odsChartsPopoverBody)}">
             ${
               this.popoverDefinition.getPopupContent
-                ? this.popoverDefinition.getPopupContent(
-                    elements.tooltipElements
-                  )
+                ? this.popoverDefinition.getPopupContent(elements.tooltipElements)
                 : this.getPopupContent(elements.tooltipElements, cssTheme, mode)
             }
           </div>
@@ -657,20 +537,11 @@ export class ODSChartsPopover {
     }
     let id = '' + Math.ceil(Math.random() * 100000);
 
-    let tooltipAnchor: HTMLElement = document.querySelector(
-      '.libPopupTooltipAnchor'
-    ) as HTMLElement;
+    let tooltipAnchor: HTMLElement = document.querySelector('.libPopupTooltipAnchor') as HTMLElement;
     if (!tooltipAnchor) {
-      document.body.appendChild(
-        new DOMParser().parseFromString(
-          `<div class="libPopupTooltipAnchor" ></div>`,
-          'text/html'
-        ).body.firstChild as ChildNode
-      );
+      document.body.appendChild(new DOMParser().parseFromString(`<div class="libPopupTooltipAnchor" ></div>`, 'text/html').body.firstChild as ChildNode);
     }
-    tooltipAnchor = document.querySelector(
-      '.libPopupTooltipAnchor'
-    ) as HTMLElement;
+    tooltipAnchor = document.querySelector('.libPopupTooltipAnchor') as HTMLElement;
     tooltipAnchor.setAttribute('data-id', id);
     tooltipAnchor.setAttribute(
       'style',
@@ -703,9 +574,7 @@ export class ODSChartsPopover {
               popover.dispose();
             } catch (error) {}
           },
-          this.popoverConfig.tooltipTimeout
-            ? this.popoverConfig.tooltipTimeout
-            : 3000
+          this.popoverConfig.tooltipTimeout ? this.popoverConfig.tooltipTimeout : 3000
         );
       }
 
diff --git a/src/theme/resize/ods-chart-resize.ts b/src/theme/resize/ods-chart-resize.ts
index f99534e..075a921 100644
--- a/src/theme/resize/ods-chart-resize.ts
+++ b/src/theme/resize/ods-chart-resize.ts
@@ -9,12 +9,12 @@
 import { type ECharts } from 'echarts';
 export class ODSChartsResize {
   private static sizeListeners: any = {};
-  private constructor(private echart: ECharts, private chartId: string) {}
+  private constructor(
+    private echart: ECharts,
+    private chartId: string
+  ) {}
 
-  public static addResizeManagement(
-    echart: ECharts,
-    chartId: string
-  ): ODSChartsResize {
+  public static addResizeManagement(echart: ECharts, chartId: string): ODSChartsResize {
     return new ODSChartsResize(echart, chartId);
   }
 
@@ -22,18 +22,12 @@ export class ODSChartsResize {
     this.removeListener();
 
     ODSChartsResize.sizeListeners[this.chartId] = this.resizeChart.bind(this);
-    window.addEventListener(
-      'resize',
-      ODSChartsResize.sizeListeners[this.chartId]
-    );
+    window.addEventListener('resize', ODSChartsResize.sizeListeners[this.chartId]);
   }
 
   private removeListener() {
     if (ODSChartsResize.sizeListeners[this.chartId]) {
-      window.removeEventListener(
-        'resize',
-        ODSChartsResize.sizeListeners[this.chartId]
-      );
+      window.removeEventListener('resize', ODSChartsResize.sizeListeners[this.chartId]);
       delete ODSChartsResize.sizeListeners[this.chartId];
     }
   }
diff --git a/test/angular-echarts/src/app/app.component.html b/test/angular-echarts/src/app/app.component.html
index ccdc3da..e16124d 100644
--- a/test/angular-echarts/src/app/app.component.html
+++ b/test/angular-echarts/src/app/app.component.html
@@ -1,3 +1,2 @@
-<app-line-chart></app-line-chart>
-<br><br><br>
+<app-line-chart></app-line-chart> <br /><br /><br />
 <app-graph></app-graph>
diff --git a/test/angular-echarts/src/app/app.component.spec.ts b/test/angular-echarts/src/app/app.component.spec.ts
index 903ed71..e1c9b10 100644
--- a/test/angular-echarts/src/app/app.component.spec.ts
+++ b/test/angular-echarts/src/app/app.component.spec.ts
@@ -3,10 +3,12 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [RouterTestingModule],
-    declarations: [AppComponent]
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
+    })
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
diff --git a/test/angular-echarts/src/app/app.component.ts b/test/angular-echarts/src/app/app.component.ts
index 64b2b66..5878906 100644
--- a/test/angular-echarts/src/app/app.component.ts
+++ b/test/angular-echarts/src/app/app.component.ts
@@ -8,7 +8,7 @@ import { GraphComponent } from './graph/graph.component';
   standalone: true,
   imports: [GraphComponent, LineChartComponent, RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'angular-echarts';
diff --git a/test/angular-echarts/src/app/app.config.ts b/test/angular-echarts/src/app/app.config.ts
index 6c6ef60..e7d665f 100644
--- a/test/angular-echarts/src/app/app.config.ts
+++ b/test/angular-echarts/src/app/app.config.ts
@@ -4,5 +4,5 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes)],
 };
diff --git a/test/angular-echarts/src/app/graph/graph.component.html b/test/angular-echarts/src/app/graph/graph.component.html
index ccccd8f..73fd8e8 100644
--- a/test/angular-echarts/src/app/graph/graph.component.html
+++ b/test/angular-echarts/src/app/graph/graph.component.html
@@ -1,9 +1,7 @@
-<hr/>
+<hr />
 <p>Same example as in <code>test/angular-ngx-echarts</code> project but without using ngx-echarts</p>
 <div class="button-groups">
-  <button (click)="generateRandomDataset()">
-    Random Dataset
-  </button>
+  <button (click)="generateRandomDataset()">Random Dataset</button>
 </div>
 <div #graph class="graph"></div>
 <div id="legend"></div>
diff --git a/test/angular-echarts/src/app/graph/graph.component.spec.ts b/test/angular-echarts/src/app/graph/graph.component.spec.ts
index 1ae9acf..5190294 100644
--- a/test/angular-echarts/src/app/graph/graph.component.spec.ts
+++ b/test/angular-echarts/src/app/graph/graph.component.spec.ts
@@ -8,10 +8,9 @@ describe('GraphComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GraphComponent]
-    })
-    .compileComponents();
-    
+      imports: [GraphComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(GraphComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/test/angular-echarts/src/app/graph/graph.component.ts b/test/angular-echarts/src/app/graph/graph.component.ts
index c46574b..09f8c0f 100644
--- a/test/angular-echarts/src/app/graph/graph.component.ts
+++ b/test/angular-echarts/src/app/graph/graph.component.ts
@@ -48,16 +48,9 @@ export class GraphComponent implements AfterViewInit {
 
     echarts.registerTheme(this.myTheme.name, this.myTheme.theme);
 
-    this.echartsGraph = echarts.init(
-      this.graph.nativeElement,
-      this.myTheme.name
-    );
+    this.echartsGraph = echarts.init(this.graph.nativeElement, this.myTheme.name);
 
-    this.options = this.myTheme
-      .setDataOptions(this.options)
-      .externalizeLegends(this.echartsGraph, '#legend')
-      .externalizePopover()
-      .getChartOptions();
+    this.options = this.myTheme.setDataOptions(this.options).externalizeLegends(this.echartsGraph, '#legend').externalizePopover().getChartOptions();
 
     this.echartsGraph.setOption(this.options);
   }
diff --git a/test/angular-echarts/src/app/line-chart/line-chart.component.html b/test/angular-echarts/src/app/line-chart/line-chart.component.html
index 23f72bd..7bf6c4b 100644
--- a/test/angular-echarts/src/app/line-chart/line-chart.component.html
+++ b/test/angular-echarts/src/app/line-chart/line-chart.component.html
@@ -1,7 +1,7 @@
 <div class="mGraph-wrapper">
   <div class="mGraph" id="lineChartCanvas"></div>
 </div>
-<hr/>
+<hr />
 <div class="mGraph-wrapper">
   <div class="mGraph" id="lineChartCanvasODS"></div>
 </div>
diff --git a/test/angular-echarts/src/app/line-chart/line-chart.component.spec.ts b/test/angular-echarts/src/app/line-chart/line-chart.component.spec.ts
index 38e0458..07c80e7 100644
--- a/test/angular-echarts/src/app/line-chart/line-chart.component.spec.ts
+++ b/test/angular-echarts/src/app/line-chart/line-chart.component.spec.ts
@@ -8,10 +8,9 @@ describe('LineChartComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [LineChartComponent]
-    })
-    .compileComponents();
-    
+      imports: [LineChartComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(LineChartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/test/angular-echarts/src/app/line-chart/line-chart.component.ts b/test/angular-echarts/src/app/line-chart/line-chart.component.ts
index 5f12c9b..dbf25af 100644
--- a/test/angular-echarts/src/app/line-chart/line-chart.component.ts
+++ b/test/angular-echarts/src/app/line-chart/line-chart.component.ts
@@ -7,7 +7,7 @@ import * as echarts from 'echarts';
   standalone: true,
   imports: [],
   templateUrl: './line-chart.component.html',
-  styleUrl: './line-chart.component.scss'
+  styleUrl: './line-chart.component.scss',
 })
 export class LineChartComponent implements AfterViewInit {
   base = +new Date(1968, 9, 3);
@@ -21,13 +21,9 @@ export class LineChartComponent implements AfterViewInit {
     // Data
     for (var i = 1; i < 50; i++) {
       var now = new Date((this.base += this.oneDay));
-      this.date.push(
-        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
-      );
+      this.date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
       this.data.push(Math.round((Math.random() - 0.5) * 20 + this.data[i - 1]));
-      this.data2.push(
-        Math.round((Math.random() - 0.5) * 20 + this.data2[i - 1])
-      );
+      this.data2.push(Math.round((Math.random() - 0.5) * 20 + this.data2[i - 1]));
     }
     let dataOptions = {
       title: {
@@ -72,13 +68,9 @@ export class LineChartComponent implements AfterViewInit {
 
     echarts.registerTheme(lineChartODSTheme.name, lineChartODSTheme.theme);
 
-    let lineChartODS = echarts.init(
-      this.elm.nativeElement.querySelector('#lineChartCanvasODS'),
-      lineChartODSTheme.name,
-      {
-        renderer: 'svg',
-      }
-    );
+    let lineChartODS = echarts.init(this.elm.nativeElement.querySelector('#lineChartCanvasODS'), lineChartODSTheme.name, {
+      renderer: 'svg',
+    });
 
     lineChartODS.setOption(
       lineChartODSTheme
@@ -90,9 +82,7 @@ export class LineChartComponent implements AfterViewInit {
     );
 
     // echarts initialization
-    let lineChart = echarts.init(
-      this.elm.nativeElement.querySelector('#lineChartCanvas')
-    );
+    let lineChart = echarts.init(this.elm.nativeElement.querySelector('#lineChartCanvas'));
 
     lineChart.setOption({
       tooltip: {
diff --git a/test/angular-echarts/src/index.html b/test/angular-echarts/src/index.html
index a78a3d7..6908fac 100644
--- a/test/angular-echarts/src/index.html
+++ b/test/angular-echarts/src/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/test/angular-echarts/src/main.ts b/test/angular-echarts/src/main.ts
index 35b00f3..17447a5 100644
--- a/test/angular-echarts/src/main.ts
+++ b/test/angular-echarts/src/main.ts
@@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
diff --git a/test/angular-echarts/tsconfig.app.json b/test/angular-echarts/tsconfig.app.json
index 374cc9d..84f1f99 100644
--- a/test/angular-echarts/tsconfig.app.json
+++ b/test/angular-echarts/tsconfig.app.json
@@ -5,10 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
 }
diff --git a/test/angular-echarts/tsconfig.json b/test/angular-echarts/tsconfig.json
index e89a2dd..98638bf 100644
--- a/test/angular-echarts/tsconfig.json
+++ b/test/angular-echarts/tsconfig.json
@@ -21,10 +21,7 @@
     "useDefineForClassFields": false,
     "strictPropertyInitialization": false,
     "allowSyntheticDefaultImports": true,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
diff --git a/test/angular-echarts/tsconfig.spec.json b/test/angular-echarts/tsconfig.spec.json
index be7e9da..47e3dd7 100644
--- a/test/angular-echarts/tsconfig.spec.json
+++ b/test/angular-echarts/tsconfig.spec.json
@@ -3,12 +3,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }
diff --git a/test/angular-ngx-echarts/angular.json b/test/angular-ngx-echarts/angular.json
index 6d4cf6e..aab43db 100644
--- a/test/angular-ngx-echarts/angular.json
+++ b/test/angular-ngx-echarts/angular.json
@@ -20,18 +20,11 @@
             "outputPath": "dist/angular",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -82,19 +75,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         }
diff --git a/test/angular-ngx-echarts/src/app/app.component.spec.ts b/test/angular-ngx-echarts/src/app/app.component.spec.ts
index aa24fb3..777a3b4 100644
--- a/test/angular-ngx-echarts/src/app/app.component.spec.ts
+++ b/test/angular-ngx-echarts/src/app/app.component.spec.ts
@@ -3,10 +3,12 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [RouterTestingModule],
-    declarations: [AppComponent]
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
+    })
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
diff --git a/test/angular-ngx-echarts/src/app/app.component.ts b/test/angular-ngx-echarts/src/app/app.component.ts
index 755c0a9..5757624 100644
--- a/test/angular-ngx-echarts/src/app/app.component.ts
+++ b/test/angular-ngx-echarts/src/app/app.component.ts
@@ -7,7 +7,7 @@ import { GraphComponent } from './graph/graph.component';
   standalone: true,
   imports: [GraphComponent, RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'angular';
diff --git a/test/angular-ngx-echarts/src/app/app.config.ts b/test/angular-ngx-echarts/src/app/app.config.ts
index 6c6ef60..e7d665f 100644
--- a/test/angular-ngx-echarts/src/app/app.config.ts
+++ b/test/angular-ngx-echarts/src/app/app.config.ts
@@ -4,5 +4,5 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes)],
 };
diff --git a/test/angular-ngx-echarts/src/app/graph/graph.component.html b/test/angular-ngx-echarts/src/app/graph/graph.component.html
index 9b5ad9b..45e0eb7 100644
--- a/test/angular-ngx-echarts/src/app/graph/graph.component.html
+++ b/test/angular-ngx-echarts/src/app/graph/graph.component.html
@@ -1,15 +1,6 @@
 <div class="button-groups">
-  <button (click)="generateRandomDataset()">
-    Random Dataset
-  </button>
+  <button (click)="generateRandomDataset()">Random Dataset</button>
 </div>
-<div
-  echarts
-  [options]="options"
-  [merge]="mergeOptions"
-  [theme]="myTheme.theme"
-  class="demo-chart"
-  (chartInit)="onChartInit($event)"
-></div>
+<div echarts [options]="options" [merge]="mergeOptions" [theme]="myTheme.theme" class="demo-chart" (chartInit)="onChartInit($event)"></div>
 
 <div id="legend"></div>
diff --git a/test/angular-ngx-echarts/src/app/graph/graph.component.spec.ts b/test/angular-ngx-echarts/src/app/graph/graph.component.spec.ts
index 031d752..add7b8d 100644
--- a/test/angular-ngx-echarts/src/app/graph/graph.component.spec.ts
+++ b/test/angular-ngx-echarts/src/app/graph/graph.component.spec.ts
@@ -8,7 +8,7 @@ describe('GraphComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [GraphComponent]
+      declarations: [GraphComponent],
     });
     fixture = TestBed.createComponent(GraphComponent);
     component = fixture.componentInstance;
diff --git a/test/angular-ngx-echarts/src/app/graph/graph.component.ts b/test/angular-ngx-echarts/src/app/graph/graph.component.ts
index 59ed608..0617846 100644
--- a/test/angular-ngx-echarts/src/app/graph/graph.component.ts
+++ b/test/angular-ngx-echarts/src/app/graph/graph.component.ts
@@ -59,11 +59,7 @@ export class GraphComponent {
   }
 
   public onChartInit(ec: ECharts) {
-    this.options = this.myTheme
-      .setDataOptions(this.options)
-      .externalizeLegends(ec, '#legend')
-      .externalizePopover()
-      .getChartOptions();
+    this.options = this.myTheme.setDataOptions(this.options).externalizeLegends(ec, '#legend').externalizePopover().getChartOptions();
   }
 
   public generateRandomDataset() {
diff --git a/test/angular-ngx-echarts/src/index.html b/test/angular-ngx-echarts/src/index.html
index aa06306..86697fe 100644
--- a/test/angular-ngx-echarts/src/index.html
+++ b/test/angular-ngx-echarts/src/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Angular</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/test/angular-ngx-echarts/src/main.ts b/test/angular-ngx-echarts/src/main.ts
index 35b00f3..17447a5 100644
--- a/test/angular-ngx-echarts/src/main.ts
+++ b/test/angular-ngx-echarts/src/main.ts
@@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
diff --git a/test/angular-ngx-echarts/tsconfig.app.json b/test/angular-ngx-echarts/tsconfig.app.json
index 374cc9d..84f1f99 100644
--- a/test/angular-ngx-echarts/tsconfig.app.json
+++ b/test/angular-ngx-echarts/tsconfig.app.json
@@ -5,10 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
 }
diff --git a/test/angular-ngx-echarts/tsconfig.json b/test/angular-ngx-echarts/tsconfig.json
index 64a863e..128ed98 100644
--- a/test/angular-ngx-echarts/tsconfig.json
+++ b/test/angular-ngx-echarts/tsconfig.json
@@ -20,10 +20,7 @@
     "module": "ES2022",
     "useDefineForClassFields": false,
     "allowSyntheticDefaultImports": true,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
diff --git a/test/angular-ngx-echarts/tsconfig.spec.json b/test/angular-ngx-echarts/tsconfig.spec.json
index be7e9da..47e3dd7 100644
--- a/test/angular-ngx-echarts/tsconfig.spec.json
+++ b/test/angular-ngx-echarts/tsconfig.spec.json
@@ -3,12 +3,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }
diff --git a/test/examples/bar-line-chart/index.html b/test/examples/bar-line-chart/index.html
index 8664b52..0665566 100644
--- a/test/examples/bar-line-chart/index.html
+++ b/test/examples/bar-line-chart/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -15,11 +15,7 @@ <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
           <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
         </div>
         <div id="barLine_holder">
-          <div
-            id="barLine_chart"
-            style="width: 100%; height: 50vh"
-            class="position-relative"
-          ></div>
+          <div id="barLine_chart" style="width: 100%; height: 50vh" class="position-relative"></div>
         </div>
         <div id="barLine_legend"></div>
       </div>
@@ -61,19 +57,15 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
           mode: ODSCharts.ODSChartsMode.LIGHT,
           categoricalColors: [
             {
-              colorPalette:
-                ODSCharts.ODSChartsCategoricalColorsSet
-                  .DEFAULT_SUPPORTING_COLORS,
+              colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
               colorIndex: 2,
             },
             {
-              colorPalette:
-                ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN,
+              colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN,
               colorIndex: 0,
             },
           ],
-          visualMapColor:
-            ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
+          visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
           lineStyle: ODSCharts.ODSChartsLineStyle.BROKEN_WITH_POINTS,
           cssTheme: ODSCharts.ODSChartsCSSThemes.NONE,
         });
diff --git a/test/examples/single-line-chart/index.html b/test/examples/single-line-chart/index.html
index 2d7315c..94472e5 100644
--- a/test/examples/single-line-chart/index.html
+++ b/test/examples/single-line-chart/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -15,11 +15,7 @@ <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
           <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
         </div>
         <div id="singleLineChart_holder">
-          <div
-            id="singleLineChart_chart"
-            style="width: 100%; height: 50vh"
-            class="position-relative"
-          ></div>
+          <div id="singleLineChart_chart" style="width: 100%; height: 50vh" class="position-relative"></div>
         </div>
         <div id="singleLineChart_legend"></div>
       </div>
@@ -48,10 +44,8 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
         // Build the theme
         var themeManager = ODSCharts.getThemeManager({
           mode: ODSCharts.ODSChartsMode.LIGHT,
-          categoricalColors:
-            ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE,
-          visualMapColor:
-            ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
+          categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE,
+          visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
           lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
           cssTheme: ODSCharts.ODSChartsCSSThemes.NONE,
         });
diff --git a/test/examples/timeseries-chart/index.html b/test/examples/timeseries-chart/index.html
index 45e2813..2db21f0 100644
--- a/test/examples/timeseries-chart/index.html
+++ b/test/examples/timeseries-chart/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -15,11 +15,7 @@ <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
           <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
         </div>
         <div id="timeSeriesChart_holder">
-          <div
-            id="timeSeriesChart_chart"
-            style="width: 100%; height: 50vh"
-            class="position-relative"
-          ></div>
+          <div id="timeSeriesChart_chart" style="width: 100%; height: 50vh" class="position-relative"></div>
         </div>
         <div id="timeSeriesChart_legend"></div>
       </div>
@@ -2164,10 +2160,8 @@ <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
         // Build the theme
         var themeManager = ODSCharts.getThemeManager({
           mode: ODSCharts.ODSChartsMode.LIGHT,
-          categoricalColors:
-            ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
-          visualMapColor:
-            ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
+          categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+          visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
           lineStyle: ODSCharts.ODSChartsLineStyle.BROKEN,
           cssTheme: ODSCharts.ODSChartsCSSThemes.NONE,
         });
diff --git a/test/html/index.html b/test/html/index.html
index a8f7a6e..84f93b0 100644
--- a/test/html/index.html
+++ b/test/html/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -17,20 +17,15 @@
     <script>
       var lineChartODSTheme = ODSCharts.getThemeManager({
         mode: ODSCharts.ODSChartsMode.LIGHT,
-        categoricalColors:
-          ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+        categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
         visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
         lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
       });
       echarts.registerTheme(lineChartODSTheme.name, lineChartODSTheme.theme);
 
-      const chart1 = echarts.init(
-        document.getElementById('chart1'),
-        lineChartODSTheme.name,
-        {
-          renderer: 'svg',
-        }
-      );
+      const chart1 = echarts.init(document.getElementById('chart1'), lineChartODSTheme.name, {
+        renderer: 'svg',
+      });
       chart1.setOption({
         title: {
           text: 'ECharts Getting Started Example',
@@ -49,10 +44,7 @@
         ],
       });
 
-      const chart2 = echarts.init(
-        document.getElementById('chart2'),
-        lineChartODSTheme.name
-      );
+      const chart2 = echarts.init(document.getElementById('chart2'), lineChartODSTheme.name);
       chart2.setOption({
         xAxis: {
           data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
@@ -66,10 +58,7 @@
         ],
       });
 
-      const chart3 = echarts.init(
-        document.getElementById('chart3'),
-        lineChartODSTheme.name
-      );
+      const chart3 = echarts.init(document.getElementById('chart3'), lineChartODSTheme.name);
       chart3.setOption(
         lineChartODSTheme
           .setDataOptions({
@@ -95,10 +84,7 @@
           .getChartOptions()
       );
 
-      const chart4 = echarts.init(
-        document.getElementById('chart4'),
-        lineChartODSTheme.name
-      );
+      const chart4 = echarts.init(document.getElementById('chart4'), lineChartODSTheme.name);
       chart4.setOption(
         lineChartODSTheme
           .setDataOptions({
@@ -139,22 +125,13 @@
         for (var i = 1; i < NB_POINTS; i++) {
           data.push({
             time: dataDates[i],
-            value:
-              Math.random() < 0.3
-                ? undefined
-                : Math.round((Math.random() - 0.5) * 20 + lastValue),
+            value: Math.random() < 0.3 ? undefined : Math.round((Math.random() - 0.5) * 20 + lastValue),
           });
-          lastValue =
-            undefined !== data[data.length - 1].value
-              ? data[data.length - 1].value
-              : lastValue;
+          lastValue = undefined !== data[data.length - 1].value ? data[data.length - 1].value : lastValue;
         }
         return data;
       };
-      const chart5 = echarts.init(
-        document.getElementById('chart5'),
-        lineChartODSTheme.name
-      );
+      const chart5 = echarts.init(document.getElementById('chart5'), lineChartODSTheme.name);
       let lastYear = 0;
       chart5.setOption(
         lineChartODSTheme
@@ -214,13 +191,7 @@
             {
               getPopupTitle: (value) => {
                 const date = new Date(value);
-                return (
-                  date.getDate() +
-                  '/' +
-                  (date.getMonth() + 1) +
-                  '/' +
-                  date.getFullYear()
-                );
+                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
               },
             }
           )
diff --git a/test/react/public/index.html b/test/react/public/index.html
index aa069f2..d79d7a7 100644
--- a/test/react/public/index.html
+++ b/test/react/public/index.html
@@ -1,14 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/test/react/src/LineChartComponent.js b/test/react/src/LineChartComponent.js
index 2ced3ba..422b338 100644
--- a/test/react/src/LineChartComponent.js
+++ b/test/react/src/LineChartComponent.js
@@ -14,13 +14,9 @@ class LineChartComponent extends Component {
   componentDidMount() {
     for (var i = 1; i < 50; i++) {
       var now = new Date((this.base += this.oneDay));
-      this.date.push(
-        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
-      );
+      this.date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
       this.data.push(Math.round((Math.random() - 0.5) * 20 + this.data[i - 1]));
-      this.data2.push(
-        Math.round((Math.random() - 0.5) * 20 + this.data2[i - 1])
-      );
+      this.data2.push(Math.round((Math.random() - 0.5) * 20 + this.data2[i - 1]));
     }
     let dataOptions = {
       title: {
@@ -67,13 +63,9 @@ class LineChartComponent extends Component {
 
     console.log(document.querySelector('#lineChartCanvasODS'));
 
-    let lineChartODS = echarts.init(
-      document.querySelector('#lineChartCanvasODS'),
-      lineChartODSTheme.name,
-      {
-        renderer: 'svg',
-      }
-    );
+    let lineChartODS = echarts.init(document.querySelector('#lineChartCanvasODS'), lineChartODSTheme.name, {
+      renderer: 'svg',
+    });
 
     lineChartODS.setOption(
       lineChartODSTheme
diff --git a/test/react/src/index.css b/test/react/src/index.css
index ec2585e..8285d2a 100644
--- a/test/react/src/index.css
+++ b/test/react/src/index.css
@@ -1,13 +1,10 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
diff --git a/test/react/src/reportWebVitals.js b/test/react/src/reportWebVitals.js
index 5253d3a..532f29b 100644
--- a/test/react/src/reportWebVitals.js
+++ b/test/react/src/reportWebVitals.js
@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
diff --git a/test/vue/.eslintrc.cjs b/test/vue/.eslintrc.cjs
index 6f40582..50ee96f 100644
--- a/test/vue/.eslintrc.cjs
+++ b/test/vue/.eslintrc.cjs
@@ -3,7 +3,7 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
diff --git a/test/vue/.prettierrc.json b/test/vue/.prettierrc.json
index 66e2335..ecdf3e0 100644
--- a/test/vue/.prettierrc.json
+++ b/test/vue/.prettierrc.json
@@ -5,4 +5,4 @@
   "singleQuote": true,
   "printWidth": 100,
   "trailingComma": "none"
-}
\ No newline at end of file
+}
diff --git a/test/vue/README.md b/test/vue/README.md
index 76eef4e..aa6581d 100644
--- a/test/vue/README.md
+++ b/test/vue/README.md
@@ -13,8 +13,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
 If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 
 1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
 ## Customize configuration
diff --git a/test/vue/index.html b/test/vue/index.html
index a888544..dcd6967 100644
--- a/test/vue/index.html
+++ b/test/vue/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
   <body>
diff --git a/test/vue/src/App.vue b/test/vue/src/App.vue
index 09812ef..8a372da 100644
--- a/test/vue/src/App.vue
+++ b/test/vue/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LineChartComponent from './components/LineChartComponent.vue';
+import LineChartComponent from './components/LineChartComponent.vue'
 </script>
 
 <template>
diff --git a/tsconfig.json b/tsconfig.json
index 58eea59..0e4e32a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -107,7 +107,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "exclude": [
-	  "./test/"
-  ]
+  "exclude": ["./test/"]
 }