How to set the legend of a pie chart right

1
Hello everyone, I’m facing an issue with the pie-chart legend. It overlaps at the border (see 130) and I haven’t had any success with the width settings and with plotly. The only way to have it displayes properly is to manually refresh the page. Does anyone know how to fix this issue?  
asked
3 answers
0

Yes, you should use the widget layout options to configure this. Within the layout options you can define all plotly layout properties. In addition to Lukas' answer:

To set the legend position, use the 'orientation' property. Possible values are h (horizontal) and v (vertical) 

To set margins in case of overlap, use 'x' and 'y' and 'xanchor' properties to fine-tune the position. F.e. to set the legend horizontally right, use 'xanchor' : 'right' and 'orientation' : 'h'. 

Make sure all properties and values are double quoted. 

See an example below:

{
    "showlegend": true,
    "legend": {
      "orientation": "h",
      "xanchor": "right"
    }
  }
}

 

 

answered
-1

I once fixed a similar issue in line chart by adding custom CSS targeting the elements inside the chart. 


Use browser’s inspect element tool to see which HTML element is displaying the legend and what are its style properties, try adjusting some CSS live inside the the inspect element tool. If you can adjust it there, then add those CSS rules in a custom class and apply that class to the chart

I’m not sure if plotly provides such adjustment in its configurations. Maybe someone else would answer here if there is any

When using inspect tool, turn off chart refresh time or any microflow timers on the page otherwise page elements keep getting refreshed and you can’t work on applying CSS changes to elements

answered
-1

Hi,

Check out the chart demo https://charts102-sandbox.mxapps.io/p/PieChartDevMode 

 

I played around with some layout settings there:

{
  "legend": {
    "x": 0.9,
    "xanchor": "auto"
  }
}

 

This you can paste into the Advanced tab for the pie chart widget. You can enable this Development view by changing from Mode ‘Basic’ to mode ‘Developer’.

 

How to know what can be edited? → https://plotly.com/javascript/reference/layout/#layout-showlegend

 

 

 

answered