can't use Template literals (Template strings) when custom tooltip

[hoangminhan]

react-native-echarts-pro【1.9.1】 react-native version【0.70.9】 react-native-webview 【13.6.0】 Platform【android and ios】

I'm using template literals with span tag. when i use template literals, chart content doesn't show

formatter:function (params) {
              let content =
                '<strong>' + params[0].name + '</strong>' + '<br />';
              let total = 0;

              params.forEach(function (item) {
                const seriesValue = item.value;
                const seriesValueTotal = item.seriesName.includes('Belink')
                  ? item.value
                  : 0;
                total += Number(seriesValueTotal);

                content +=
                  `<span style="width:6px;height:6px;color:${item.seriesIndex};display:inline-block"></span>` +
                  item.seriesName +
                  ': ' +
                  seriesValue.toLocaleString('en-US') +
                  '<br />';
              });

              // Display the total at the end of the tooltip
              content +=
                '<strong>Tổng sản lượng: </strong>' +
                total.toLocaleString('en-US');

              return content;
            }

[hoangminhan]

@supervons can you help me?

[supervons]

• Did you use enableParseStringFunction props? enableParseStringFunction
• Please show minimum reproducible demo, like this:

import React from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";

export default function RNEPDemo() {
  const pieOption = {
    series: [
      {
        name: "Source",
        type: "pie",
        legendHoverLink: true,
        hoverAnimation: true,
        avoidLabelOverlap: true,
        startAngle: 180,
        radius: "55%",
        center: ["50%", "35%"],
        data: [
          { value: 105.2, name: "android" },
          { value: 310, name: "iOS" },
          { value: 234, name: "web" },
        ],
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#23273C",
            },
          },
        },
      },
    ],
  };
  return (
          <View style={{ height: 300, paddingTop: 25 }}>
            <RNEChartsPro height={250} option={pieOption} />
          </View>
  );
}

[hoangminhan]

This is my demo

import {Dimensions} from 'react-native';
import RNEChartsPro from 'react-native-echarts-pro';

const data = [
  {
    name: 'Belink 1 (0005)',
    isProduction: true,
    data: [
      1258, 2902, 1944, 2102, 1412, 2484, 1832, 1330, 1036, 894, 2360, 2810,
      3022, 2560, 1946, 62,
    ],
    stack: 'Belink',
    type: 'bar',
  },
  {
    name: 'Belink 2 (0018)',
    isProduction: true,
    data: [
      1328, 3022, 2044, 2138, 1476, 2574, 1892, 1388, 1070, 930, 2440, 2914,
      3036, 2646, 2034, 2424,
    ],
    stack: 'Belink',
    type: 'bar',
  },
];
const colors = ['red', 'green', 'gray'];

const ChartProduction = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      confine: 'true',
      axisPointer: {
        lineStyle: {
          color: '#767373',
        },
      },
      // position: ['30%', '20%'],
      formatter: function (params) {
        'show source';
        let content = '<strong>' + params[0].name + '</strong>' + '<br />';
        let total = 0;
        let indexColor = 0;

        params.forEach(function (item) {
          const seriesValue = item.value;
          const seriesValueTotal = item.seriesName.includes('Belink')
            ? item.value
            : 0;
          total += Number(seriesValueTotal);

          content +=
            `<span style="display:inline-block;background-color:${colors[indexColor]};height:10px;width:10px"></span>` +
            item.seriesName +
            ': ' +
            seriesValue.toLocaleString('en-US') +
            '<br />';

          indexColor += 1;
        });

        // Display the total at the end of the tooltip
        content +=
          '<strong>Total production: </strong>' + total.toLocaleString('en-US');

        return content;
      },
    },

    color: ['red', 'green'],
    legend: {
      top: 'bottom',
      type: 'scroll',
      data: ['Belink 1 (0005)', 'Belink 2 (0018)'],
      inactiveColor: '#9b9b96',
    },

    xAxis: [
      {
        type: 'category',
        data: [
          '15/04',
          '16/04',
          '17/04',
          '18/04',
          '19/04',
          '20/04',
          '21/04',
          '22/04',
          '23/04',
          '24/04',
          '25/04',
          '26/04',
          '27/04',
          '28/04',
          '29/04',
          '30/04',
        ],
      },
    ],

    yAxis: [
      {
        name: `Production (kWh)`,
        nameLocation: 'middle',
        position: 'left',
        nameGap: 50,
        nameTextStyle: {
          fontStyle: 'italic',
          fontSize: 13,
          fontWeight: 'bold',
        },
        type: 'value',
        alignTicks: true,
        min: 0,

        boundaryGap: false,

        splitLine: {
          lineStyle: {
            color: '#999',
          },
        },
        axisLabel: {
          margin: 6,
          formatter: `function (value, index) {
            'show source';
            return Intl.NumberFormat('en', {notation: 'compact'}).format(value);
          }`,
        },
      },
    ],

    series: data,
  };
  return (
    <RNEChartsPro
      webViewSettings={{
        scrollEnabled: false,
      }}
      height={250}
      width={Dimensions.get('window').width}
      option={option}
      enableParseStringFunction={true}
    />
  );
};
export default ChartProduction;