# Drawing on the chart

> Plots, fills, boxes, Fibonacci, profiles, tables and dashboards.

Source: https://algobarsx.com/docs/drawing/

```algobarsx
plot ema(close, fast) as fast_line, color: if trend_up then green else red, width: 2
plot (high + low) / 2, color: gray, style: step
fill ribbon.fast, ribbon.slow, color: green.fade(80)
hline 70, style: dashed, color: #22c55e
mark arrow_up, at: below, when: crosses_above(close, ema(close, fast)), color: green
label "Entry", at: (bar.index, high)
line from: (bar.index - 20, lowest(low, 20)), to: (bar.index, lowest(low, 20)), extend: right
box id: "range", from: (bar.index - 10, highest(high, 10)), to: (bar.index, lowest(low, 10)), color: blue.fade(85)
bar_color if close > open then green else red
background red.fade(90), when: regime == Regime.volatile
profile rows: 24, range: session, side: right
fib from: (bar.index - 50, lowest(low, 50)), to: (bar.index, highest(high, 50))
dashboard position: top_right, rows: [["Regime", "{regime}"], ["Triggers", "{triggers}"]]
```

There are 26 drawing commands. Each is documented under [Drawing commands](https://algobarsx.com/docs/ref-cmd-drawing/).

- Give a drawing an `id:` to update the same object on later bars instead of adding a new one.
- Positions are written as `(bar, price)` pairs, such as `(bar.index - 20, lowest(low, 20))`.
- Colours: ten named colours, hex values, `.fade(percent)`, and [`gradient`](https://algobarsx.com/docs/ref-fn-colors/#ref-gradient), [`linear_gradient`](https://algobarsx.com/docs/ref-fn-colors/#ref-linear-gradient) and [`radial_gradient`](https://algobarsx.com/docs/ref-fn-colors/#ref-radial-gradient).

## The canvas

When no command fits, `on render(canvas)` gives you a vector canvas for the visible range: paths, lines, fills and text.

```algobarsx
on render(canvas):
    for z in levels:
        shape = canvas.path()
        shape.move_to(z.formed_at, z.price)
        shape.line_to(canvas.last_bar, z.price)
        shape.stroke(zone_color, width: 1)
        canvas.text("{z.touched}x", at: (canvas.last_bar, z.price), align: right)
```

Examples: [Volatility Regime Canvas](https://algobarsx.com/docs/ex-30-volatility-regime-canvas/), [Volume Heatmap](https://algobarsx.com/docs/ex-39-volume-heatmap/), [Multi-Timeframe Trend Table](https://algobarsx.com/docs/ex-51-multi-timeframe-table/), [Opening Range Dashboard](https://algobarsx.com/docs/ex-27-opening-range-dashboard/).