diff --git a/src/lib/lovely-chart/Header.js b/src/lib/lovely-chart/Header.js
index 0fb74cd4f..6b9e987fe 100644
--- a/src/lib/lovely-chart/Header.js
+++ b/src/lib/lovely-chart/Header.js
@@ -18,7 +18,7 @@ export function createHeader(container, title, zoomOutLabel = 'Zoom out', zoomOu
       return;
     }
 
-    _captionElement.innerHTML = caption;
+    _captionElement.textContent = caption;
   }
 
   function zoom(caption) {
@@ -40,7 +40,7 @@ export function createHeader(container, title, zoomOutLabel = 'Zoom out', zoomOu
 
     _titleElement = createElement();
     _titleElement.className = 'lovely-chart--header-title';
-    _titleElement.innerHTML = title;
+    _titleElement.textContent = title;
     _element.appendChild(_titleElement);
 
     _captionElement = createElement();
diff --git a/src/lib/lovely-chart/Tools.js b/src/lib/lovely-chart/Tools.js
index a0afef39c..3c67dcbb3 100644
--- a/src/lib/lovely-chart/Tools.js
+++ b/src/lib/lovely-chart/Tools.js
@@ -38,7 +38,15 @@ export function createTools(container, data, filterCallback) {
       control.dataset.key = key;
       const darkContent = isColorCloseToWhite(data.colors[key]) ? ' lovely-chart--dark-content' : '';
       control.className = `lovely-chart--button lovely-chart--color-${data.colors[key].slice(1)} lovely-chart--state-checked${darkContent}`;
-      control.innerHTML = `<span class="lovely-chart--button-check"></span><span class="lovely-chart--button-label">${name}</span>`;
+
+      const check = createElement('span');
+      check.className = 'lovely-chart--button-check';
+      control.appendChild(check);
+
+      const label = createElement('span');
+      label.className = 'lovely-chart--button-label';
+      label.textContent = name;
+      control.appendChild(label);
 
       control.addEventListener('click', (e) => {
         e.preventDefault();
diff --git a/src/lib/lovely-chart/Tooltip.js b/src/lib/lovely-chart/Tooltip.js
index ddb27453c..81d0aa966 100644
--- a/src/lib/lovely-chart/Tooltip.js
+++ b/src/lib/lovely-chart/Tooltip.js
@@ -324,10 +324,14 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
       }
       const currentTitle = titleContainer.querySelector(':not(.lovely-chart--state-hidden)');
 
-      if (!titleContainer.innerHTML || !currentTitle) {
-        titleContainer.innerHTML = `<span>${title}</span>`;
+      if (!titleContainer.textContent || !currentTitle) {
+        titleContainer.textContent = '';
+
+        const newTitle = createElement('span');
+        newTitle.textContent = title;
+        titleContainer.appendChild(newTitle);
       } else {
-        currentTitle.innerHTML = title;
+        currentTitle.textContent = title;
       }
     }
   }
@@ -340,7 +344,16 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
     newDataSet.className = 'lovely-chart--tooltip-dataset';
     newDataSet.setAttribute('data-present', 'true');
     newDataSet.setAttribute('data-name', name);
-    newDataSet.innerHTML = `<span class="lovely-chart--dataset-title">${name}</span><span class="${className}">${_formatValue(value)}</span>`;
+    const titleElement = createElement('span');
+    titleElement.className = 'lovely-chart--dataset-title';
+    titleElement.textContent = name;
+    newDataSet.appendChild(titleElement);
+
+    const valueElement = createElement('span');
+    valueElement.className = className;
+    valueElement.textContent = _formatValue(value);
+    newDataSet.appendChild(valueElement);
+
     _renderPercentageValue(newDataSet, value, totalValue);
 
     const totalText = dataSetContainer.querySelector(`[data-total="true"]`);
@@ -357,7 +370,7 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
     const valueElement = currentDataSet.querySelector(`.lovely-chart--tooltip-dataset-value`);
 
     if (valueElement) {
-      valueElement.innerHTML = _formatValue(value);
+      valueElement.textContent = _formatValue(value);
     }
 
     _renderPercentageValue(currentDataSet, value, totalValue);
@@ -383,10 +396,10 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
     if (!percentageElement) {
       const newPercentageTitle = createElement('span');
       newPercentageTitle.className = 'lovely-chart--percentage-title lovely-chart--position-left';
-      newPercentageTitle.innerHTML = `${percentageValue}%`;
+      newPercentageTitle.textContent = `${percentageValue}%`;
       dataSet.prepend(newPercentageTitle);
     } else {
-      percentageElement.innerHTML = `${percentageValue}%`;
+      percentageElement.textContent = `${percentageValue}%`;
     }
   }
 
@@ -412,7 +425,8 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
     const finalStatistics = data.isPie ? limitedStatistics.filter(({ value }, index) => _isPieSectorSelected(statistics, value, totalValue, index, pointerVector)) : limitedStatistics;
 
     finalStatistics.forEach((statItem) => {
-      const currentDataSet = dataSetContainer.querySelector(`[data-name="${statItem.name}"]`);
+      const currentDataSet = Array.from(dataSetContainer.children)
+        .find((element) => element.dataset.name === statItem.name);
 
       if (!currentDataSet) {
         _insertNewDataSet(dataSetContainer, statItem, totalValue);
@@ -453,13 +467,21 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
       newTotalText.className = 'lovely-chart--tooltip-dataset lovely-chart--tooltip-dataset-total';
       newTotalText.setAttribute('data-present', 'true');
       newTotalText.setAttribute('data-total', 'true');
-      newTotalText.innerHTML = `<span>Total</span><span class="${className}">${totalValue}</span>`;
+      const titleElement = createElement('span');
+      titleElement.textContent = 'Total';
+      newTotalText.appendChild(titleElement);
+
+      const valueElement = createElement('span');
+      valueElement.className = className;
+      valueElement.textContent = totalValue;
+      newTotalText.appendChild(valueElement);
+
       dataSetContainer.appendChild(newTotalText);
     } else {
       totalText.setAttribute('data-present', 'true');
 
       const valueElement = totalText.querySelector(`.lovely-chart--tooltip-dataset-value:not(.lovely-chart--state-hidden)`);
-      valueElement.innerHTML = totalValue;
+      valueElement.textContent = totalValue;
     }
   }
 
@@ -475,13 +497,21 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
       newTotalText.className = 'lovely-chart--tooltip-dataset lovely-chart--tooltip-dataset-total';
       newTotalText.setAttribute('data-present', 'true');
       newTotalText.setAttribute('data-total', 'true');
-      newTotalText.innerHTML = `<span>${label}</span><span class="${className}">${prefix}${secondaryValue}${suffix}</span>`;
+      const titleElement = createElement('span');
+      titleElement.textContent = label;
+      newTotalText.appendChild(titleElement);
+
+      const valueElement = createElement('span');
+      valueElement.className = className;
+      valueElement.textContent = `${prefix}${secondaryValue}${suffix}`;
+      newTotalText.appendChild(valueElement);
+
       dataSetContainer.appendChild(newTotalText);
     } else {
       totalText.setAttribute('data-present', 'true');
 
       const valueElement = totalText.querySelector(`.lovely-chart--tooltip-dataset-value:not(.lovely-chart--state-hidden)`);
-      valueElement.innerHTML = `${prefix}${secondaryValue}${suffix}`;
+      valueElement.textContent = `${prefix}${secondaryValue}${suffix}`;
     }
   }
 
diff --git a/src/lib/lovely-chart/toggleText.js b/src/lib/lovely-chart/toggleText.js
index 32aa2ae8a..3644fdf28 100644
--- a/src/lib/lovely-chart/toggleText.js
+++ b/src/lib/lovely-chart/toggleText.js
@@ -6,7 +6,7 @@ export function toggleText(element, newText, className = '', inverse = false) {
 
   const newElement = createElement(element.tagName);
   newElement.className = `${className} lovely-chart--transition lovely-chart--position-${inverse ? 'top' : 'bottom'} lovely-chart--state-hidden`;
-  newElement.innerHTML = newText;
+  newElement.textContent = newText;
 
   const selector = className.length ? `.${className.split(' ').join('.')}` : '';
   const oldElements = container.querySelectorAll(`${selector}.lovely-chart--state-hidden`);