{ "schemaVersion": 1, "contentVersion": "ca42e61ede0a24f789d7287a0001244ad22f4abf", "id": "docs/reference/interactive-charts", "collection": "docs", "title": "Interactive chart authoring", "description": "Build accessible, interactive Encode Wiki charts from local CSV or JSON data.", "canonicalUrl": "https://encode.wiki/reference/interactive-charts/", "apiUrl": "https://encode.wiki/api/v1/documents/docs/reference/interactive-charts.json", "markdownUrl": "https://encode.wiki/api/v1/markdown/docs/reference/interactive-charts.md", "status": "current", "tags": [ "charts", "contributing" ], "license": "CC BY-SA 4.0", "dates": {}, "authors": [], "sources": [], "headings": [ { "depth": 2, "text": "Vertical line chart", "anchor": "vertical-line-chart" }, { "depth": 2, "text": "Horizontal line chart", "anchor": "horizontal-line-chart" }, { "depth": 2, "text": "Vertical bar chart", "anchor": "vertical-bar-chart" }, { "depth": 2, "text": "Horizontal bar chart", "anchor": "horizontal-bar-chart" }, { "depth": 2, "text": "CSV data", "anchor": "csv-data" }, { "depth": 2, "text": "JSON data", "anchor": "json-data" } ], "sections": [ { "id": "_preamble", "title": "Page introduction", "depth": 0, "canonicalUrl": "https://encode.wiki/reference/interactive-charts/", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/_preamble.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/_preamble.md", "checksum": "6b6300456301954617046c331a2a7efdb15fc7a2364f236894233a71695c1a50", "bytes": 286 }, { "id": "vertical-line-chart", "title": "Vertical line chart", "depth": 2, "anchor": "vertical-line-chart", "canonicalUrl": "https://encode.wiki/reference/interactive-charts/#vertical-line-chart", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/vertical-line-chart.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/vertical-line-chart.md", "checksum": "a0baabc3ba9596d27643b329b90452910fb494ca90af2c815739abc342ba2a19", "bytes": 268 }, { "id": "horizontal-line-chart", "title": "Horizontal line chart", "depth": 2, "anchor": "horizontal-line-chart", "canonicalUrl": "https://encode.wiki/reference/interactive-charts/#horizontal-line-chart", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/horizontal-line-chart.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/horizontal-line-chart.md", "checksum": "ac87565bcbfdf0f2325c63875eb23a07a0ca8128e6eac7c2803b6626926e7e8d", "bytes": 419 }, { "id": "vertical-bar-chart", "title": "Vertical bar chart", "depth": 2, "anchor": "vertical-bar-chart", "canonicalUrl": "https://encode.wiki/reference/interactive-charts/#vertical-bar-chart", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/vertical-bar-chart.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/vertical-bar-chart.md", "checksum": "2590e4017c0729224cc6a7b7a8c4c3c377ca765508ccbf17f43974d8b7cf5eff", "bytes": 370 }, { "id": "horizontal-bar-chart", "title": "Horizontal bar chart", "depth": 2, "anchor": "horizontal-bar-chart", "canonicalUrl": "https://encode.wiki/reference/interactive-charts/#horizontal-bar-chart", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/horizontal-bar-chart.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/horizontal-bar-chart.md", "checksum": "67a9b055089613cf72c12bbc291d0559cd1b7e85f405ca5006021e8be7e8b46b", "bytes": 344 }, { "id": "csv-data", "title": "CSV data", "depth": 2, "anchor": "csv-data", "canonicalUrl": "https://encode.wiki/reference/interactive-charts/#csv-data", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/csv-data.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/csv-data.md", "checksum": "bcd83eb8882bae7ee7dbf039f39f29960944fa705dce969f650b490cf57cb909", "bytes": 902 }, { "id": "json-data", "title": "JSON data", "depth": 2, "anchor": "json-data", "canonicalUrl": "https://encode.wiki/reference/interactive-charts/#json-data", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/json-data.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/interactive-charts/json-data.md", "checksum": "5358a00988afb18b158d4026d1e7cb10acf43454d6ef8fd98c71ddb5d5f6eb03", "bytes": 918 } ], "outboundReferences": [], "checksum": "855c6dbf8aa1289e6248ca698f57bd31d97a2fc5ad20f8c42ddeda509293e908", "contentFormat": "markdown", "markdown": "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.\n\n## Vertical line chart\n\nThe default orientation plots the independent `xField` horizontally and each series value vertically.\n\n> **Chart — Illustrative quality comparison.** Synthetic data demonstrating two selectable series. These values are not benchmark results.\n\n## Horizontal line chart\n\nHorizontal 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.\n\n> **Chart — Illustrative horizontal quality comparison.** The same synthetic values with bitrate running vertically and quality running horizontally.\n\n## Vertical bar chart\n\nSet `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.\n\n> **Chart — Illustrative preset comparison.** Synthetic categorical data demonstrating grouped vertical bars. These values are not benchmark results.\n\n## Horizontal bar chart\n\nHorizontal 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.\n\n> **Chart — Illustrative horizontal preset comparison.** The same synthetic categorical data rendered as grouped horizontal bars.\n\n## CSV data\n\nStore 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\"`.\n\n```csv\nbitrate,encoder_a,encoder_b\n500,72.1,73.4\n1000,78.3,79.8\n```\n\nThen import and embed the component in an MDX page:\n\n```mdx\nimport InteractiveChart from '../../../components/InteractiveChart.astro';\n\n\n```\n\n## JSON data\n\nJSON 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.\n\n```json\n{\n \"rows\": [\n { \"bitrate\": 500, \"encoder_a\": 72.1, \"encoder_b\": 73.4 },\n { \"bitrate\": 1000, \"encoder_a\": 78.3, \"encoder_b\": 79.8 }\n ]\n}\n```\n\nFor 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.\n\n`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.\n" }