Customizing Tooltips in Chart.js 2.0 Doughnut Charts: Adding Percentage Display

Introduction

In data visualization, Chart.js 2.0 is a widely used JavaScript library that offers a variety of chart types and flexible configuration options. Doughnut charts are commonly used to display proportional data, but default tooltips may not meet all requirements, such as showing percentage information. Based on a practical case, this article discusses how to enhance doughnut chart data presentation through custom tooltips.

Basic Tooltip Configuration

Tooltips in Chart.js 2.0 can be configured via the options.tooltips object. This object contains multiple properties to control the appearance and behavior of tooltips. For example, backgroundColor sets the background color, while titleFontSize and bodyFontColor adjust font styles for titles and body text, respectively. Here is a basic configuration example:

options: {
  tooltips: {
    backgroundColor: '#FFF',
    titleFontSize: 16,
    titleFontColor: '#0066ff',
    bodyFontColor: '#000',
    bodyFontSize: 14,
    displayColors: false
  }
}

By adjusting these properties, developers can easily modify the visual style of tooltips to align with the overall design of their application.

Customizing Content with Callback Functions

To add dynamic content like percentages to tooltips, Chart.js 2.0 provides callback functions. These functions allow developers to insert custom logic during tooltip generation. Key callback functions include title, label, and afterLabel, which correspond to different parts of the tooltip.

• title function: Sets the tooltip title, typically displaying data labels.
• label function: Sets the main content of the tooltip, usually showing data values.
• afterLabel function: Adds extra information after the label, such as percentages.

In doughnut charts, percentages can be calculated by determining the ratio of individual data points to the total data. Chart.js 2.0 internally maintains a _meta object that contains total chart data information, which can be used for percentage calculations. The following code demonstrates how to implement this functionality:

callbacks: {
  title: function(tooltipItem, data) {
    return data.labels[tooltipItem[0].index];
  },
  label: function(tooltipItem, data) {
    return data.datasets[0].data[tooltipItem.index];
  },
  afterLabel: function(tooltipItem, data) {
    const dataset = data.datasets[0];
    const total = dataset._meta[0].total;
    const value = dataset.data[tooltipItem.index];
    const percent = Math.round((value / total) * 100);
    return `(${percent}%)`;
  }
}

In this example, the afterLabel function calculates the percentage for each data point and returns it as a formatted string. This ensures that tooltips display both raw values and proportional information, improving data readability.

Complete Implementation Example

Combining basic configuration and callback functions, here is a full implementation of custom tooltips for a doughnut chart. Assume the data comes from an array named cashAnalysisBalances, containing currency names and available cash information:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances.map(curName => curName.currency);
    const availableCash = cashAnalysisBalances.map(avCash => avCash.availableCash);

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: ['#129CFF', '#0C6DB3', '#FF6384', '#00FFFF'],
        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#00FFFF']
      }]
    };

    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'doughnut',
      data: currenciesData,
      options: {
        tooltips: {
          callbacks: {
            title: function(tooltipItem, data) {
              return data.labels[tooltipItem[0].index];
            },
            label: function(tooltipItem, data) {
              return data.datasets[0].data[tooltipItem.index];
            },
            afterLabel: function(tooltipItem, data) {
              const dataset = data.datasets[0];
              const total = dataset._meta[0].total;
              const value = dataset.data[tooltipItem.index];
              const percent = Math.round((value / total) * 100);
              return `(${percent}%)`;
            }
          },
          backgroundColor: '#FFF',
          titleFontSize: 16,
          titleFontColor: '#0066ff',
          bodyFontColor: '#000',
          bodyFontSize: 14,
          displayColors: false
        }
      }
    });
  }
};

This code first processes the input data, then creates a doughnut chart instance and configures tooltips to display currency names, available cash values, and percentages. In this way, developers can easily extend chart functionality to meet specific business needs.

Conclusion

Customizing tooltips in Chart.js 2.0 doughnut charts is a powerful feature that allows developers to enhance data presentation through configuration options and callback functions. This article detailed how to add percentage display and provided complete code examples. By understanding the internal mechanisms of tooltips, developers can further explore other customization possibilities, such as adding more dynamic content or adjusting interactive behaviors. In practical applications, it is recommended to refer to the official Chart.js documentation for the latest information and more advanced configuration options.