HighCharts With BRL Currency

Format values in tooltip of charts of highcharts.

by Gabriel Correa

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<table id="datatable">
	<thead>
		<tr>
			<th></th>
			<th>Unidades</th>
			<th>Valor R$</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Material 1</th>
			<td>1000000</td>
			<td>98</td>
		</tr>
	</tbody>
</table>

JavaScript

$(function() {
  Highcharts.setOptions({
    global: {
      useUTC: false,
    },
    lang: {
      decimalPoint: '.',
      thousandsSep: '.'
    }
  });

  $('#container').highcharts({
    data: {
      table: document.getElementById('datatable')
    },
    chart: {
      type: 'column'
    },
    title: {
      text: 'Grafico de acompanhamento'
    },
    yAxis: {
      allowDecimals: true,
      title: {
        text: 'Units'
      },
      labels: {
        format: '{value:.,0f} R$'
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          'R$ ' + this.y.toFixed(0).replace('.', ',').replace(/\d{3}(?=(\d{3})*,)/g, function(s) {
            return '.' + s
          });

      }
    }
  });
});