CODEWITHSUNDEEP
javascriptamcharts
Buffalo
Buffalo

Reputation: 4042

Amcharts - how to format valueField inside custom tooltip?

I've got a basic AmGraph: 

    graph = new AmCharts.AmGraph();

    graph.lineThickness = 4;
    graph.valueAxis = valueAxis;
    graph.fillAlphas = 0;
    graph.valueAxis = valueAxis;
    graph.valueAxis.minimum = 0;

    graph.title = "likes";
    graph.labelText = " ";
    graph.valueField = "likes_1";

The problem is that the numberFormatter doesn't format values if I'm using a custom balloonText function: 

    graph.numberFormatter = {precision: -1, decimalSeparator:",", thousandsSeparator:","};

So if I use this: 

    graph.balloonText = "<b>got: [[likes_1]] </b>";

The tooltip looks like this: 

   "got: 1000"

How can I format the value? if I try to use javascript for formatting it (Numeral.js):

    graph.balloonText = "<script>numeral( [[likes_1]] ).format("0,0") </script>";

The wildcard isn't replaced with the actual value when building the page (but rather when hovering the chart?), so I just get: 

    Uncaught ReferenceError: likes_32 is not defined

What should I do?

Upvotes: 0

Views: 2889

Answers (1)

gerric
gerric

Reputation: 2297

(First I highly recommend to use the newer way of chart initialization! Look here for that.)

Instead of balloonText you can use balloonFunction, which allows you to change the text with JavaScript. Inside there you can format the number according to your wishes.
I prepared a demo using the AmCharts.formatNumber formatter.

return AmCharts.formatNumber(graphDataItem.values.value, {
        precision: -1,
        decimalSeparator: '.',
        thousandsSeparator: ','
    }, -1);

You can still use Numeral.js in there though (it's syntax seems a little more straight forward to me).

return numeral(graphDataItem.values.value).format("0,0");

Upvotes: 2

Related Questions