D3Plus Tooltip Rounding Values

Question

I have a bar chart with very large values. Right now, the tooltip will say "Value: 142M", but I want it to say the exact amount: 141751760. What config do I need to change to make this happen?

// load your data
var sample_data = [
  {"date": "05 Aug", "name":"events", "value": 141751760},
  {"date": "06 Aug", "name":"events", "value": 137933833},
  {"date": "07 Aug", "name":"events", "value": 132537452},
  {"date": "08 Aug", "name":"events", "value": 120686130},
  {"date": "09 Aug", "name":"events", "value": 228518696},
  {"date": "10 Aug", "name":"events", "value": 133506681},
  {"date": "11 Aug", "name":"events", "value": 132956555},
  {"date": "12 Aug", "name":"events", "value": 129211690},
  {"date": "13 Aug", "name":"events", "value": 134858225},
  {"date": "14 Aug", "name":"events", "value": 116100660}
]
var attributes = [
  {"name": "events", "hex": "#178acc"}
]

// instantiate d3plus
var visualization = d3plus.viz()
  .container("#viz")  // container DIV to hold the visualization  
  .data(sample_data)  // data to use with the visualization 
  .type("bar")       // visualization type
  .id("name")         // key for which our data is unique on
  .y("value")         // key to use for y-axis
  .x("date")          // key to use for x-axis 
  .attrs(attributes) 
  .color("hex")
  .tooltip(["date", "value"])
  .draw()             // finally, draw the visualization!

score 2 · Answer 1 · edited May 23 '17 at 12:22

You don't show any code so I can't give you a working sample. But you can add format to format it the way you want:

.format({
  "number": function(number, params) {
    return number; // No formatting
  }
})

You can chain it with the rest of your bar chart.

EDIT:

Format function from here

function customFormat(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}
var visualization = d3plus.viz()
  .container("#viz")  // container DIV to hold the visualization  
  .data(sample_data)  // data to use with the visualization 
  .type("bar")       // visualization type
  .id("name")         // key for which our data is unique on
  .format({
      "number": function(number, params) {
          return customFormat(number);
      }
  })
  .y("value")         // key to use for y-axis
  .x("date")          // key to use for x-axis 
  .attrs(attributes) 
  .color("hex")
  .tooltip(["date", "value"])
  .draw();

I added the code to the original question- could you help me with how to format a traditional comma separated number rather than a "142M" format? — E. Shock, Aug 19 '16 at 16:14

D3Plus Tooltip Rounding Values

1 Answers1