Charts (Plotly)

Create interactive line charts, bar charts, pie charts, and more from JSON data using the Hugo Plotly chart shortcode.

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:

my-chart.json

{
  "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

line-chart.json

{
  "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

pie-chart.json

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

Charts are rendered responsively and support interactive features like hover tooltips, zoom, and pan out of the box.

Plotly.js is loaded on-demand when a chart shortcode is present on the page. No additional configuration is needed.