Plotly.js pie chart values format

Question

I'm creating some pie charts with Plotly.js but I can't figure out how to set the value format. If my number is 19.231, I get 19.2. I want 19.2310, with 4 digit precision. My data and layout follow here:

var data = [{
    values: values,
    labels: labels,
    type: 'pie',
    marker: {
        colors: colors
    },
    textfont: {
        family: 'Helvetica, sans-serif',
        size: 48,
        color: '#000'
    }
}];
var layout = {
    height: 1350,
    width: 1500,
    title: title,
    titlefont: {
        family: 'Helvetica, sans-serif',
        size: 58,
        color: '#000'
    },
    legend: {
        x: 1.1,
        y: 0.5,
        size: 40,
        font: {
            family: 'Helvetica, sans-serif',
            size: 48,
            color: '#000'
        }
    }
};

Can you add some of your values to have a minimal, verifiable example? — Maximilian Peters
– Maximilian Peters, Commented Apr 20, 2017 at 13:14
They are generated on the flow depending on the user input. Values are floats, plotly automatically round them to one digit after the comma. — ppablo
– ppablo, Commented Apr 20, 2017 at 13:17
if you try var values = [1, 2, 4.6]; you get 13.2%, 26.3% and 60.5% instead of 13.1579%, 26.3158% and 60.5263% — ppablo
– ppablo, Commented Apr 20, 2017 at 13:27

Maximilian Peters · Accepted Answer · 2017-04-20 14:26:29Z

2

As far as I know you cannot do that directly in Plotly but you could add text values with your desired precision and set textinfo to text.

var values = [Math.random(), Math.random(), Math.random()];
var sum = values.reduce(function(pv, cv) { return pv + cv; }, 0);
var digits = 4;
var rounded_values = [];

for (var i = 0; i < values.length; i += 1) {
	rounded_values.push(Math.round(values[i]/sum * 100 * 10**digits) / 10**digits + '%');
}

var myPlot = document.getElementById('myPlot');
var data = [{
    values: values,
    type: 'pie',
    text: rounded_values,
	textinfo: 'text'
}];
Plotly.plot(myPlot, data);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot"></div>

answered Apr 20, 2017 at 14:26

Maximilian Peters

31.8k12 gold badges95 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ppablo Over a year ago

Thank you, It's exactly what I was watching for.

EZone Lai · Accepted Answer · 2019-08-08 07:22:33Z

2

I saw the document find some rule

about Advanced Hovertemplate it said

      data: [
        {
          type: "scatter",
          mode: "markers",
          x: x,
          y: y,
          text: t,
          marker: { size: s, sizeref: 4000, sizemode: "area" },
          transforms: [{ type: "groupby", groups: c }],
          hovertemplate:
            "<b>%{text}</b><br><br>" +
            "%{yaxis.title.text}: %{y:$,.0f}<br>" +
            "%{xaxis.title.text}: %{x:.0%}<br>" +
            "Number Employed: %{marker.size:,}" +
            "<extra></extra>"
        }
      ],

you can change here %{y:$,.0f} 0f to 4f . like this

hovertemplate: '%{y:$,.4f}',

Polt.ly JS document

answered Aug 8, 2019 at 7:22

EZone Lai

1046 bronze badges

Collectives™ on Stack Overflow

Plotly.js pie chart values format

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related