Charts (Plotly)

Render interactive Plotly charts directly in your content using JSON data files.

Usage

{{</* chart data="my-chart" */>}}

This loads my-chart.json from the same folder as your content file (page bundle).

Parameters

Parameter	Type	Description
`data`	string	Required. JSON filename without `.json` extension. Expects the file in the page bundle folder.

JSON Format

The JSON file follows the Plotly.js schema with data and layout keys:

{
  "data": [
    {
      "x": ["Jan", "Feb", "Mar", "Apr"],
      "y": [10, 15, 13, 17],
      "type": "bar"
    }
  ],
  "layout": {
    "title": "Monthly Sales",
    "xaxis": { "title": "Month" },
    "yaxis": { "title": "Revenue ($k)" }
  }
}

{{</* chart data="my-chart" */>}}

Chart Types

Any Plotly chart type works — bar, line, scatter, pie, heatmap, 3D surface, etc. See the Plotly chart gallery for examples.

Line Chart

{
  "data": [
    {
      "x": [1, 2, 3, 4, 5],
      "y": [1, 4, 9, 16, 25],
      "type": "scatter",
      "mode": "lines+markers",
      "name": "Quadratic"
    }
  ],
  "layout": {
    "title": "Growth Curve"
  }
}

Pie Chart

{
  "data": [
    {
      "labels": ["Search", "Direct", "Social", "Referral"],
      "values": [45, 25, 20, 10],
      "type": "pie"
    }
  ],
  "layout": {
    "title": "Traffic Sources"
  }
}