Get StartedBlocksSimulationsContributing
Launch HASH

Plots Syntax Reference

Histograms

Vertical histogram

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

Horizontal histogram

Code
Modal configuration
{
  "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

Code
Modal configuration
{
  "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

Code
Modal configuration
{
  "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

Code
Modal configuration
{
  "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

Code
Modal configuration
{
    "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

Code
Modal configuration
{
    "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

Code
Modal configuration
{
    "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"
    }]
}

Previous

API

Next

Simulations

Join our community of HASH developers

Browse open issues
Star us on GitHubGet in touch