Search code examples
javascriptchart.jsreact-chartjschart.js3

How to log the callbacks (object) for Chart.js tooltips? (v3.0)


I'm trying to make custom tooltips for Chart.js (v3.0), however, when I console.log the context of the function it says:

TypeError: Converting circular structure to JSON

Is there a way to log this, so I can see the available data??

Code Example:

            plugins: {
                legend: {
                    display: false
                },
                maintainAspectRatio: false,
                responsive: true,
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = new Intl.NumberFormat('en-US', {style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 0}).format(context.parsed.y);
                            return label;
                        },
                        title: function(context) {
                            console.log("the context: "+JSON.stringify(context))
                            let title = context[0].label;
                            return title;
                        }
                    },
                    displayColors: false
                }
            }

Any help is appreciated.


Solution

  • Instead of stringifying the context just pass the variable and print that in the console, this way it's way more usable since it contains a lot of info so you can click through it without it being a big mess.

    If you really want to print it as a string you can look at this answer: How can I print a circular structure in a JSON-like format?