I am trying to create a first dashboard and have created a simple line chart. I tried to stick to the example dashboard which looks great.
But in my case the grid is not spanning the entire window evenly. It re-scales when I make the browser window smaller, but in full size i always have to much space on the right side.
I don’t see any difference to the approach in the example dashboard, so what am I doing wrong?
---
theme: dashboard
title: Testing Line Chart with Observable Plot
sql:
financial_data: ./data/financial_data.db
---
```sql id=stockPriceHistory
SELECT
to_timestamp(CAST(json_extract(json_extract(raw_json, '$.v'), '$[0]') AS double)) AS time,
CAST(json_extract(json_extract(raw_json, '$.v'), '$[4]') AS double) AS close
FROM financial_data.pre_stage.ps_stock_price_history_t
WHERE json_extract_string(raw_json,'$.symbol') = 'BRK.B'
```
```js
function simpleLineChart(data, {width}) {
return Plot.plot({
marks: [Plot.line(data, {x: "time", y: "close"})],
width, height: 400, marginLeft: 50, marginRight: 50, y: {grid: true}
});
}
```
```
<div class="grid grid-cols-1">
<div class="card">
${resize((width) => simpleLineChart(stockPriceHistory, {width}))}
</div>
</div>
```
