# Top and bottom markets (Trellis example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/trellis/top-and-bottom-markets/ · Index for agents: https://westcoast-charts.com/llms.txt

The three best and three worst markets by growth, via an explicit panel order.

- Chart type: `area` (Area)
- Collection: Trellis · Trellis
- Raw configuration: https://westcoast-charts.com/gallery-src/trellis/top-and-bottom-markets.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/trellis/top-and-bottom-markets.html

## Setup

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

WestCoastCharts.use(types).use(trellis)
```

## Options

```js
const options = {
  chart: {
    height: "auto",
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "area",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Sales index",
      city: "Denver",
      data: [96, 101, 99, 104, 106, 112, 113, 118, 117, 116, 111, 111]
    },
    {
      name: "Sales index",
      city: "Porto",
      data: [104, 107, 112, 111, 111, 116, 122, 124, 120, 125, 126, 120]
    },
    {
      name: "Sales index",
      city: "Malmö",
      data: [102, 102, 103, 108, 106, 102, 103, 97, 98, 102, 106, 112]
    },
    {
      name: "Sales index",
      city: "Lyon",
      data: [105, 104, 106, 102, 108, 106, 102, 98, 101, 97, 93, 90]
    },
    {
      name: "Sales index",
      city: "Seattle",
      data: [98, 94, 94, 89, 87, 85, 79, 76, 79, 76, 79, 77]
    },
    {
      name: "Sales index",
      city: "Oslo",
      data: [99, 94, 89, 86, 83, 78, 74, 68, 69, 69, 64, 67]
    }
  ],
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    labels: {
      show: false
    }
  },
  fill: {
    opacity: 0.15
  },
  stroke: {
    width: 2
  },
  dataLabels: {
    enabled: false
  },
  trellis: {
    by: "city",
    columns: 3,
    aspectRatio: 2,
    order: ["Denver", "Porto", "Malmö", "Lyon", "Seattle", "Oslo"],
    legend: "none",
    header: {
      formatter: (k) => (["Denver","Porto","Malmö"].includes(k) ? 'Top: ' : 'Bottom: ') + k + ' ' + (({"Denver":0.15625,"Porto":0.15384615384615374,"Malmö":0.0980392156862746,"Lyon":-0.1428571428571429,"Seattle":-0.2142857142857143,"Oslo":-0.3232323232323232})[k] >= 0 ? '+' : '\u2212') + Math.abs(({"Denver":0.15625,"Porto":0.15384615384615374,"Malmö":0.0980392156862746,"Lyon":-0.1428571428571429,"Seattle":-0.2142857142857143,"Oslo":-0.3232323232323232})[k] * 100).toFixed(0) + '%'
    },
    panel: (k) => ({ colors: [["Denver","Porto","Malmö"].includes(k) ? '#16a34a' : '#dc2626'] })
  },
  title: {
    text: "Twelve-month growth"
  },
  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 trellis-top-and-bottom-markets.json --out trellis-top-and-bottom-markets.svg --with-table` (save the options above as JSON first)