CODEWITHSUNDEEP
javascriptplotly.js
Aayush Dahal
Aayush Dahal

Reputation: 1182

Hide textinfo of piechartjs which are extended outside the piechart - plotly js

I am using Plotly to show a pie chart. My code looks like:

let dataKeyValue = {
    'ADA': 660,
    'Affordable': 49,
    'Balcony': 2546,
    'Bathroom': 157,
    'Ceiling': 337,
    'Closet/Storage': 23,
    'Corner': 577,
    'DOM': 321,
    'Finishes': 1455,
    'Floor Level': 6205,
    'Floor Plan or Layout': 569,
    'Flooring': 242,
    'Kitchen': 4543,
    'Location': 3462,
    'Loft': 12,
    'Renovation': 1438,
    'Rent': 658,
    'Square Feet': 2114,
    'Unclear': 1692,
    'Unit Features': 2544,
    'View/Exposure': 4703,
    'Washer/Dryer': 2037,
    'Windows': 340,
    'private entry': 8
};
let dollarSign = "$";
let pieData = [{
  values:  Object.values(dataKeyValue),
  labels: Object.keys(dataKeyValue),
  type: 'pie',
  textinfo: "label",
  hoverinfo: "label+percent",
  // texttemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}",
  hovertemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}"
        }];

var layout = {
  margin: {"t": 0, "b": 0, "l": 0, "r": 0},
  showlegend: false,
};

Plotly.newPlot('myDiv', pieData, layout);
<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

The pie chart is working fine, but the labels of each slice are showing outside the pie chart. I am trying to get rid of those labels which are not inside the pie chart.

To remove the labels, I have found the options as textinfo: "none", but this is removing the labels completely, which means it is removing labels inside the pie chart as well. However, I want to hide only those which are outside the pie chart.

ScreenShot

I want to hide that section shown on top right corner. Here is a jsfiddle.

Upvotes: 0

Views: 681

Answers (1)

tony19
tony19

Reputation: 138696

One solution is to set the outside text color to transparent:

let pieData = [{
  //...
  outsidetextfont: { color: 'transparent' },
}]

Plotly.newPlot('myDiv', pieData, layout)


let dataKeyValue = {
    'ADA': 660,
    'Affordable': 49,
    'Balcony': 2546,
    'Bathroom': 157,
    'Ceiling': 337,
    'Closet/Storage': 23,
    'Corner': 577,
    'DOM': 321,
    'Finishes': 1455,
    'Floor Level': 6205,
    'Floor Plan or Layout': 569,
    'Flooring': 242,
    'Kitchen': 4543,
    'Location': 3462,
    'Loft': 12,
    'Renovation': 1438,
    'Rent': 658,
    'Square Feet': 2114,
    'Unclear': 1692,
    'Unit Features': 2544,
    'View/Exposure': 4703,
    'Washer/Dryer': 2037,
    'Windows': 340,
    'private entry': 8
};
let dollarSign = "$";
let pieData = [{
  values:  Object.values(dataKeyValue),
  labels: Object.keys(dataKeyValue),
  type: 'pie',
  textinfo: "label",
  outsidetextfont: { color: 'transparent' }, // 👈
  hoverinfo: "label+percent",
  // texttemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}",
  hovertemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}"
        }];

var layout = {
  margin: {"t": 0, "b": 0, "l": 0, "r": 0},
  showlegend: false,
};

Plotly.newPlot('myDiv', pieData, layout);
<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Upvotes: 1

Related Questions