Stock performance grid

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: "Close",
      ticker: "NIMB",
      data: [101.7, 101, 98.5, 97.3, 95.3, 97.4, 97, 97.2, 97.5, 98.3, 98.2, 98.6, 97.6, 99.4, 101.4, 104.1, 105.4, 104.3, 106.7, 107.7, 106.2, 106.8, 105.1, 103.7, 106.2, 107.3, 104.9, 106.7, 109.3, 108.3, 106.3, 107.9, 106.7, 105.8, 104.1, 106.3, 107.5, 104.7, 106.3, 104.5, 104.4, 103.6, 105.6, 107.6, 106.5, 106, 106.9, 108.1, 109.1, 111.1, 111, 110.1, 110.4, 111.8, 113.4, 112, 111.7, 112.4, 109.6, 108.8]
    },
    {
      name: "Close",
      ticker: "QRK",
      data: [102.8, 104.8, 106.6, 109.6, 107.5, 109, 109.3, 108.5, 110.7, 109.9, 109.9, 110.8, 108.9, 110.4, 111.4, 109.7, 109.2, 111.6, 109.2, 111.7, 113.5, 111.6, 112.4, 114.9, 114.1, 111.7, 114, 113.4, 113, 111.2, 113.5, 111.2, 109.2, 111.5, 112.9, 110, 107.4, 106.2, 105.4, 105, 105, 103.4, 102, 102.8, 102.4, 99.7, 100.5, 99.2, 100.1, 98.3, 100.6, 101.7, 99.6, 102.6, 102.3, 103, 101.9, 99.5, 98.9, 98.6]
    },
    {
      name: "Close",
      ticker: "HLX",
      data: [100.7, 98.5, 96.3, 97.9, 97.9, 95.9, 94.1, 96.3, 98.6, 101, 103.3, 103.1, 102.9, 104.8, 103.4, 101.8, 99.3, 98, 100.6, 101.1, 99.4, 101.9, 99.9, 97.5, 97, 98.4, 97.9, 99.8, 101.3, 104.1, 105.9, 103.2, 104.4, 104.9, 107.9, 108.3, 106.9, 105.4, 104.1, 105.3, 106.1, 104.2, 105.6, 103.1, 100.9, 103.7, 106.5, 107.3, 110.4, 112.9, 112.7, 111.1, 109, 107.9, 105.7, 104.7, 102.8, 102.1, 99.7, 99.8]
    },
    {
      name: "Close",
      ticker: "ARCD",
      data: [97.6, 100, 100.4, 102.3, 103.7, 106.3, 106.1, 107.7, 109.7, 112.1, 114.2, 114.5, 113.7, 114.2, 112.2, 114.7, 112.3, 110.4, 109, 109.7, 111, 110.3, 112.4, 110.9, 113.6, 110.9, 112.6, 114.4, 114.1, 115, 115.6, 116, 118.4, 115.7, 116.8, 114.8, 113.8, 114.2, 113.6, 116.1, 117.2, 115, 114.3, 116.6, 118.9, 117.3, 116.4, 118.7, 118, 115.5, 118.1, 120.2, 121.7, 120.1, 119.7, 117.7, 120.4, 120.8, 121.6, 122.6]
    },
    {
      name: "Close",
      ticker: "LUMN",
      data: [101.2, 100, 99.8, 98.6, 101.3, 98.5, 96.8, 95.6, 97.5, 97.5, 95.4, 97.7, 100.4, 103.1, 101.4, 101.6, 100.1, 98, 96.3, 94.5, 96.2, 99.1, 99.6, 98.2, 99.5, 100.9, 100.7, 98.5, 96.4, 93.7, 93, 90.4, 89, 90.6, 91.2, 88.5, 89.7, 88.9, 87.3, 85, 88, 90.6, 90.3, 89.8, 88, 88.3, 87.9, 87.6, 86.8, 85.7, 84.5, 84.7, 84.5, 82.9, 81, 81.2, 82.8, 83.3, 84.3, 82.1]
    },
    {
      name: "Close",
      ticker: "VOLT",
      data: [100.8, 100.3, 101.5, 100.1, 101.8, 103.3, 100.5, 101.9, 102, 99.7, 101.5, 100.1, 102.9, 100.5, 98, 96.4, 94.2, 93.4, 91.3, 88.7, 88, 89.5, 86.6, 88.9, 91.7, 90.2, 89.3, 87.6, 87.8, 89.9, 89.4, 90, 89.7, 92.8, 94.9, 93.6, 96.4, 99.4, 100.1, 99, 96.2, 97.5, 96.9, 97.3, 95.8, 95.1, 93.6, 94.3, 94.2, 92.5, 89.7, 87.7, 88.4, 90.6, 91.7, 90.3, 90.3, 91, 91.6, 88.8]
    },
    {
      name: "Close",
      ticker: "TIDE",
      data: [100.3, 99.6, 99.4, 100.8, 100, 102.4, 99.9, 97, 95.7, 98, 97.7, 96.5, 98.3, 97.9, 96.2, 98.7, 98.4, 98.6, 99.1, 102.1, 100.1, 100.2, 100.6, 99.2, 100.7, 99.7, 100.4, 99.1, 99.8, 99.6, 97.7, 99.2, 99.7, 97.3, 98, 97.4, 96.3, 94.9, 96.8, 94.2, 96.4, 95.6, 96, 98.5, 101.5, 103.3, 104.4, 106.9, 108.2, 106.7, 108.4, 107.9, 108.1, 110.1, 109.1, 107.5, 110.4, 112.7, 113.8, 113.1]
    },
    {
      name: "Close",
      ticker: "LDGR",
      data: [98.9, 96.8, 97, 95.9, 98.7, 100.2, 99.2, 98.6, 98.9, 99.1, 101.7, 103.8, 105, 105, 104.6, 104.1, 106.7, 104, 106.9, 107.7, 108.4, 108.3, 105.9, 107.8, 106.9, 107.7, 109.5, 111.1, 113.1, 112.2, 111, 113.8, 112.2, 110.6, 113, 112.4, 113.8, 114.6, 114.7, 112.1, 111, 110.6, 108.1, 109.4, 109.5, 108.8, 108.5, 111.2, 113.8, 113.6, 113.3, 111.6, 113, 115.6, 116.4, 113.8, 113.5, 112.9, 113.9, 115.2]
    },
    {
      name: "Close",
      ticker: "MINT",
      data: [101.4, 103.9, 106.2, 104.9, 106.2, 108.5, 106.7, 107.2, 107.9, 105.1, 102.8, 104.9, 107.6, 110.6, 112, 113.5, 114.2, 113, 113.5, 113.5, 116.2, 116.9, 117.9, 119.2, 120, 118.1, 119.7, 117.4, 118.2, 120.1, 120.7, 120.1, 120, 122.1, 122.1, 120.1, 119.5, 122.6, 124.9, 126.1, 124.4, 122.5, 123.5, 122.3, 120.5, 119, 117.5, 115.6, 112.9, 114.2, 115.8, 115.4, 114, 115.8, 115.2, 115.4, 113.4, 112.6, 115.1, 117.7]
    }
  ],
  xaxis: {
    labels: {
      show: false
    },
    axisTicks: {
      show: false
    }
  },
  stroke: {
    width: 1.5
  },
  fill: {
    opacity: 0.15
  },
  dataLabels: {
    enabled: false
  },
  trellis: {
    by: "ticker",
    columns: 3,
    aspectRatio: 2.2,
    scales: {
      y: "independent"
    },
    legend: "none",
    header: {
      formatter: (k) => k + '  ' + (({"NIMB":0.06981317600786621,"QRK":-0.0408560311284047,"HLX":-0.008937437934458845,"ARCD":0.2561475409836066,"LUMN":-0.18873517786561272,"VOLT":-0.11904761904761905,"TIDE":0.12761714855433695,"LDGR":0.16481294236602625,"MINT":0.16074950690335302})[k] >= 0 ? '+' : '\u2212') + Math.abs(({"NIMB":0.06981317600786621,"QRK":-0.0408560311284047,"HLX":-0.008937437934458845,"ARCD":0.2561475409836066,"LUMN":-0.18873517786561272,"VOLT":-0.11904761904761905,"TIDE":0.12761714855433695,"LDGR":0.16481294236602625,"MINT":0.16074950690335302})[k] * 100).toFixed(1) + '%'
    },
    panel: (k) => ({ colors: [({"NIMB":0.06981317600786621,"QRK":-0.0408560311284047,"HLX":-0.008937437934458845,"ARCD":0.2561475409836066,"LUMN":-0.18873517786561272,"VOLT":-0.11904761904761905,"TIDE":0.12761714855433695,"LDGR":0.16481294236602625,"MINT":0.16074950690335302})[k] >= 0 ? '#16a34a' : '#dc2626'] })
  },
  title: {
    text: "60-day close"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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