CODEWITHSUNDEEP
highcharts
batata
batata

Reputation: 21

How to customize a tooltip number in Highcharts?

I need to make a currency conversion in the tooltip so that it shows both R$ (brazilian Real) and US$ (US Dollar). The series are in R$ so I need to make some math in the tooltip formatter to show the US$. But how can I do that? Can anyone help me?

This is the Fidle

This is the code

$(function () {
Highcharts.setOptions({
    lang: {
        decimalPoint: ',',
        thousandsSep: '.'
    }
});
$('#container').highcharts({
    chart: {
        type: 'area'
    },
    title: {
        text: 'Receita líquida consolidada'
    },
    legend: {
        enabled: false
    },
    xAxis: {
        categories: ['2012', '2011', '2010'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Bilhões'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b> R$ {point.y} Bilhões</b> (US$ {point.y} Bilhões)<br/>',
        shared: true
    },
    plotOptions: {
        series: {
            fillOpacity: 1
        },
        area: {
            stacking: 'normal',
            lineColor: '#384044',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#384044',
            }
        }
    },
    series: [{
        name: 'Receita líquida consolidada',
        data: [35.5, 32.5, 19.4],
        color: '#4fc6e0'
    }]
});
});

Upvotes: 2

Views: 3813

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can use tooltip formatter http://api.highcharts.com/highcharts#tooltip.formatter and calculate both values.

Upvotes: 0

SteveP
SteveP

Reputation: 19093

One way to do this is to calculate the US$ values in your data:

series: [{
            name: 'Receita líquida consolidada',
              data: [{y:35.5,us:77.2}, {y:32.5,us:70.7}, {y:19.4,us:42.2}],
            color: '#4fc6e0'
        }]

You can then use it on the tooltip like this:

 pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b> R$ {point.y} Bilhões</b> (US$ {point.us} Bilhões)<br/>',

http://jsfiddle.net/h5JzB/

Upvotes: 1

Related Questions