# Render chart JSON from the command line

The `glyphcss` executable comes from `@glyphcss/compile`. Its `chart` subcommand reads JSON, not Mermaid.

## Install and render from a clean directory

```sh
npm init -y
npm install @glyphcss/compile
cat > chart.json <<'JSON'
{"marks":[{"type":"line","data":[18,24,21,35,42,39,48,44,38,52,61,57],"channels":{},"options":{"name":"Orders"}},{"type":"line","data":[30,32,34,38,44,46,50,52,54,58,64,66],"channels":{},"options":{"name":"Plan"}}],"title":"Daily orders vs plan","axes":{"x":{"title":"Day (index)"},"y":{"title":"Orders"}}}
JSON
npx glyphcss chart chart.json --target chat --charset blocks --width 64 --height 18
npx glyphcss chart chart.json --target terminal --color ansi256 --width 64 --height 18 --out chart.ansi
cat > surface.json <<'JSON'
{"data":{"z":[[0,1,0],[1,3,1],[0,1,0]]}}
JSON
npx glyphcss chart surface.json --3d --charset braille --camera 30,-35 --style wireframe --width 60 --height 24
```



```ts
import { renderGlyphChart } from "@glyphcss/charts";

const { text } = renderGlyphChart({
  marks: [
    {
      type: "line",
      data: [18, 24, 21, 35, 42, 39, 48, 44, 38, 52, 61, 57],
      channels: {},
      options: {
        name: "Orders"
      }
    },
    {
      type: "line",
      data: [30, 32, 34, 38, 44, 46, 50, 52, 54, 58, 64, 66],
      channels: {},
      options: {
        name: "Plan"
      }
    }
  ],
  title: "Daily orders vs plan",
  axes: {
    x: {
      title: "Day (index)"
    },
    y: {
      title: "Orders"
    }
  }
}, {
  target: "chat",
  charset: "blocks",
  width: 64,
  height: 18
});
console.log(text);
```

```text
                      Daily orders vs plan                      
                                                                
Orders                                                          
                                                                
   │                                                     ▗▄▄▄▄▄▄
60 ┤                                                  ▗▄▀▚▄▄▖   
   │                                          ▄▄▄▄▄▄▄▀▚▄▀▘  ▝▀▀▄
50 ┤                               ▄▄▄▄▄▄▄▄▞▀▀      ▄▀▘         
   │                         ▗▄▄▞▀▀ ▄▄▄           ▗▞            
40 ┤                    ▄▄▟█▀▘   ▗▞▀   ▀▀▀▄▄▖    ▞▘             
   │               ▄▄▞▀▀    ▀▀▀▄▀▘          ▝▀▀▄▀               
30 ┤▗▄▄▄▄▄▄▄▄▄▄▄▞▀▜▞                                            
   │             ▞▘                                             
   │    ▄▄▄▄▄▄▄▄▀                                               
20 └▗▞▀▀───────┬─────────┬──────────┬──────────┬──────────┬─────
    0          2         4          6          8         10     
                            Day (index)                         
         ▗▄▄ Orders                       ▗▖▄ Plan              
```



## Flags

| Flag | Accepted values / behavior |
| --- | --- |
| `--target` | `chat`, `terminal`, `web`; CLI default is terminal. |
| `--charset` | `ascii`, `box`, `blocks`, `braille`. |
| `--color` | `none`, `ansi16`, `ansi256`, `truecolor`, `css`. |
| `--width`, `--height` | Positive integer columns and rows. |
| `-o`, `--out` | Write the emitted text to a file. |
| `--3d` | Read a surface spec `{ data, channels?, options? }`. |
| `--camera` | `rotX,rotY[,zoom]`, degrees and optional zoom; requires `--3d`. Omit for auto-fit. |
| `--style` | `solid`, `wireframe`, `ink`; requires `--3d`. Default follows charset. |
| `-h`, `--help` | Print usage. |

Output defaults to ANSI on a TTY and plain text when piped; `--color` overrides this choice. The CLI forwards `NO_COLOR` and `FORCE_COLOR`. It writes text even for `--color css`; use the JavaScript API's `result.html` when you need colored HTML.

Adaptation notes go to stderr as `glyphcss: <code>: <message>`. Failures retain tagged rule codes and exit 1. Keep stderr when diagnosing missing labels or invalid data.

## Mermaid chart files

Use the separate `diagram` dispatcher for Mermaid charts. It preserves source adaptation notes and accepts supported chart headers alongside diagram headers.

```sh
npm init -y
npm install @glyphcss/compile
cat > orders.mmd <<'MERMAID'
xychart
  x-axis [Mon, Tue, Wed]
  bar [18, 24, 21]
MERMAID
npx glyphcss diagram orders.mmd --target chat --width 60 --height 12
```

See [diagram CLI flags](/diagrams/cli/). Only the `chart` subcommand supports `--3d`.