fix: special symbols in dataLabels, title and legend

src/__tests__/pie-series.visual.test.tsx

@@ -3,12 +3,36 @@ import React from 'react';
 import {expect, test} from '@playwright/experimental-ct-react';
 
 import {pieBasicData} from 'src/__stories__/__data__';
+import type {ChartData} from 'src/types';
 
 import {ChartTestStory} from '../../playwright/components/ChartTestStory';
 
-test.describe('Bar-y series', () => {
+test.describe('Pie series', () => {
     test('Basic', async ({mount}) => {
         const component = await mount(<ChartTestStory data={pieBasicData} />);
         await expect(component.locator('svg')).toHaveScreenshot();
     });
+
+    test('With special symbols', async ({mount}) => {
+        const data: ChartData = {
+            series: {
+                data: [
+                    {
+                        type: 'pie',
+                        data: [
+                            {name: 'Tom & Jerry', label: 'Tom & Jerry', value: 10},
+                            {name: 'Tom &amp; Jerry', label: 'Tom &amp; Jerry', value: 10},
+                        ],
+                        dataLabels: {enabled: true},
+                    },
+                ],
+            },
+            legend: {enabled: true},
+            title: {
+                text: 'Title: & | &amp;',
+            },
+        };
+        const component = await mount(<ChartTestStory data={data} />);
+        await expect(component.locator('svg')).toHaveScreenshot();
+    });
 });

src/__tests__/treemap.visual.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {expect, test} from '@playwright/experimental-ct-react';
 
 import {treemapBasicData} from 'src/__stories__/__data__';
+import type {ChartData} from 'src/types';
 
 import {ChartTestStory} from '../../playwright/components/ChartTestStory';
 
@@ -11,4 +12,27 @@ test.describe('Treemap series', () => {
         const component = await mount(<ChartTestStory data={treemapBasicData} />);
         await expect(component.locator('svg')).toHaveScreenshot();
     });
+
+    test('With special symbols', async ({mount}) => {
+        const data: ChartData = {
+            series: {
+                data: [
+                    {
+                        type: 'treemap',
+                        name: '& | &amp;',
+                        data: [
+                            {name: 'Tom & Jerry', value: 1},
+                            {name: 'Tom &amp; Jerry', value: 1},
+                        ],
+                    },
+                ],
+            },
+            legend: {enabled: true},
+            title: {
+                text: 'Title: & | &amp;',
+            },
+        };
+        const component = await mount(<ChartTestStory data={data} />);
+        await expect(component.locator('svg')).toHaveScreenshot();
+    });
 });

src/components/Legend/index.tsx

@@ -266,7 +266,7 @@ export const Legend = (props: Props) => {
                         const mods = {selected: d.visible, unselected: !d.visible};
                         return b('item-text', mods);
                     })
-                    .text(function (d) {
+                    .html(function (d) {
                         return ('name' in d && d.name) as string;
                     })
                     .style('font-size', legend.itemStyle.fontSize);
@@ -369,7 +369,7 @@ export const Legend = (props: Props) => {
                 .attr('font-size', legend.title.style.fontSize ?? null)
                 .attr('fill', legend.title.style.fontColor ?? null)
                 .style('alignment-baseline', 'before-edge')
-                .text(legend.title.text);
+                .html(legend.title.text);
         }
 
         const {left} = getLegendPosition({

src/components/Title/index.tsx

@@ -26,7 +26,7 @@ export const Title = (props: Props) => {
                 ...style,
             }}
         >
-            <tspan>{text}</tspan>
+            <tspan dangerouslySetInnerHTML={{__html: text}}></tspan>
         </text>
     );
 };

src/hooks/useShapes/pie/index.tsx

@@ -99,7 +99,7 @@ export function PieSeriesShapes(args: PreparePieSeriesArgs) {
             .selectAll<SVGTextElement, PieLabelData>('text')
             .data((pieData) => pieData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

src/hooks/useShapes/treemap/index.tsx

@@ -56,7 +56,7 @@ export const TreemapSeriesShape = (props: ShapeProps) => {
             .selectAll<SVGTextElement, typeof labelData>('tspan')
             .data(labelData)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)