CODEWITHSUNDEEP
plotlyplotly.js
Hoetmaaiers
Hoetmaaiers

Reputation: 3503

Add suffix / entity to pie chart slice

I have a lovely pie rendered with Plotly.js. On hover I show percentages + absolute number. My absolute number should have a suffix which is the entity. I can't seem to add it to the hover state?

In the screenshot is my current hover shown.enter image description here

So next to 343,630.5728 I want my entity to render. Also formatting the thousand and decimal separator would be nice.

Upvotes: 0

Views: 365

Answers (1)

mit
mit

Reputation: 1340

You can use customdata + hovertemplate for the tooltip info and layout.separators for the separators.

var data = [{
  values: [1023.4, 500, 600],
  labels: ['Residential', 'Non-Residential', 'Utility'],
  customdata: ['A', 'B', 'C'],
  hovertemplate: '%{label}<br>%{value} %{customdata}<br>%{percent}<extra></extra>',
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500,
  separators: ',.'
};

Plotly.newPlot('chart', data, layout);
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.51.1/plotly.min.js"></script>
<div id="chart"></div>

Upvotes: 1

Related Questions