How to Create Custom Data Formatting to Display on Tooltip in ChartJS ?

March 11, 2024, 4:53 a.m.

We know that custom data formatting in Chart.js tooltips allows for the visualization of data. So, create custom formatting to display on tooltips in chart.js. You can use the tooltip object within the chart options.

Introduction:

Table of Content
Using a Custom Tooltip Callback Function
Using a Plugin
Div : table_of_content

Using a Custom Tooltip Callback Function

Using the custom tooltip callback function provides developers with the clarity and flexibility to create highly tailored and interactive data visualizations that meet the unique needs of their applications. This code demonstrates to your charts, including data values on basic charts using, HTML and JavaScript with the chart.js library.

Syntax:

options: {
 tooltips: {
    callbacks: [{
      ticks: {
      label: function(tooltipItem, data) {
          // Insert formatting code here
        }
      }
    }]
  }
}

Example: The below code Use a Custom Tooltip Callback Function to custom data formatting to display on tooltip.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Custom Tooltip Formatting</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>
<style>
    div {
        height: 500px;
        width: 500px;
    }
</style>

<body>
    <h1>Geeksforgeeks | </h1>
    <small>
        <i>
            Create custom data formatting to 
            display on tooltip
        </i>
    </small>

    <div> <canvas id="myChart"></canvas></div>

    <script>
        const ctx = 
            document.getElementById('myChart').
            getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: 
                    ['C++', 'HTML', 'Python', 
                    'Java', 'Thanks'],
                datasets: [{
                    label: 'Data',
                    data: [12, 19, 3, 5, 2],
                    backgroundColor: 
                        'rgba(255, 99, 132, 0.2)',
                    borderColor: 
                        'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            const value = 
                                data.datasets[tooltipItem.datasetIndex].
                                data[tooltipItem.index];
                            return 'Value: ' + value;
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

Using a Plugin

We know that plugins offer a powerful mechanism for extending and enhancing the functionality of software applications, enabling greater flexibility and scalability while fostering collaboration and innovation within the developer community.

Syntax:

Chart.plugins.register({
      afterInit: function(chart) {
        chart.tooltip._model.bodyFormatter = function(body, data) {
          return body.map(function(bodyItem) {
            return 'Value: ' + bodyItem.lines[0];
          });
        };
      }
    });

Example: The below code use a Plugin to custom data formatting to display on tooltip.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Custom Tooltip Formatting</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>

<body>
    <h1>
        Geeksforgeeks | create custom data 
        formatting to display on tooltip
    </h1>
    <canvas id="myChart"></canvas>

    <script>
        Chart.plugins.register({
            afterInit: function (chart) {
                chart.tooltip._model.bodyFormatter = 
                function (body, data) {
                    return body.map(function (bodyItem) {
                        return 'Value: ' + bodyItem.lines[0];
                    });
                };
            }
        });

        const ctx = 
            document.getElementById('myChart').
            getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: 
                    ['C++', 'HTML', 'Python', 
                    'Java', 'Thanks'],
                datasets: [{
                    label: 'Data',
                    data: [12, 19, 3, 5, 2],
                    backgroundColor: 
                        'rgba(255, 99, 132, 0.2)',
                    borderColor: 
                        'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {}
        });
    </script>
</body>

</html>

Thanks read this article......

1 Like

How to Format the Labels of the Y Axis in a Chart ?

arrow_back

arrow_forward

Password Manager In Python

Get 2Lakh Prize Money

If you solve Easyalgo DSA sheet then you can get a chance to get a prize of Rs. 2 lakhs, you have to solve only 350 questions.!

Solve DSA Sheet

If you solve Easyalgo DSA sheet then you can get a chance to get a prize of Rs. 2 lakhs, you have to solve only 350 questions.!

Comments

No comments yet...

Add Comment

Footer Design