CODEWITHSUNDEEP
javascriptangularhighcharts
blackdaemon
blackdaemon

Reputation: 755

Display percentage on tooltip highchart Angular 2

Hi I have the following highchart configuration for a normal column chart with percentage values.

private _attendanceInputData: any = {

        chart: { type: 'column' },
        title : { text : 'Daily Attendance Overview' },  

        xAxis: {
            categories: this._weekValues
        },
        yAxis: {
            allowDecimals: false,
            title: { text: ''},
            min: 0,
            max: 100,
            labels: {
                formatter:function() {
                    console.log(this.value); //0, 25, 50 , 75 , 100
                    var pcnt = (this.value / 100) * 100;
                    return pcnt + '%';
                }
            }
        },
        credits: {
          enabled: false
        },
        series: [
            {
                name: 'Students',
                data: this._studentAttendance,
                color: '#3366cc'
            },{
                name: 'Staff',
                data: this._staffAttendance,
                color: '#accbfc',
            }
        ]
    };

But the tooltip now showing the value but not displaying "%" after the value. How to do that? Sorry am new to highcharts. Thanks in advance guys.

Upvotes: 2

Views: 2985

Answers (2)

Vishnu R
Vishnu R

Reputation: 1

You can use tool tip formatter function to display % on the chart tool tip. It is a callback function to format the text of the tooltip from scratch. Return false to disable tooltip for a specific point on series.

A subset of HTML is supported. Unless useHTML is true, the HTML of the tooltip is parsed and converted to SVG, therefore this isn't a complete HTML renderer. The following tags are supported:

 <b> , <strong>, <i>, <em>, <br/>, <span>.

You can refer the following sample code :

chart = new Chart({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Linechart'
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return this.y + '%';
        }
    },
    series: [{
        name: 'Line 1',
        data: [1, 2, 3]
    }]
});

Upvotes: 0

Martin Schneider
Martin Schneider

Reputation: 3268

You need to tell Highcharts the format of the Tooltip. To do this, there is the tooltip section in the highcharts object. To render a '%' after each Value you can use the following snippet:

[...]
credits: {
  enabled: false
},
tooltip: {
  valueSuffix: '%'
},
series: [{
[...]

See http://api.highcharts.com/highcharts/tooltip for reference

Upvotes: 5

Related Questions