chartschart.jssalesforcebar-chartlwc

How to change value in tooltip charJS


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


Solution

  • 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.