title: R plotly polar chart simple customizing
body: <p>Hi R and plotly experts,</p>
  
  <p>I am trying my hands on <code>plotly</code> lately.</p>
  
  <p><strong>Here is my simple minimal design code</strong>:</p>
  
  <pre><code>library(plotly)
  
  df &lt;- data.frame(
    r = c(0,1,2,2,1.5,3, 1, 2, 3, 4, 5, 6),
    theta = c(0,45,90,315, 180, 270, 10, 40, 70, 100, 130, 160),
    group = c('R', 'B', 'G', 'R', 'G', 'B', 'R', 'B', 'G', 'R', 'G', 'B'),
    size = c(1, 2, 3, 10, 20, 9, 2, 4, 6, 8, 10, 12)
  )
  
  colors_map &lt;- c("blue", "green", "red") 
  
  p &lt;- plot_ly(
    df,
    type = 'scatterpolar',
    r = ~r,
    theta = ~theta,
    color = ~group, 
    colors = colors_map, #Provide a color mapped vector
    size = ~size, 
    sizes = c(100,200), #Provide a range of size.
    text = ~paste('&lt;b&gt;DETAILS &lt;/b&gt;&lt;br&gt;---------------&lt;br&gt;Radius:', r, '&lt;br&gt;Theta:', theta, '&lt;br&gt;Group:', group, '&lt;br&gt;Size:', size), 
    mode = 'markers',
    hoverinfo="text",
    marker = list(symbol = 'circle', line = list(width = 2, color = 'lightgrey'))
  )%&gt;%
    layout(title = 'SAMPLE TITLE',
           showlegend = TRUE,
      polar = list(
        #hole = 0.5,
        radialaxis = list(
          tickfont = list(
            size = 20,
            color = "blue"
          ),
          visible = TRUE,
          tickcolor = toRGB("red"),
          ticks = "outside",
          #ticklen = 15,
          #tickwidth = 20,
  
          range = c(0, max(df$r)),
          rangemode = "tozero",
          angle = 90,
          tickangle = 90,
          #gridcolor = '#FFF', #color of grid lines
          categoryorder = "array",
          categoryarray = c("GroupA", "GroupB", "GroupC", "GroupD") #Not working
        ),
        angularaxis = list(
          tickfont = list(
            size = 12
          ),
          rotation = 90,
          direction = 'clockwise' ,
          categoryarray = c("A", "B", "C", "D") #Not working
        )
      )
    )
  ggplotly(p)
  </code></pre>
  
  <p><strong>The chart ploted is:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/loeuk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/loeuk.png" alt="enter image description here"></a></p>
  
  <p>I have tried something based on documentaion but couldn't achieve.
  Here are the items I failed to render[Few of them are solved and posted in answer]:</p>
  
  <ol>
  <li><p><strong>[SOLVED] Show color of points based on which group it belongs</strong>. If it belongs to <code>R</code> group, then color should be red, if <code>B</code> then blue and if <code>G</code> then green.</p></li>
  <li><p><strong>[SOLVED] Size of points</strong> shown in polar chart is quite small, is there a way I can enlarge it or give a range of size ?</p></li>
  <li><p><strong>[SOLVED]</strong> In middle of each point, I want to <strong>show a text/number</strong>, let's say I want to show <code>size</code> <strong>value on the center of each point</strong>. How I can do this ?</p></li>
  <li><p><strong>remove the angle based angular axis labels</strong> and want to put my <strong>custom label</strong> as <code>A</code>, <code>B</code>, <code>C</code>, <code>D</code> at 45deg, 135deg, 225deg and 315deg respectively.</p></li>
  <li><p><strong>[SOLVED]</strong> <strong>show radial axis label in vertical line outside polar chart</strong>, instead, of how it is present inside the chart. It should be outside the chart in vertical rule form, with my custom labels let's say <code>GroupA</code>, <code>GroupB</code>, <code>GroupC</code>, <code>GroupD</code>.</p></li>
  <li><p><strong>[SOLVED]</strong> Make <strong>mouseover tooltip</strong> to be enlarged and show more information inside it. For example, Right now, the <code>group</code> information is shown outside the tooltip, it should be inside the row. Removing <code>theta</code> from tooltip.</p></li>
  <li><p>How to have concentric circle with grey color filled and a text written on it.? With <code>ggplot</code> I implemented it using a <code>geom_rect</code> at the bottom of chart and then <code>coord_polar</code>, but that approach will not work in <code>polar chart</code> with <code>plotly</code>. Any other approach ?</p></li>
  </ol>
  
  <p>I understand this could be basic things for <code>plotly</code> experts, but I am struggling and complicating things out of order since last 4 hours.</p>
  
  <p><strong>I want something similar as below</strong>:
  <a href="https://i.stack.imgur.com/hVx4I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hVx4I.png" alt="enter image description here"></a>
  I am sure, this question will go long way in helping beginners in customizing plotly polar chart visuals as no online help is available and SO question addressing it.
  Any help is appreciated.</p>