React-ChartJS-2 中散点的自定义 label 标题

Question

I try to make a scatter plot using React-ChartJS-2. The basic setting gives only the values of the x-value and the y-value of the point in the plot. Is there any way to show the label for the point in the plot?

I lookup around and found the code seemed to work, but it did not.

const optionsScatterPlot = {
  plugins: {
    tooltip: {
      callbacks: {
        title: function (tooltipItem:any, data:any) {
          const dataLabel = dataScatterPlot.labels[tooltipItem.index];
          return dataLabel;
        }
      }
    },
  },
};
const Scatter = () => {
  return (
    <div>
      <Box maxWidth="lg" margin="auto" >
        AdEfficiency
      </Box>
      <Scatter options={optionsScatterPlot} data={dataScatterPlot} />
    </div>
  )
}

Answer 1

Add label title to either of the axes like so:

const options = {
  scales: {
    y: {
      beginAtZero: true,
      title: {
        display: true,
        text: 'label for Y'
      }
    },
    x: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'label for X'
        }
      },
  },
};

the text property is the text label to be displayed on the axes. 'options' variable is what you pass to the options prop.