Set the bar origin in gauge indicator to start at 0 in plot.ly

user_10226164 0
Viewed 903

I would like to have the darkblue bar to start at 0, to be able to use it for negative and positive values.

Currently I don’t see how I could define that, judging by the reference. https://plotly.com/python/reference/indicator/ https://plotly.com/python/bullet-charts/

import plotly.graph_objects as go
fig = go.Figure(go.Indicator(
    mode = "number+gauge+delta", value = 10,
    domain = {'x': [0, 1], 'y': [0, 1]},
    delta = {'reference': 10, 'position': "top"},
    title = {'text':"<b>Gearing</b><br><span style='color: gray; font-size:0.8em'>Finanical<br>Stability</span>", 'font': {"size": 14}},
    gauge = {
        'shape': "angular",
        'axis': {'range': [-100, 100]},
        'threshold': {
            'line': {'color': "red", 'width': 2},
            'thickness': 0.75, 'value': 70},
        'bgcolor': "white",
        'steps': [
            {'range': [-100, 100], 'color': "cyan"},
            {'range': [-50, 50], 'color': "royalblue"}],
        'bar': {'color': "darkblue"}}))
fig.update_layout(height = 250)
fig.show()

This is showing value=10

enter image description here

This is showing value=0

enter image description here

This is showing value=-40

enter image description here

plotly visualization python
1 Answers

I found a way to simulate the appearance that you want to achieve using only steps. What I did is to hide the bar setting bar.thickness = 0 and then add an extra step with step.range = [0, value] and thickness <= 1.

I'm using Plotly.js, but the code should be similar.

const data = {
  value: x
  type: 'indicator',
  mode: 'number+gauge',
  gauge: {
    shape: 'angular',
    bar: { thickness: 0 },
    steps: [
          {
            range: [-3500, 3500],
            color: 'cyan',
            thickness: 1,
          },
          {
            range: [-1200, 1200],
            color: 'royalblue',
            thickness: 1,
          },
          {
            range: [0, x],
            color: 'blue',
            thickness: 0.8,
          },
        ]
  },
}

Negative value Positive value

user_163601690
Related