Annotations

Annotations let you overlay marks on top of a chart — a horizontal threshold line, a shaded box highlighting a date range, a callout label tied to a specific point — to call out values, ranges, or thresholds without altering the underlying data. Annotations are a Chart.js-only feature.

Adding your first annotation

The Annotations panel lives inside the existing Chart meta box on the chart edit screen, directly above the chart preview. It is not a separate meta box and not a tab.

When a chart has no annotations yet, you'll see a single Add Annotation button. Click it and a new annotation appears in the list, seeded with sensible defaults, with the editor open below it ready for changes. On Cartesian charts (bar, line, scatter, etc.) the default is a Line; on radial charts (pie, radar, polar, etc.) it's a Point.

Annotation types

Pick a type from the Type dropdown. Six types are available:

On radial charts (pie, doughnut, radar, radar area, polar) the Type dropdown is limited to Line, Label, Point, and Polygon. Box and Ellipse need a Cartesian X/Y axis pair and aren't available there.

Common settings

Every annotation type shares the same top row and styling controls:

• Label — an editor-only nickname shown in the annotation list. It is not rendered on the chart. Use it to find the annotation in the list. Defaults to Annotation 1, Annotation 2, and so on.
• Type — switches the annotation between the six types listed above. Position values are partially preserved when you switch.
• Order — Front draws the annotation on top of the chart data; Back draws it behind. Default is Back.
• Line Color / Border Color — color picker. Choices come from the active chart theme's palette plus black and red. Opacity is supported. The label reads Line Color for line annotations and Border Color for everything else.
• Line Width / Border Width — slider 0–10, with a tick mark at the chart's default line width.
• Line Style / Border Style — Solid, Dashed, or Dotted.
• Border Radius — slider 0–25. Shown for Box and Label only.
• Background Color — color picker. Shown for every type except Line. Defaults to a 50%-opacity tint of the border color.

Label content (Label type only)

When the type is Label, additional fields appear:

• Content — multi-line textarea. Each newline becomes a new line in the rendered label.
• Padding — slider 0–30.
• Text Align — Left, Center, or Right. Also drives the label's anchor.
• Rotation — slider –180° to 180°.
• Text Color — color picker.
• Font Size — 11–40 px.
• Line Height — 1.0–2.0.
• Style — Normal or Italic.
• Weight — Normal or Bold.

Positioning

Positions are entered as numeric axis values in chart coordinates — not pixel offsets and not category names.

• On a numeric axis (a typical Y-axis with values, or a scatter chart's X-axis), type the number you want.
• On a category axis (a text X-axis with values like month names), you must type the numeric index of the category. The first column is 0, the second is 1, and so on.

There is no category-name picker.

Because positions are stored as raw numbers, an annotation does not "follow" a renamed category — index 2 is still index 2. If you later change the underlying data so that an index falls outside the new category range, Chart.js will draw the annotation at the chart boundary; it won't error out, and it won't auto-delete.

On radial charts

Radial chart types (pie, doughnut, radar, radar area, polar) don't have X and Y axes. Position inputs change to a polar pair instead:

• Distance from Center — slider from 0% (the center of the chart) to 150% of the chart's outer radius. 100% sits exactly on the outer edge. Anything above 100% extends past the plot area, which is useful for callouts; the chart auto-pads its layout to keep those annotations visible.
• Angle (°) — slider from 0° to 360°. 0° points straight up (12 o'clock) and angles increase clockwise — 90° is to the right, 180° is straight down, 270° is to the left.

Lines on radial charts are drawn between two polar points: a Start Distance / Start Angle pair and an End Distance / End Angle pair. There's no Horizontal / Vertical / Diagonal orientation control on radial charts.

Editing existing annotations

You can open an annotation's editor in two ways:

• Click the annotation in the list, or
• Click the annotation directly in the live chart preview.

Either way, the editor opens and the meta box scrolls into view. The Done button at the bottom of the editor closes it and scrolls back to the chart. Done does not save independently — saving happens when you save or update the post.

Reordering annotations

Drag any row in the annotation list to a new position to change its order. Drop the row where you want it. The list highlights the drop target while you drag.

Removing annotations

Each row in the annotation list has an X icon. Clicking it opens a Delete Annotation confirmation modal with Delete and Cancel buttons.

Live preview

The chart updates immediately as you add, edit, or remove annotations. Slider drags are debounced about a fifth of a second; everything else is instant. There's no refresh step.

Saving

Annotations are saved with the post when you click Update or Publish. There is no separate save button inside the panel.

Supported chart types

Every Chart.js chart type that M Chart Pro supports can carry annotations. Which annotation types are available depends on the chart's coordinate system:

• Cartesian charts — Bar, Column, Line, Area, Scatter, and Bubble — support all six annotation types (Line, Box, Label, Ellipse, Point, Polygon).
• Radial charts — Pie, Doughnut, Radar, Radar Area, and Polar — support Line, Label, Point, and Polygon only. Box and Ellipse need an X/Y axis pair to position against, so they aren't offered there.

Limits and gotchas

• A chart can have at most 50 annotations. Anything beyond that is silently dropped when the post is saved.
• There is no way to duplicate or bulk-delete annotations.
• The Label field on each annotation is for your reference in the list only — it is not drawn on the chart. To put text on the chart, use the Label annotation type.
• Annotations are not included in CSV export and cannot be added via CSV import.
• Switching between a Cartesian chart type (bar, line, scatter, etc.) and a radial one (pie, radar, polar, etc.) changes which annotation types are available. Annotations made for the other coordinate system are hidden from the list, and a notice appears showing how many were mismatched. The Add Annotation button is disabled until you either switch the chart type back, or click Delete Mismatched in the notice to remove them.
• Duplicating a chart with a third-party post-duplicator tool will carry annotations along.