How to manipulate data in react-chartjs-2

Question

I want to display data on y axis with specific currency sign in the highlighted area like in tooltip. I have customize the tooltip but the dynamic data provided to graph is not controlled by me.

Here is the code I have tried

<Line
ref="chart"
data={ {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
     label: "",
     fill: false,
     lineTension: 0,
     backgroundColor: "rgba(75,192,192,0.4)",
     borderColor: "#71C898",
     borderCapStyle: "butt",
     borderDash: [],
     borderDashOffset: 0.0,
     borderJoinStyle: "miter",
     pointBorderColor: "#71C898",
     pointBackgroundColor: "#2D9A5E",
     pointBorderWidth: 1,
     pointHoverRadius: 5,
     pointHoverBackgroundColor: "#71C898",
     pointHoverBorderColor: "rgba(220,220,220,1)",
     pointHoverBorderWidth: 2,
     pointRadius: 5,
     pointHitRadius: 10,
     data: this.props.data.length > 0 ? this.props.data : [],
}],
}} 
height={ 200 } 
options={ {
    tooltips: {
       callbacks: {
           label: (tooltipItems, data) => {
               return `${currencyFormatter(tooltipItems.value)}`
           }
       }
    }
}}
/>

Could you share the code with what you have tried? – yudhiesh Nov 05 '20 at 12:20 — yudhiesh, Nov 05 '20 at 12:20

score 1 · Accepted Answer · answered Nov 05 '20 at 16:09

Y-axis can be formatted in the options => scales => yAxis => ticks. There you can format the label with the same style with the tooltip.

    options={ 
      {
        tooltips: {
          callbacks: {
              label: (tooltipItems, data) => {
                  return `${currencyFormatter(tooltipItems.value)}`
              }
          }
        },
        scales:{
          yAxes:[
            {
              ticks: {
                callback: function(label, index, labels) {
                    return `${currencyFormatter(label)}`
                }
              },
            }
          ]
        }
      }
  }

Thanks its helpful for me. Thanks for your time. – Shoaib Nov 05 '20 at 19:09 — Shoaib, Nov 05 '20 at 19:09

How to manipulate data in react-chartjs-2

1 Answers1