# Interactive chart authoring

Canonical URL: https://encode.wiki/reference/interactive-charts/
Content version: ca42e61ede0a24f789d7287a0001244ad22f4abf
Status: current
License: CC BY-SA 4.0
Checksum (SHA-256): 855c6dbf8aa1289e6248ca698f57bd31d97a2fc5ad20f8c42ddeda509293e908

Encode Wiki can render responsive line, scatter-point, and grouped bar charts directly from versioned CSV or JSON data. The component adds hover, touch, and keyboard highlighting; lets readers show or hide individual series; and preserves the complete data as an accessible HTML table.

## Vertical line chart

The default orientation plots the independent `xField` horizontally and each series value vertically.

> **Chart — Illustrative quality comparison.** Synthetic data demonstrating two selectable series. These values are not benchmark results.

## Horizontal line chart

Horizontal orientation transposes the visual axes while preserving the same data, tooltips, series controls, and accessible table. It is useful when the independent-axis labels or the shape of the comparison read better from top to bottom.

> **Chart — Illustrative horizontal quality comparison.** The same synthetic values with bitrate running vertically and quality running horizontally.

## Vertical bar chart

Set `type="bar"` to compare numeric series across named categories. Vertical bars place the `xField` categories along the horizontal axis and grow each series value from a shared zero baseline.

> **Chart — Illustrative preset comparison.** Synthetic categorical data demonstrating grouped vertical bars. These values are not benchmark results.

## Horizontal bar chart

Horizontal bars put category labels on the vertical axis. This is often easier to scan when labels are long, while retaining the same hover, touch, keyboard, legend, and table behavior.

> **Chart — Illustrative horizontal preset comparison.** The same synthetic categorical data rendered as grouped horizontal bars.

## CSV data

Store data in `public/data/` so it is both build-time input and a downloadable source. The first row defines field names. Series fields must contain finite numbers; `xField` may contain category labels when `type="bar"`.

```csv
bitrate,encoder_a,encoder_b
500,72.1,73.4
1000,78.3,79.8
```

Then import and embed the component in an MDX page:

```mdx
import InteractiveChart from '../../../components/InteractiveChart.astro';

<InteractiveChart
  title="Quality comparison"
  summary="Describe the experiment and what the reader should notice."
  src="/data/my-comparison.csv"
  xField="bitrate"
  xLabel="Bitrate (kb/s)"
  yLabel="Quality score"
  type="line"
  orientation="vertical"
  series={[
    { field: 'encoder_a', label: 'Encoder A' },
    { field: 'encoder_b', label: 'Encoder B', color: '#89b4fa' },
  ]}
  sourceNote="Link or describe the data source and methodology."
/>
```

## JSON data

JSON sources may be an array of row objects or an object containing a `rows` array. The same component properties select fields for the axes and series.

```json
{
  "rows": [
    { "bitrate": 500, "encoder_a": 72.1, "encoder_b": 73.4 },
    { "bitrate": 1000, "encoder_a": 78.3, "encoder_b": 79.8 }
  ]
}
```

For small charts, pass a `data` array directly instead of `src`. Use one input method only. Keep benchmark methodology and provenance near the chart, and avoid relying on color alone to identify a series.

`type="line"` is the default and requires numeric values for `xField`. `type="bar"` accepts non-empty category labels or finite numbers for `xField`; every series field remains numeric. Set `orientation="horizontal"` to transpose either chart type. Omit it, or use `orientation="vertical"`, for the conventional layout. Every variant exposes focusable marks and the complete data table.