How to change value in tooltip charJS

Question

Im using LightningWebCharts here is the documentation link https://salesforcelabs.github.io/LightningWebChartJS/

I want add 'k' in tooltip value. Tooltip documentation https://salesforcelabs.github.io/LightningWebChartJS/docs/api/attributes/tooltip.html

<c-chart type="bar" responsive="true">
     <c-dataset labels='["Item 1","Item 2","Item 3","Item 4", "Item 5","Item 6","Item 7"]'>
      <c-data label="Neutral" detail='[10,20,30,40]' backgroundcolor='rgba(50, 150, 237, 1)' stack="1" ></c-data>
      <c-data label="Warning" detail='[10,20,30","40"]' backgroundcolor='rgba(119, 185, 242, 1)' stack="1"></c-data>
      <c-data label="Error" detail='["10","20","30","40"]' backgroundcolor='rgba(157, 83, 242, 1)' stack="1"></c-data>
     </c-dataset>
     <c-cartesian-axis axis="x" stacked="true" >
     </c-cartesian-axis>
     <c-cartesian-axis axis="y" stacked="true"></c-cartesian-axis>
    <c-tooltip enabled="true" filter={myCustomTooltipFunction}></c-tooltip>
    </c-chart>

 myCustomTooltipFunction(tooltipItems){
        console.log('called',JSON.stringify(tooltipItems))
        console.log(tooltipItems.value+'k')
        return (tooltipItems.value+'k')
        
    }

Is it possible to add 'k' in tooltip value? when i console its showing value with 'k'. But its not showing in tooltip. Shall i need to return callback object? But im not sure how to do.

enter image description here

Why are you using myCustomTooltipFunction as filter? If you want to dynamically change the label, you have to set callbackLabel, not filter. — kikon
– kikon, Commented Oct 29, 2024 at 3:53
Hi @kikon, Thanks for your response, Can you give one example it will be a great help. do i need to return callbacks:{} into callbackLabel? or how it will work? — Afrose ahamed
– Afrose ahamed, Commented Oct 29, 2024 at 4:04
Hi @kikon, Thank you so much, As you suggest callbackLabel im getting the expected result. How can i mark it as best answer its not showing me to mark? — Afrose ahamed
– Afrose ahamed, Commented Oct 29, 2024 at 4:19

kikon · Accepted Answer · 2024-10-29 04:27:51Z

0

In the code you posted, you have

<c-tooltip enabled="true" filter={myCustomTooltipFunction}></c-tooltip>

but the documentation says that filter is used to select only some of items of the tooltip, while the function that should be used to change the label is labelCallback, so it should be:

<c-tooltip enabled="true" labelCallback={myCustomTooltipFunction}></c-tooltip>

The documentation also includes an example of that function being used, see this link.

answered Oct 29, 2024 at 4:27

kikon

9,9653 gold badges11 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change value in tooltip charJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related