javascript - How can I show percentages when hovering over my chart? - Stack Overflow

admin管理员组

文章数量:1356878

SITUATION:

I am looking to add a percentage next to the number tooltip you get when hovering over your chart. How can I achieve that? For example, I would like to add a % sign next to 83.33.

---

ERROR:

ERROR TypeError: Cannot read property '0' of undefined
at i.label (eval at <anonymous> (http://localhost:3000/js/app/bundle.js:1564:1), <anonymous>:37:63)

---

CODE:

// Pie
public pieChartLabels:string[] = [];
public pieChartData:number[] = [];
public pieChartType:string = 'pie';
public pieChartOptions:any = {};

ngOnInit() {
    var result1 = parseFloat(((this.poll.counter1/(this.poll.counter2+this.poll.counter1))*100).toFixed(2));
    var result2 = parseFloat(((this.poll.counter2/(this.poll.counter2+this.poll.counter1))*100).toFixed(2));
    this.pieChartData = [result1, result2];
    this.pieChartLabels = [this.poll.choice1, this.poll.choice2];
    this.pieChartType = 'pie';
    this.pieChartOptions  = {
                            tooltips: {
                                callbacks: {
                                    label: function (tooltipItems, data) {
                                            return data.datasets[tooltipItems.datasetIndex].label + ': ' +
                                                tooltipItems.pieChartLabels[tooltipItems.datasetIndex].replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                                           }
                                    }
                                }

                            }

    // events
public chartClicked(e:any):void {

}

public chartHovered(e:any):void {

}

SITUATION:

I am looking to add a percentage next to the number tooltip you get when hovering over your chart. How can I achieve that? For example, I would like to add a % sign next to 83.33.

---

ERROR:

ERROR TypeError: Cannot read property '0' of undefined
at i.label (eval at <anonymous> (http://localhost:3000/js/app/bundle.js:1564:1), <anonymous>:37:63)

---

CODE:

// Pie
public pieChartLabels:string[] = [];
public pieChartData:number[] = [];
public pieChartType:string = 'pie';
public pieChartOptions:any = {};

ngOnInit() {
    var result1 = parseFloat(((this.poll.counter1/(this.poll.counter2+this.poll.counter1))*100).toFixed(2));
    var result2 = parseFloat(((this.poll.counter2/(this.poll.counter2+this.poll.counter1))*100).toFixed(2));
    this.pieChartData = [result1, result2];
    this.pieChartLabels = [this.poll.choice1, this.poll.choice2];
    this.pieChartType = 'pie';
    this.pieChartOptions  = {
                            tooltips: {
                                callbacks: {
                                    label: function (tooltipItems, data) {
                                            return data.datasets[tooltipItems.datasetIndex].label + ': ' +
                                                tooltipItems.pieChartLabels[tooltipItems.datasetIndex].replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                                           }
                                    }
                                }

                            }

    // events
public chartClicked(e:any):void {

}

public chartHovered(e:any):void {

}

• javascript
• angular
• chart.js
• ng2-charts

Share Improve this question Follow edited May 23, 2017 at 11:57 Coder1000 asked May 22, 2017 at 20:00 Coder1000Coder1000 4,5011010 gold badges3737 silver badges8787 bronze badges 2

• @jonrsharpe Regardless, why do you consider the question to be too broad ? It's very specific: "How can I add a percentage sign in my tooltip in Chart.js ?" – Coder1000 Commented May 22, 2017 at 20:12
• Why the downvote ? Please explain. I am willing to edit my question if necessary. – Coder1000 Commented May 23, 2017 at 11:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can use tooltips callback in chart.js to change the tooltip suffix. Here is an example on how to add %. I hacked this together by doing some searches and finding other examples.

https://jsfiddle/nt50dzb7/

  options: {
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        label: function(tooltipItem, data) {
          var allData = data.datasets[tooltipItem.datasetIndex].data;
          var tooltipLabel = data.labels[tooltipItem.index];
          var tooltipData = allData[tooltipItem.index];
          return tooltipLabel + ": " + tooltipData + "%";
        }
      }
    }
  }
}

本文标签： javascriptHow can I show percentages when hovering over my chartStack Overflow