Plotly JS: Locale number format using valueformat

user_9838670 0
Viewed 644

I have a gauge+number+delta chart in plotly.js.

var data = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 1550,
    title: { text: "Speed" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 250, valueformat: ',.' + 2 + "f", },
    gauge: { axis: { range: [null, 500] } },
    number: { valueformat: ',.' + 2 + "f",}
  }
];

It should be possible to format all numbers of the chart. I need:

  • Number of decimals
  • Decimal separator
  • Thousands separator

As far as I know, the only way to do this in plotly is to use the valueformat. Unfortunately I can not find any documentation or guide regarding this property.

So, it is pretty simple to format the number of decimals:

var numberOfDecimals = 2;
valueformat: '.' + numberOfDecimals  + "f" // 6789.12345 ---> 6789.12

This works also pretty fine when I add a thousand seperator ,:

var numberOfDecimals = 2;
valueformat: ',.' + numberOfDecimals  + 'f' // 6789.12345 ---> 6789.12345

But my main issue is that I can not swap the decimal and thousand separator. For instance, to get a german number format.

So swapping the , and . does nothing.

var numberOfDecimals = 2;
valueformat: '.,' + numberOfDecimals  + "f" // 6789.12345 ---> 6,789.12

Can anyone explain how I can archieve a dynamic formatting of my numbers in Plotly, using decimal separator, thousand separator and number of decimals?

Codepen example: https://codepen.io/michaelkonstreu/pen/yLJVXdb

plotly
1 Answers
var layout = { width: 600, height: 400,     separators : ',.', };

And it's working in your code.

user_125383370
Related