When you want your charts to be clear and engaging, tooltips and legends play a crucial role. In Chart.js, both tooltips and legends are highly configurable, letting you control what information is displayed and how it looks. Tooltips are the small popups that appear when you hover over a data point, showing details about that specific value. Legends help users understand what each dataset or color in your chart represents.

Chart.js provides many configuration options for tooltips and legends. For tooltips, you can adjust properties like enabled (to show or hide tooltips), backgroundColor, titleFont, bodyFont, callbacks for custom content, and more. Legends can be positioned (position), styled (labels options), or even hidden entirely. These options are set inside the chart's options object, usually under plugins.tooltip and plugins.legend.

To customize tooltip content and appearance, start by editing the options object in your chart configuration. For example, you can change the tooltip background color, font, or even the text shown. The most flexible way to control tooltip content is through the callbacks property, which lets you define functions for customizing the label, title, or footer. Suppose you want your tooltip to show both the dataset label and the value in a specific format. You would write a callback function for the label property inside options.plugins.tooltip.callbacks.

Here is a step-by-step approach:

1. Open your chart configuration and locate the options object;
2. Find or add the plugins.tooltip section;
3. Set properties like backgroundColor, borderColor, or titleFont as desired;
4. Add a callbacks object, and define a custom function for the label property;
5. Inside this function, build and return a string that formats the tooltip content as you want.

For example, to display both the dataset label and value with a dollar sign, you might use:

options: {
  plugins: {
    tooltip: {
      backgroundColor: "#333",
      titleFont: { size: 16 },
      callbacks: {
        label: function(context) {
          return context.dataset.label + ": $" + context.parsed.y;
        }
      }
    }
  }
}

This configuration changes the tooltip background color, increases the title font size, and formats the label to include a dollar sign before the value.

Legends can also be interactive and tailored for your React charts. Chart.js allows you to position the legend at the top, bottom, left, or right of the chart using the position property under options.plugins.legend. You can also customize the legend labels—such as their color, font, or box width—through the labels property. For interactive features, Chart.js legends can be configured so users can click legend items to show or hide datasets. This is enabled by default for most chart types.

When using Chart.js in React, these legend features are implemented by passing the appropriate options as props to your chart component. If you want to further customize legend interactivity, such as creating a custom legend or handling legend clicks in a specific way, you can use Chart.js plugin hooks or manage chart state in your React component. This allows you to build dynamic dashboards where users can control which data is visible directly from the legend, making your charts more interactive and user-friendly.