Charts

Charts in this gallery have two published surfaces, and they meet at EVG.

Vela is a Vega-compatible runtime written in Ranger. A specification goes in. A scene comes out. The scene is compared against official Vega, item for item. An EVG backend then draws PDF, PNG and HTML.

VlChart is the other front door: a program calls methods, and the API writes the same Vega-Lite value a parser would have produced. Nothing in VlChart draws, measures or knows what a pixel is. toSpec() hands the specification to the runtime that already does all three.

@ranger/pptx/chart takes that specification (or one you wrote by hand) and puts it on a PowerPoint slide as DrawingML shapes.

          VlChart.bar().x("q").y("sales")     a Vega / Vega-Lite JSON
                         │                              │
                         └──────────┬───────────────────┘
                                    ▼
                                  Vela
                     compile → scene → draw commands
                                    │
                    ┌───────────────┼───────────────┐
                    ▼               ▼               ▼
                 EVG path         SVG         PPTX shapes
              PDF / PNG / HTML              (@ranger/pptx/chart)

Charts on a slide, live

The block below is the PowerPoint playground with the six-chart deck already running. Every bar, line and label is a DrawingML shape in the .pptx the editor opened — not a picture. Page with ‹ / ›.

Six chart slides as DrawingML shapes · Open in the playground

The chart API (Vela)

There is no npm package yet. A Ranger program imports the source. The JavaScript below calls the compiled classes in this page — chart.bar() is VlChart.bar(). Press Run. The Chart API reference has a second live example, and /evg/chart-api/ is the same API with a Ranger tab beside it.

chart.bar — sales by regionCtrl+Enter runs. The drawing is the SVG this runtime produced.Open in the playground

chart.size(320, 200);
chart.heading("Sales by region");
const bars = chart.bar();
bars.x("region").keepOrder();
bars.y("sales").aggregate("sum").title("sales");

Four rules the API follows:

The fluent surface is not the engine. Every call writes into a specification. The runtime draws.
A view’s encoding is inherited by its marks. chart.x(...) is said once and every mark reads it.
A channel need not state its type. A column of numbers is a quantity. A column of ISO dates is an instant. Anything else is a name.
The data is a value beside the chart. One dataset can feed several charts.

The full method list is the Charts API reference. It is generated from gallery/vela/src/VlChart.rgr.

Demos that are on the public site

Demo	URL	What it is
EVG showcase	`/evg/`	Fifty charts on printed pages, two or three themes, PDF / PNG / HTML / WebGL from one tree.
Chart API, live	`/evg/chart-api/`	Type `chart.bar().x("region")` in the browser. JavaScript and Ranger tabs.
Paste a specification	`/vela/`	Paste Vega or Vega-Lite JSON and see what this commit’s runtime draws.
Chart on a slide	`/office/`	The PowerPoint API playground. `@ranger/pptx/chart` is on that surface.

The showcase page Charts, called is generated from the calls in gallery/vela/tools/vela_chart_page.rgr. The lines printed above each chart are read out of that file, so the code the page shows and the code that drew the page cannot drift apart.

Charts on a PowerPoint slide

@ranger/pptx/chart is Chart() in the playground. The editor below runs that call: a Vega-Lite specification becomes DrawingML shapes on the slide. Press Run. The numbers in the labels are in slide.text.

Chart.addTo — a bar chart as shapesCtrl+Enter runs. The viewer opens the .pptx the code produced.Open in the playground

const deck = Pptx.create();
const slide = deck.addSlide().background("FFFFFF");

slide.addTextBox(70, 40, 820, 50, "Revenue by quarter")
     .run(0, 0).font("Calibri", 30).bold().color("#1F3864");

const chart = Chart().font("Calibri");
chart.addTo(slide, {
  width: 460, height: 260,
  data: { values: [
    { quarter: "Q1", revenue: 28 },
    { quarter: "Q2", revenue: 55 },
    { quarter: "Q3", revenue: 43 },
    { quarter: "Q4", revenue: 91 },
  ]},
  mark: { type: "bar", color: "#4472C4" },
  encoding: {
    x: { field: "quarter", type: "nominal", title: null },
    y: { field: "revenue", type: "quantitative", title: "M€" },
  },
}, 70, 110, 620, 380);

slide.addTextBox(70, 500, 820, 40, chart.shapeCount + " shapes — not one pixel of image")
     .run(0, 0).font("Calibri", 16).color("#5B6B84");
return deck;

This is not a PowerPoint chart part (c:chart plus an embedded workbook). It is a group of shapes. Ungrouping in PowerPoint leaves the bars and the labels behind as shapes, which is the point of not shipping a picture.

The methods are in the PowerPoint API reference under Charts.

Charts in the spreadsheet

The Excel editor can hold a chart on a sheet. The chart is a Vela specification drawn into the grid’s own display list. There is no published facade for that path yet. See Excel for the demo commands.

A chart copied in the grid can be pasted into the Word viewer. Both speak display list, so the paste is geometry, not a bitmap.

Local commands

npm run vela:web              # the paste-a-specification page
npm run showcase              # the EVG gallery, including generated chart pages
npm run showcase:api          # the live VlChart page, checked in Chromium
npm run vela:chart            # build charts from VlChart calls, write SVG

Source

Path	Role
`gallery/vela/src/VlChart.rgr`	The chart API
`gallery/vela/src/`	Compiler, runtime, SVG and EVG backends
`gallery/pptx/api/PptxChartApi.rgr`	Vega onto a slide as shapes
`gallery/vela/README.md`	Status, parity numbers, what is not there yet

Licence: AGPL-3.0-or-later · commit f323fd4 · Ranger language documentation (MIT)