6

I want to display the value of the numberValue as a label on hover on the bar chart. I have tried many ways of doing this, but nothing appears on hover on the bar. Here is the code:

getBarChart() {
    this.http.get(API).subscribe({
      next: (data) => {
        this.totalAmount= data;
        let splitted = this.totalAmount.toString().split(",");
        let numberValue= splitted[0];
        let totalAmountPerMonth = splitted[1];
        let month = splitted[2];

        this.barChart.data.labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        let dataValues = new Array(12).fill(null);
        let monthIndex = parseInt(month) - 1;
        dataValues[monthIndex] = totalAmountPerMonth;

        this.barChart.data.datasets = [
          {
            label: "Total Amount",
            data: dataValues,
            backgroundColor: DARK_BLUE
          }
        ];
        this.barChart.update();
      },
      error: (err) => {
        console.log(err);
      }
    });

    Chart.register(BarController);
    Chart.register(CategoryScale);
    Chart.register(LinearScale);
    Chart.register(BarElement);

    this.barChart = new Chart("barChart", {
      type: 'bar',
      data: {
        labels: [],
        datasets: []
      },
      options: {
        aspectRatio: 2.5,
        scales: {
          x: {
            title: {
              display: true,
              text: "Month"
            }
          },
          y: {
            title: {
              display: true,
              text: "Total Amount"
            }
          }
        },
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            callbacks: {
              label: (context) => {
                const value = context.dataset.data[context.dataIndex];
                const numberValue = value !== null ? value : 'N/A';
                return `Number: ${numberValue}`;
              }
            }
          }
        },
      }
    });
  }

1 Answer 1

2

You need to import and register the Tooltip for it to appear

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

3 Comments

Do I need to register some library in the app.module.ts file or something? What do you mean by import and register?
The same thing you did with the BarController etc
Sorry for the late response, it works now, thank you!!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.