Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Bar chart with custom x axis

Hi,

I want to make a comparison bar which will include two or more points/ measurements.

This is my code:

import numpy as np
import pandas as pd
import plotly.plotly as py
import plotly.graph_objs as go

def comparison_bar(arr):
    min = arr.min()
    max = arr.max()
    
    range_bar = go.Bar(
            base = 100,
            marker = {'color':'rgb(200, 200, 200)'},
            x = [100],
            name = 'range',
            width = 0.1,
            orientation = 'h',
            hoverinfo = 'none'
            )
    
    
    point1 = go.Scatter(
            marker = {'color': 'rgb(255, 0, 0)', 'size': 20, 'symbol': 'diamond'},
            mode = "markers+text",
            text = "abc",
            x = [110],
            y = [0],
            )
    
    point2 = go.Scatter(
        marker = {'color': 'rgb(66, 134, 244)', 'size': 20, 'symbol': 'diamond'},
        mode = "markers+text",
        text = "def",
        x = [120],
        y = [0],
        )
    
    data = [range_bar, point1, point2]
    
    layout = go.Layout(
            height = 300,
            width = 800,
            xaxis = dict(showgrid = True,
                         zeroline = False,
                         tick0 = 75,
                         dtick = 25,
                         showticklabels = True),
            yaxis = dict(showgrid = False,
                         zeroline = False,
                         #anchor = 'x',
                         showticklabels = False)
            )
            
    fig = go.Figure(data=data, layout=layout)
    
    py.iplot(fig, filename = 'temp')
            
    return

comparison_bar(arr)

And here is the resulting chart:

I want the bar to have a fixed length e.g. 200 and its range to depend on a minimum and maximum value of an array. However if the min/max values are 1.7/3.6 in one case and 250/490 in another the bar length will always be dictated by the respective set of the above min/max values and it won’t be the same. Also in each case there will be a gap from the zero on the xaxis depending on the min value.

I guess that accessing the step size is critical here but I am not sure how to do this.

Any help will be much appreciated, thanks!

Hi @mr.t,

Thanks for including this example with your question. However, I’m still a little confused about what you’d like to end up with.

When you say you’d like the bar to have a fixed length of (for example) 200, do you mean a visual length of 200 pixels? Or 200 x-axis units?

Then you say that the bar length should not be the same for the 1.6/3.7 and 250/490 cases, and I’m not sure how this statement relates to the one above.

Do you think you could make and post the 1.6/3.7 and 250/490 cases by hand by manually entering xaxis.range?

-Jon