CODEWITHSUNDEEP
plotly
Developer
Developer

Reputation: 61

How to remove the value label from the piechart slice in plotly.js?

I am using plotly.js for rendering the piechart. I want to show some custom text on the slices of the piechart. I am able to achieve it by using text attribute in data but the problem is that both custom text and percentage value are showing in slices. I want to remove that percentage value from the slice. Is there any way to remove the value label from the piechart slice?

Reference Image

var data = [{
  values: [1,1,0,4],

  labels: ['A', 'B', 'C', 'D' ],
  bgcolorsrc: 
                  ['#FAEBD7','#CDEFD7','#FAcFD7','#FAEBD7'],
  domain: {
    x: [0,1]

  },
  name: 'Overall Status',
  hoverinfo: 'label+percent+name',
  hole: .6,
  type: 'pie'
}];

var layout = {
  showlegend: true,
  visible:"legendonly",
  width:newWidth,
  height:newHeigth,
  paper_bgcolor: 'rgba(0,0,0,0)',
  plot_bgcolor: 'rgba(0,0,0,0)',
  font: {
    "color": "WHITE",
    "size": 13,
    "family": "Calibri",
    "bold": true
    },
  hoverlabel: {
    bgcolor: 'transparent'
  },
  legend :{
  visible:true,
  orientation: 'h',
  x:0,
  y:0,
  tracetoggle: false ,
  font:{
    size:13
    }
  },
  margin: {
    l: 0,
    r: 1,
    t: 15,
    b: 0,
    pad: 0
  },
  interaction: ['toggle', 'isolate', false],
  point: {
    events: {
        legendItemClick: function () {
        return false; // <== returning false will cancel the 
      //default action
      },
  plotly_legendclick: function () {
    return false; // <== returning false will cancel the default 
    //action
      }
      }
      },
  annotations: [
    {
      font: {
        size : 10
      },
      showarrow: false,
      text: ' ',
      x: 0.1,
      y: 0.2
    }
  ]
};

Plotly.newPlot('myDiv', data, layout);

Upvotes: 0

Views: 1634

Answers (1)

Olric
Olric

Reputation: 338

Add textinfo='none' in the layout (I presume since I use Cufflinks but it should be the same, if not try in the data).

You can also use textposition='none'.

Upvotes: 2

Related Questions