Using the JsonHistogram Component

The JsonHistogram component allows you to embed individual histograms from JSON files directly into your VitePress markdown pages.

Quick Start

To display a histogram, simply use the component with a path to your JSON file:

<JsonHistogram path="/analysis/campaign-2025-07/eg-kinematics/10x100/inc_e_p.json" />

This will render:

Loading histogram...

Component Properties

path (required)

The path to the JSON histogram file relative to the public directory.

<JsonHistogram path="/path/to/your/histogram.json" />

height

Set a custom height for the chart (default: '400px').

<JsonHistogram 
  path="/analysis/campaign-2025-07/eg-kinematics/10x100/scat_e_eta.json" 
  height="300px" 
/>

Loading histogram...

show-stats

Toggle the statistics display (default: true).

<JsonHistogram 
  path="/analysis/campaign-2025-07/eg-kinematics/10x100/kaon_pt.json" 
  :show-stats="false" 
/>

Loading histogram...

title

Override the title from the JSON file.

<JsonHistogram 
  path="/analysis/campaign-2025-07/eg-kinematics/10x100/lambda_p.json" 
  title="Custom Title: Lambda Momentum" 
/>

Loading histogram...

Layout Examples

Side-by-Side Comparison

Use CSS grid for comparing histograms:

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
  <JsonHistogram 
    path="/analysis/campaign-2025-07/eg-kinematics/10x100/inc_p_pz.json" 
    height="350px"
  />
  <JsonHistogram 
    path="/analysis/campaign-2025-07/eg-kinematics/10x100/inc_e_pz.json" 
    height="350px"
  />
</div>

Loading histogram...

Loading histogram...

Compact Grid

For multiple small histograms:

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <JsonHistogram 
    path="/analysis/campaign-2025-07/eg-kinematics/10x100/scat_e_theta.json" 
    height="250px"
    :show-stats="false"
  />
  <JsonHistogram 
    path="/analysis/campaign-2025-07/eg-kinematics/10x100/scat_e_phi.json" 
    height="250px"
    :show-stats="false"
  />
  <JsonHistogram 
    path="/analysis/campaign-2025-07/eg-kinematics/10x100/scat_e_eta.json" 
    height="250px"
    :show-stats="false"
  />
</div>

Loading histogram...

Loading histogram...

Loading histogram...

Features

• Auto-loading: Histograms load when the component appears
• Dark mode: Automatically adapts to the VitePress theme
• Interactive: Zoom with mouse wheel, hover for detailed tooltips
• Responsive: Adjusts to container width on all devices
• Error handling: Clear messages if loading fails

JSON File Format

The component expects JSON files with the following structure:

{
  "particle": "inc_e",
  "variable": "p",
  "title": "Incident Electron - p",
  "x_label": "P [GeV/c]",
  "bins": {
    "edges": [...],
    "centers": [...],
    "counts": [...]
  },
  "stats": {
    "entries": 100000,
    "mean": 9.999,
    "std": 0.012
  }
}

This format is generated by the eg-kinematics.py analysis script.