Plots Syntax Reference


Histograms

Vertical histogram

{
  "title": "My histogram",
  "type": "histogram",
  "data": [{ "x": "BlueTeamMetric", "name": "BlueTeamMetric" }],
  "layout": { "width": "100%", "height": "100%" },
  "position": { "x": "0%", "y": "0%" }
}

Horizontal histogram

{
  "title": "My horizontal histogram",
  "type": "histogram",
  "data": [{ "y": "BlueTeamMetric", "name": "BlueTeamMetric" }],
  "layout": { "width": "100%", "height": "100%" },
  "position": { "x": "0%", "y": "0%" }
}

Two histograms on the same plot

{
  "title": "Two histograms on the same plot",
  "type": "histogram",
  "data": [{ "x": "BlueTeamMetric" }, { "x": "OrangeTeamMetric" }],
  "layout": { "width": "100%", "height": "100%" },
  "position": { "x": "0%", "y": "0%" }
}

Two horizontal histograms on the same plot

{
  "title": "Two horizontal histograms on the same plot",
  "type": "histogram",
  "data": [
    { "y": "BlueTeamMetric", "name": "BlueTeamMetric" },
    { "y": "OrangeTeamMetric", "name": "OrangeTeamMetric" }
  ],
  "layout": { "width": "100%", "height": "50%" },
  "position": { "x": "0%", "y": "150%" }
}

Area

Multiple metrics

{
  "title": "Infection Progress",
  "type": "area",
  "data": [
    { "y": "exposed", "stackgroup": "one", "name": "exposed" },
    { "y": "infected", "stackgroup": "one", "name": "infected" },
    { "y": "deceased", "stackgroup": "one", "name": "deceased" },
    { "y": "healthy", "stackgroup": "one", "name": "healthy" },
    { "y": "immune", "stackgroup": "one", "name": "immune" }
  ],
  "layout": { "width": "100%", "height": "200%" },
  "position": { "x": "0%", "y": "0%" }
}

Box

Two box plots example

{
  "title": "Two box plots example",
  "layout": {
    "width": "100%",
    "height": "100%"
  },
  "position": {
    "x": "0%",
    "y": "0%"
  },
  "type": "box",
  "data": [
    {
      "y": "BlueTeamMetric"
    },
    {
      "y": "OrangeTeamMetric"
    }
  ]
}

Line

Two time-series in the same plot

{
  "title": "Two timeseries example",
  "layout": {
    "width": "100%",
    "height": "100%"
  },
  "position": {
    "x": "0%",
    "y": "0%"
  },
  "type": "line",
  "data": [
    {
      "y": "BlueTeamMetric",
      "name": "Blue team"
    },
    {
      "y": "OrangeTeamMetric",
      "name": "Orange team"
    }
  ]
}

Scatter

Two time-series in the same plot

{
  "title": "Two timeseries example",
  "layout": {
    "width": "100%",
    "height": "100%"
  },
  "position": {
    "x": "0%",
    "y": "0%"
  },
  "type": "scatter",
  "data": [
    {
      "y": "BlueTeamMetric",
      "name": "Blue team"
    },
    {
      "y": "OrangeTeamMetric",
      "name": "Orange team"
    }
  ]
}