BarPolar with Overlay - Disable zoom feature #4544

plotly.js
1

I have few questions on BarPolar chart type with overlay barmode.

  • How to disable zoom feature, in normal bar chart we used to add fixedrange: true to the xaxis and yaxis to disable the zoom and cursor will change to pointer from crosshair
  • How to differentiate the label color of each trace based on the value of the trace
  • Need to display textoutside the bar
2

I didn’t get update about my question yet. can someone help me on this to sort my problem :frowning:

3

Hi @mdineshari welcome to the forum! In the future if you have several questions could you please write one post per question? It makes it easier for other users to search for information.

Regarding 1., one way to disable zoom is to set layout.dragmode: false (see Disable zoom but keep click enabled)

For 2, for setting the color of each bar you could adapt this example https://plot.ly/python/polar-chart/#polar-bar-chart from the Python doc which translates readily into Javascript.

For 3, the Barpolar trace does not have an attribute to display text but you could add a scatter trace with the same points which can be used to display text. Below is a Python example because I’m less fluent with Javascript but you can adapt it to Javascript.

import plotly.graph_objects as go
import numpy as np

r = np.array([3.5, 1.5, 2.5, 4.5, 4.5, 4, 3])

fig = go.Figure(go.Barpolar(
    r=r,
    theta=[65, 15, 210, 110, 312.5, 180, 270],
    width=[20,15,10,20,15,30,15,],
    marker_color=["#E4FF87", '#709BFF', '#709BFF', '#FFAA70', '#FFAA70', '#FFDF70', '#B6FFB4'],
    marker_line_color="black",
    marker_line_width=2,
    opacity=0.8,
    text=[1, 2, 3, 4, 5, 6, 7]
))
fig.add_trace(go.Scatterpolar(
    r=r + 0.2,
    theta=[65, 15, 210, 110, 312.5, 180, 270],
    text=[1, 2, 3, 4, 5, 6, 7],
    mode='text'
))

fig.update_layout(
    template=None,
    polar = dict(
        radialaxis = dict(range=[0, 5], showticklabels=False, ticks=''),
        angularaxis = dict(showticklabels=False, ticks='')
    ),
    dragmode=False 
)

fig.show()

Happy plotting :wink:

1 Like
4

Thank you so much Emmanuelle. I had few follow question for the same.

1.) dragmode: false is working as i expect. Is there a way to change the cursor pointer from cross-hair to pointer or default?
2.) My requirement here is to change the color of the tickfont for each bars, not bar color. Do we have any configuration for the same. When i check the documentation tickfont is string not array of string, so i can apply same color to all the tick fonts. I have one round of method to apply the font to tick font, using javascript i will get the documentElementByClassName(‘angularaxisticks’) and text tag, then apply the fill color style to appropriate bars
3.) I will check the provided option and update here.

5

It would be very helpful, if we get the response onthe above questions along with below one

4.) Can we set default height to the bars, since if we have very less number then bar looks too small which is difficult for user to mouse over to check the data. If we could have feature to set the default height if the data is less than certain value.

6

Hello,

dragmode property is disabling click event also. I want only zoom even to disable can you please help me to sort this out

7

Hi @Emmanuelle

your way to set the Scatterpolar to the same values is interesting.

However, if I have

r = np.array([5, 5])

the text would not show anymore on the plot, because:

fig.add_trace(go.Scatterpolar(
    r = r + 0.1,

cannot exceed the given polar.

Maybe thats only going to work via customizing the ticklabels then.