[React] Chart.js Tooltip Callbacks

 

 

Tooltip Callbacks

Name	Arguments	Return Type	Dataset override	Description
beforeTitle	TooltipItem[]	string | string[] | undefined		Returns the text to render before the title.
title	TooltipItem[]	string | string[] | undefined		Returns text to render as the title of the tooltip.
afterTitle	TooltipItem[]	string | string[] | undefined		Returns text to render after the title.
beforeBody	TooltipItem[]	string | string[] | undefined		Returns text to render before the body section.
beforeLabel	TooltipItem	string | string[] | undefined	Yes	Returns text to render before an individual label. This will be called for each item in the tooltip.
label	TooltipItem	string | string[] | undefined	Yes	Returns text to render for an individual item in the tooltip. more...
labelColor	TooltipItem	object | undefined	Yes	Returns the colors to render for the tooltip item. more...
labelTextColor	TooltipItem	Color | undefined	Yes	Returns the colors for the text of the label for the tooltip item.
labelPointStyle	TooltipItem	object | undefined	Yes	Returns the point style to use instead of color boxes if usePointStyle is true (object with values pointStyle and rotation). Default implementation uses the point style from the dataset points. more...
afterLabel	TooltipItem	string | string[] | undefined	Yes	Returns text to render after an individual label.
afterBody	TooltipItem[]	string | string[] | undefined		Returns text to render after the body section.
beforeFooter	TooltipItem[]	string | string[] | undefined		Returns text to render before the footer section.
footer	TooltipItem[]	string | string[] | undefined		Returns text to render as the footer of the tooltip.
afterFooter	TooltipItem[]	string | string[] | undefined		Text to render after the footer section.

 

 

작성 예시

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.dataset.label || '';

                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                        }
                        return label;
                    }
                }
            }
        }
    }
});

 

 

 

 

참고 사이트

https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks