# Braille line charts and filled area charts

Use `glyphChartLine(data, channels?, options?)` for trends and `glyphChartArea` for filled values from a zero baseline. The example is an illustrative twelve days of orders, not measured production data.

## Line over an area

Compose marks in paint order. Give matching marks the same series name and color. Here the shaded area is capacity and the line is actual demand.



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

const { text } = renderGlyphChart({
  marks: [
    {
      type: "area",
      data: [30, 32, 34, 38, 44, 46, 50, 52, 54, 58, 64, 66],
      channels: {},
      options: {
        name: "Capacity"
      }
    },
    {
      type: "line",
      data: [18, 24, 21, 35, 42, 39, 48, 44, 38, 52, 61, 57],
      channels: {},
      options: {
        name: "Orders",
        strokeWidth: 2
      }
    }
  ],
  title: "Daily order volume"
}, {
  target: "terminal",
  width: 64,
  height: 18
});
console.log(text);
```

```text
                       Daily order volume                       
                                                                
   │                                                    ▗▄██████
60 ┤                                               ▗▄████⢀⣠⣄⡀███
   │                                      ▗▄▄▄████████⢀⣠⠶⠋⠁⠈⠙⠛⠶█
50 ┤                            ▗▄██████████████████⣠⠶⠋⠁████████
   │                   ▗▄██████████⣀⣤⣤⣤⣤⣤⣤⣤⡀██████⢀⡼⠃███████████
40 ┤               ▄▄███⣀⣤⣤⣤⣤⣤⣤⣤⡴⠞⠛⠉███████⠙⠳⣄███⣴⠋█████████████
   │     ▄▄▄▄███████⣠⡴⠞⠛⠉████████████████████⠈⠛⢦⠞⠁██████████████
30 ┤██████████████⢀⡼⠃███████████████████████████████████████████
   │███⢀⣀⣤⣄⣀█████⣴⠋█████████████████████████████████████████████
20 ┤█⠰⠞⠋⠉█⠈⠉⠛⠳⠶⣤⠞⠁██████████████████████████████████████████████
   │████████████████████████████████████████████████████████████
10 ┤████████████████████████████████████████████████████████████
   │████████████████████████████████████████████████████████████
 0 └┬──────────┬─────────┬──────────┬──────────┬──────────┬─────
    0          2         4          6          8         10     
         █  Capacity                     ⢠⡄⣤ Orders             
```



```ts
import { glyphChartArea, glyphChartLine, glyphChartPlot, renderGlyphChart } from "@glyphcss/charts";

const spec = glyphChartPlot({
  marks: [
    glyphChartArea([30, 32, 34, 38, 44, 46, 50, 52, 54, 58, 64, 66], {}, { name: "Capacity" }),
    glyphChartLine(
      [18, 24, 21, 35, 42, 39, 48, 44, 38, 52, 61, 57],
      {},
      { name: "Orders", strokeWidth: 2 },
    ),
  ],
});
const result = renderGlyphChart(spec, { target: "terminal", width: 60, height: 18 });
```

## Record-based series

For records, bind `x` and `y` explicitly. Bind `stroke` or `fill` to a category to split a mark into series. Keep rows in the intended traversal order; pre-sort dates yourself.



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

const { text } = renderGlyphChart({
  marks: [
    {
      type: "line",
      data: [
        {
          day: 1,
          orders: 18,
          store: "North"
        },
        {
          day: 2,
          orders: 24,
          store: "North"
        },
        {
          day: 3,
          orders: 21,
          store: "North"
        },
        {
          day: 4,
          orders: 35,
          store: "North"
        },
        {
          day: 5,
          orders: 42,
          store: "North"
        },
        {
          day: 6,
          orders: 39,
          store: "North"
        },
        {
          day: 7,
          orders: 48,
          store: "North"
        },
        {
          day: 1,
          orders: 12,
          store: "South"
        },
        {
          day: 2,
          orders: 20,
          store: "South"
        },
        {
          day: 3,
          orders: 28,
          store: "South"
        },
        {
          day: 4,
          orders: 25,
          store: "South"
        },
        {
          day: 5,
          orders: 32,
          store: "South"
        },
        {
          day: 6,
          orders: 36,
          store: "South"
        },
        {
          day: 7,
          orders: 41,
          store: "South"
        }
      ],
      channels: {
        x: "day",
        y: "orders",
        stroke: "store"
      }
    }
  ]
}, {
  target: "web",
  width: 64,
  height: 16
});
console.log(text);
```

```text
orders                                                          
                                                                
   │                                                          ⢀⡠
   │                                                       ⣀⠤⠊⠁ 
40 ┤                                      ⣀⠤⠤⣀⣀⡀        ⡠⠔⠊   ⣀⠤
   │                                 ⢀⡠⠤⠒⠉     ⠈⠉⠉⠒⠒⠢⠤⠒⠉ ⣀⠤⠔⠊⠉  
   │                              ⡠⠔⠊⠁            ⣀⣀⡠⠤⠔⠊⠉       
30 ┤                           ⢀⠔⠉        ⣀⠤⠤⠒⠒⠊⠉⠉              
   │                   ⢀⡠⠤⣀⣀⡀⡠⠊⠁     ⢀⡠⠤⠒⠉                      
   │         ⣀⠤⠤⣀⣀⡀ ⣀⠤⠊⠁  ⢀⠔⠉⠉⠉⠒⠒⠢⠤⠔⠊⠁                          
   │    ⣀⠤⠔⠊⠉    ⡠⠜⠋⠉⠒⠒⠢⠤⠊⠁                                     
20 ┤⠠⠔⠊⠉     ⣀⠤⠒⠉                                               
   │    ⣀⠤⠔⠊⠉                                                   
   └⠠⠔⠊⠉──────┬─────────┬─────────┬────────┬─────────┬─────────┬
    1         2         3         4        5         6         7
          ⠠⠤⠤ North                       ⠠⠄⠤ South             
```



Use `scales.x.type: "time"` for ISO dates or `Date` values. Areas require a domain containing zero. A rolling mean uses a mark-level `window` transform; see the [spec reference](/charts/spec/#transforms). Choose box drawing for chat when its font lacks braille.