Ok so now let me describe gauge. Let's look at one with gauge.shape === 'angular':

or equivalently with gauge.shape === 'bullet':

It has a few elements:

a bar to display the current value (in green)
it has a threshold to indicate a target value (in red)
as well as steps to identify ranges of interest (one in yellow and one in blue).
Finally, there is an axis with all the usual attributes to style the ticks, labels, etc. Those are found under gauge.axis

The bars (either for the value or the steps) can be configured with the same set of attributes:

color: its color
thickness: a number from 0 to 1 to that determines how much it fills the gauge laterally. For example, in the angular gauve above, the bar representing the value (in green) has a thickness of 0.5 (it only fills half the available space perpendicular to the axis direction)
Also, although it is not showcased in the figures above, one can control the border of the bar or the steps with:
line.color: the color of the line enclosing the bar (ie. its border)
line.width: the width of the border (again, currently zero in the figures above)

Plotly.newPlot(gd,[{
    "value": 450,
    "title": {"text": "Speed"},
    "type": "indicator",
    "mode": "gauge+number",
    "delta": {"reference": 400},
    "gauge": {
      "axis": {
        "range": [0, 500],
        "tickwidth": 1,
        "tickcolor": "white"
      },
      "bgcolor": "rgba(255, 255, 255, 0.25)",
      "borderwidth": 2,
      "bordercolor": "rgba(255, 255, 255, 0.5)",
      "steps": [{
        "range": [0, 250],
        "color": "rgba(255, 255, 0, 0.5)"
      }, {
        "range": [250, 400],
        "color": "rgba(0, 0, 255, 0.75)"
      }],
      "threshold": {
        "line": {
          "color": "rgba(255, 0, 0, 1)",
          "width": 4
        },
        "thickness": 0.75,
        "value": 490
      }
    }
  }], {'width': 800, 'paper_bgcolor': 'black', font: {color: 'white'}})

Uh oh!

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions