comark ui
Esc

comark-charts

Notes and targets

View as MarkdownOpen in ChatGPTOpen in Claude

A hand-drawn mark on a chart's data and its note, or a line across the chart at a target.

Playground
Coffee cups and commits, per month (r = 0.99)
Apr 2026MayJunJulAugSepOct02004006008001,0001,200coffee cupscommits1A
A
Peak coffee.
  1. 1
    The new espresso machine arrives, and commits pass 700.
Data
month coffee cups commits
2026-04 820 610
2026-05 890 640
2026-06 905 652
2026-07 960 715
2026-08 975 720
2026-09 1,030 768
2026-10 1,025 760

Features

Section titled "Features"
  • Notes use comark-annotate's marks and checks, and comark-charts installs it.
  • The mark wraps the shape drawn for its value, such as a bar, a point, a slice, or a step.
  • Marks stay on their data when the numbers change.
  • Notes are numbered under the chart, as under a screenshot.
  • A marked chart zooms like a screenshot.

Usage

Section titled "Usage"

Put an ::annotation inside the chart, after the table. Use the at prop to name the row it marks, by its x value as the table writes it. Write the note as the block's content.

Playground
Rubber ducks bought, by team
backendfrontend01020304050ducks1
  1. 1
    Bought in bulk after the Tuesday incident.
Data
team ducks
backend 41
frontend 18

Note

Only the HTML renderer draws marks, as Renderers explains.

Series

Section titled "Series"

Use the series prop to mark one column's value in the row. Without it, the mark covers every series in the row and their values, and a circle on bars also loops around the row's name.

Playground
Tabs-vs-spaces arguments per month
frontendbackenddesign010203040sunnyrainy1
  1. 1
    The office flooded in March.
Data
team sunny rainy
frontend 12 31
backend 16 40
design 2 9

On a gantt chart, series names the bar's group instead, for a task that repeats across groups. On a sankey, at names a node from either column, and there's no series.

Mark, color, and side

Section titled "Mark, color, and side"

Use the mark, color, and side props as on a screenshot's annotation. A side note sits in the margin with an arrow instead of in the list.

Playground
Pigeons on the roof, by weekday
WednesdayThursdayFriday05101520pigeons (average)A
A
Someone feeds them on Fridays.
Data
weekday pigeons (average)
Wednesday 2.8
Thursday 6.5
Friday 14.7

Target line

Section titled "Target line"

Use mark="line" with the value prop to draw a target, a budget, or a limit as a line across the plot. Write value as the table writes its numbers.

Playground
p95 per endpoint (ms)
/search/login/feed0100200300400500p95A
A
The 200 ms budget.
Data
endpoint p95
/search 410
/login 61
/feed 140

The line runs across an upright chart and down a sideways one. The value axis stretches to reach a target past the data. Its note goes in the numbered list, or in the margin with side.

Note

A line crosses every row and series, so it takes no at or series. Pies, gantt charts, and sankeys have no value axis, so the plugin reports a line on them.

On a screenshot, line instead draws a stroke through the middle of its box.

API

Section titled "API"

Props

Section titled "Props"
at

The x value of the row to mark, copied from the table, or on a sankey the node's name. Required, except on a line.

series

Default: Every series in the row. The column to mark in that row. On a gantt chart, the group of the bar instead.

value

With mark="line", the number on the value axis the line crosses at.

markDefault: box

box, circle, underline, line, highlight, bracket, cross, check, or none.

color

Default: The chart's text color. red, amber, green, blue, violet, gray, or a 3- or 6-digit hex color.

side

left, right, top, or bottom for a side note with an arrow.

Issues

Section titled "Issues"

The plugin adds these problems to meta.issues:

  • at is missing, or isn't an x value in the table.
  • series names a column the chart doesn't draw.
  • The mark points at an empty cell.
  • A line has no number in value, or sits on a chart without a value axis.
  • A line has at or series, or a mark that isn't a line has value.
  • An unknown prop.
  • The mark, color, side, and note have the problems comark-annotate checks on screenshots.

The chart draws without any mark the plugin can't place. Each problem has its own rule in Doctor.