Apache Echarts, how to customize the tooltip in Scatter 3D?

Question

I am working on an Angular14 project that utilizes the Scatter3D plot feature of the Apache Echarts library. However, I am experiencing difficulty in customizing the tooltip information.

And this is the code snippet for the feature.

const options = {
  grid3D: {},
  tooltip: {},
  xAxis3D: {
    name: 'Total(USD)',
    nameTextStyle: {
      fontSize: 10
    },
    type: 'value',
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  yAxis3D: {
    name: 'Payout',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  zAxis3D: {
    name: 'Ratio(%)',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => formatPercent(value / 100, 'en-US', '1.2-2'),
      fontSize: 10
    }
  },
  series: [
    {
      name: 'Analytics',
      type: 'scatter3d',
      symbolSize: 2,
      data: plotdata,
      dimensions: ['Total', 'Payout', 'Ratio']
    }
  ]
};

The shortenNumber is the function to get the abbreviated format from a long number.

Answer 1

I researched for a while and found a solution. Using series/tooltip/formatter can help to customize the tooltip information.

const options = {
  grid3D: {},
  tooltip: {},
  xAxis3D: {
    name: 'Total(USD)',
    nameTextStyle: {
      fontSize: 10
    },
    type: 'value',
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  yAxis3D: {
    name: 'Payout',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  zAxis3D: {
    name: 'Ratio(%)',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => formatPercent(value / 100, 'en-US', '1.2-2'),
      fontSize: 10
    }
  },
  series: [
    {
      name: 'Analytics',
      type: 'scatter3d',
      symbolSize: 2,
      data: plotdata,
      dimensions: ['Total', 'Payout', 'Ratio'],
      tooltip: {
        formatter: (param: any) => {
          return [
            'Total: $' + shortenNumber(param.data[0]) + '<br/>',
            'Payout: $' + shortenNumber(param.data[1]) + '<br/>',
            'Ratio: ' + param.data[2] + '%<br/>'
          ].join('');
        }
      }
    }
  ]
};