Small-multiple columns: six sites, twelve years

from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser

if __name__ == "__main__":
  # Define the chart with its data and configuration
  chart: CanvasXpress = CanvasXpress(
    render_to = "timeseries13",
    data = {
      "y": {
        "vars": ["Reef A", "Reef A ", "Reef B", "Reef B ", "Reef C", "Reef C ", "Reef D", "Reef D ", "Reef E", "Reef E ", "Reef F", "Reef F "],
        "smps": ["'12", "'13", "'14", "'15", "'16", "'17", "'18", "'19", "'20", "'21", "'22", "'23"],
        "data": [
          [0, 56, 55, 51, 45, 45, 41, 37, 29, 26, 26, 0],
          [62, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 21],
          [0, 40, 37, 34, 33, 31, 31, 30, 31, 24, 24, 0],
          [41, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 22],
          [0, 75, 73, 70, 72, 68, 66, 65, 61, 59, 58, 0],
          [76, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 55],
          [0, 52, 50, 47, 43, 39, 37, 36, 30, 32, 25, 0],
          [56, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 26],
          [0, 34, 31, 31, 30, 31, 32, 29, 28, 29, 27, 0],
          [33, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29],
          [0, 49, 51, 54, 56, 58, 61, 61, 63, 65, 66, 0],
          [47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 69]
        ]
      },
      "z": {
        "Site": ["Reef A", "Reef A", "Reef B", "Reef B", "Reef C", "Reef C", "Reef D", "Reef D", "Reef E", "Reef E", "Reef F", "Reef F"]
      }
    },
    config = {
      "graphType": "Stacked",
      "graphOrientation": "vertical",
      "theme": "minimal",
      "xAxis": ["Reef A", "Reef A ", "Reef B", "Reef B ", "Reef C", "Reef C ", "Reef D", "Reef D ", "Reef E", "Reef E ", "Reef F", "Reef F "],
      "segregateVariablesBy": ["Site"],
      "layoutTopology": "1X6",
      "colorScheme": "User",
      "colors": ["#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#E8A5A5", "#C0392B"],
      "titleScaleFontFactor": 1.3,
      "titleFontStyle": "bold",
      "stripBackgroundColor": "rgba(255,255,255,0)",
      "stripBackgroundBorderColor": "rgba(255,255,255,0)",
      "stripTextAlign": "left",
      "stripTextFontStyle": "bold",
      "title": "Live coral cover, 2012-2023",
      "smpTitle": False,
      "smpLabelInterval": 11,
      "smpTextRotate": 90,
      "xAxisTitle": False,
      "xAxisShow": False,
      "xAxisGridMajorShow": False,
      "xAxisGridMinorShow": False,
      "showLegend": False,
      "showDataValues": True,
      "dataValuesFrequency": "ends",
      "dataLabelNumberFormat": {
        "suffix": "%"
      },
      "setMinX": 0,
      "setMaxX": 100,
      "blockSeparation": 2,
      "layoutSpacing": 22,
      "smpTextScaleFontFactor": 0.85,
      "decorations": {
        "text": [
          {
            "catX": 5.6,
            "value": 97,
            "label": "-41 pt cover",
            "panel": 1,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-19 pt cover",
            "panel": 2,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-21 pt cover",
            "panel": 3,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-30 pt cover",
            "panel": 4,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-4 pt cover",
            "panel": 5,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "+22 pt cover",
            "panel": 6,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          }
        ]
      },
      "source": "Synthetic data for illustration"
    },
    width = 760,
    height = 440
  )

  # Display the chart in its own Web page
  show_in_browser(chart)

Run this notebook:

from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph

graph(
  CanvasXpress(
    render_to = "timeseries13",
    data = {
      "y": {
        "vars": ["Reef A", "Reef A ", "Reef B", "Reef B ", "Reef C", "Reef C ", "Reef D", "Reef D ", "Reef E", "Reef E ", "Reef F", "Reef F "],
        "smps": ["'12", "'13", "'14", "'15", "'16", "'17", "'18", "'19", "'20", "'21", "'22", "'23"],
        "data": [
          [0, 56, 55, 51, 45, 45, 41, 37, 29, 26, 26, 0],
          [62, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 21],
          [0, 40, 37, 34, 33, 31, 31, 30, 31, 24, 24, 0],
          [41, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 22],
          [0, 75, 73, 70, 72, 68, 66, 65, 61, 59, 58, 0],
          [76, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 55],
          [0, 52, 50, 47, 43, 39, 37, 36, 30, 32, 25, 0],
          [56, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 26],
          [0, 34, 31, 31, 30, 31, 32, 29, 28, 29, 27, 0],
          [33, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29],
          [0, 49, 51, 54, 56, 58, 61, 61, 63, 65, 66, 0],
          [47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 69]
        ]
      },
      "z": {
        "Site": ["Reef A", "Reef A", "Reef B", "Reef B", "Reef C", "Reef C", "Reef D", "Reef D", "Reef E", "Reef E", "Reef F", "Reef F"]
      }
    },
    config = {
      "graphType": "Stacked",
      "graphOrientation": "vertical",
      "theme": "minimal",
      "xAxis": ["Reef A", "Reef A ", "Reef B", "Reef B ", "Reef C", "Reef C ", "Reef D", "Reef D ", "Reef E", "Reef E ", "Reef F", "Reef F "],
      "segregateVariablesBy": ["Site"],
      "layoutTopology": "1X6",
      "colorScheme": "User",
      "colors": ["#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#E8A5A5", "#C0392B"],
      "titleScaleFontFactor": 1.3,
      "titleFontStyle": "bold",
      "stripBackgroundColor": "rgba(255,255,255,0)",
      "stripBackgroundBorderColor": "rgba(255,255,255,0)",
      "stripTextAlign": "left",
      "stripTextFontStyle": "bold",
      "title": "Live coral cover, 2012-2023",
      "smpTitle": False,
      "smpLabelInterval": 11,
      "smpTextRotate": 90,
      "xAxisTitle": False,
      "xAxisShow": False,
      "xAxisGridMajorShow": False,
      "xAxisGridMinorShow": False,
      "showLegend": False,
      "showDataValues": True,
      "dataValuesFrequency": "ends",
      "dataLabelNumberFormat": {
        "suffix": "%"
      },
      "setMinX": 0,
      "setMaxX": 100,
      "blockSeparation": 2,
      "layoutSpacing": 22,
      "smpTextScaleFontFactor": 0.85,
      "decorations": {
        "text": [
          {
            "catX": 5.6,
            "value": 97,
            "label": "-41 pt cover",
            "panel": 1,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-19 pt cover",
            "panel": 2,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-21 pt cover",
            "panel": 3,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-30 pt cover",
            "panel": 4,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "-4 pt cover",
            "panel": 5,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          },
          {
            "catX": 5.6,
            "value": 97,
            "label": "+22 pt cover",
            "panel": 6,
            "color": "#6b7280",
            "labelScaleFontFactor": 0.9
          }
        ]
      },
      "source": "Synthetic data for illustration"
    },
    width = 760,
    height = 440
  )
)

using CanvasXpress

canvasxpress(Dict(
  "y" => Dict(
    "vars" => ["Reef A", "Reef A ", "Reef B", "Reef B ", "Reef C", "Reef C ", "Reef D", "Reef D ", "Reef E", "Reef E ", "Reef F", "Reef F "],
    "smps" => ["'12", "'13", "'14", "'15", "'16", "'17", "'18", "'19", "'20", "'21", "'22", "'23"],
    "data" => [
      [0, 56, 55, 51, 45, 45, 41, 37, 29, 26, 26, 0],
      [62, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 21],
      [0, 40, 37, 34, 33, 31, 31, 30, 31, 24, 24, 0],
      [41, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 22],
      [0, 75, 73, 70, 72, 68, 66, 65, 61, 59, 58, 0],
      [76, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 55],
      [0, 52, 50, 47, 43, 39, 37, 36, 30, 32, 25, 0],
      [56, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 26],
      [0, 34, 31, 31, 30, 31, 32, 29, 28, 29, 27, 0],
      [33, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29],
      [0, 49, 51, 54, 56, 58, 61, 61, 63, 65, 66, 0],
      [47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 69]
    ]
  ),
  "z" => Dict(
    "Site" => ["Reef A", "Reef A", "Reef B", "Reef B", "Reef C", "Reef C", "Reef D", "Reef D", "Reef E", "Reef E", "Reef F", "Reef F"]
  )
);
  graphType = "Stacked",
  graphOrientation = "vertical",
  theme = "minimal",
  xAxis = ["Reef A", "Reef A ", "Reef B", "Reef B ", "Reef C", "Reef C ", "Reef D", "Reef D ", "Reef E", "Reef E ", "Reef F", "Reef F "],
  segregateVariablesBy = ["Site"],
  layoutTopology = "1X6",
  colorScheme = "User",
  colors = ["#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#B9BEC6", "#3F4756", "#E8A5A5", "#C0392B"],
  titleScaleFontFactor = 1.3,
  titleFontStyle = "bold",
  stripBackgroundColor = "rgba(255,255,255,0)",
  stripBackgroundBorderColor = "rgba(255,255,255,0)",
  stripTextAlign = "left",
  stripTextFontStyle = "bold",
  title = "Live coral cover, 2012-2023",
  smpTitle = false,
  smpLabelInterval = 11,
  smpTextRotate = 90,
  xAxisTitle = false,
  xAxisShow = false,
  xAxisGridMajorShow = false,
  xAxisGridMinorShow = false,
  showLegend = false,
  showDataValues = true,
  dataValuesFrequency = "ends",
  dataLabelNumberFormat = Dict(
    "suffix" => "%"
  ),
  setMinX = 0,
  setMaxX = 100,
  blockSeparation = 2,
  layoutSpacing = 22,
  smpTextScaleFontFactor = 0.85,
  decorations = Dict(
    "text" => [
      Dict(
        "catX" => 5.6,
        "value" => 97,
        "label" => "-41 pt cover",
        "panel" => 1,
        "color" => "#6b7280",
        "labelScaleFontFactor" => 0.9
      ),
      Dict(
        "catX" => 5.6,
        "value" => 97,
        "label" => "-19 pt cover",
        "panel" => 2,
        "color" => "#6b7280",
        "labelScaleFontFactor" => 0.9
      ),
      Dict(
        "catX" => 5.6,
        "value" => 97,
        "label" => "-21 pt cover",
        "panel" => 3,
        "color" => "#6b7280",
        "labelScaleFontFactor" => 0.9
      ),
      Dict(
        "catX" => 5.6,
        "value" => 97,
        "label" => "-30 pt cover",
        "panel" => 4,
        "color" => "#6b7280",
        "labelScaleFontFactor" => 0.9
      ),
      Dict(
        "catX" => 5.6,
        "value" => 97,
        "label" => "-4 pt cover",
        "panel" => 5,
        "color" => "#6b7280",
        "labelScaleFontFactor" => 0.9
      ),
      Dict(
        "catX" => 5.6,
        "value" => 97,
        "label" => "+22 pt cover",
        "panel" => 6,
        "color" => "#6b7280",
        "labelScaleFontFactor" => 0.9
      )
    ]
  ),
  source = "Synthetic data for illustration"
)