# Flame graph (Icicle example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/icicle/flame-graph/ · Index for agents: https://westcoast-charts.com/llms.txt

CPU samples as an upward flame graph.

- Chart type: `icicle` (Icicle)
- Collection: Icicle · Icicle
- Raw configuration: https://westcoast-charts.com/gallery-src/icicle/flame-graph.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/icicle/flame-graph.html

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'

WestCoastCharts.use(types)
```

## Options

```js
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "icicle",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Samples",
      data: [
        {
          x: "main",
          children: [
            {
              x: "handle_request",
              children: [
                {
                  x: "parse_json",
                  y: 120
                },
                {
                  x: "auth.verify",
                  children: [
                    {
                      x: "crypto.hmac",
                      y: 80
                    },
                    {
                      x: "cache.get",
                      y: 30
                    }
                  ]
                },
                {
                  x: "db.query",
                  children: [
                    {
                      x: "pool.acquire",
                      y: 40
                    },
                    {
                      x: "socket.read",
                      y: 160
                    }
                  ]
                },
                {
                  x: "render",
                  children: [
                    {
                      x: "template.eval",
                      y: 90
                    },
                    {
                      x: "escape_html",
                      y: 25
                    }
                  ]
                }
              ]
            },
            {
              x: "gc",
              y: 60
            },
            {
              x: "log.flush",
              y: 35
            }
          ]
        }
      ]
    }
  ],
  plotOptions: {
    icicle: {
      direction: "up",
      sort: "name",
      colorBy: "name",
      borderRadius: 2,
      spacing: 1,
      dataLabels: {
        align: "left",
        minSizeToShow: 24,
        style: {
          fontSize: "11px"
        }
      }
    }
  },
  title: {
    text: "CPU samples per function"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export icicle-flame-graph.json --out icicle-flame-graph.svg --with-table` (save the options above as JSON first)