Top and bottom markets

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)

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()