Doughnut Chart Styling

Hi All,   I have a requirement to develop and style a Doughnut Chart Example shown below. how to get percentage value and arrow to be shown beside the respective sector.   Thanks sarath kumar
1 answers

Hi Sarath,


In your data options you can try the following:

  "textinfo": "label+percent",
  "textposition": "outside",
  "automargin": true


I don’t believe that it will give you the arrow you’d like (it will display something like: Pie charts in JavaScript (

Alternatively, you should look at Annotations that you can add to your layout options. See Plotly’s documentation here: Layout.annotations in JavaScript (