CanvasXpress Annotations

Introduction to Annotations

A published chart earns its keep by pointing at what matters. CanvasXpress has three complementary tools: callouts (decorations.marker) — a text label with a line, straight arrow, or curved arrow to a specific data point; free text (decorations.text) placed anywhere on the plot; and direct labels (showLineEndLabels) that name each line at its end instead of using a legend.

Callouts with Connectors

A marker anchors to a data point by variable and sample, places its text at a fraction of the plot area (x/y, 0–1), and connects the two with type: "line", "arrow", or "curved" (an arced arrow; "curvedcw" arcs the other way).

var gdp = {
  "y": {
    "vars": ["Germany", "France"],
    "smps": ["2016", "2017", "2018", "2019", "2020"],
    "data": [[41, 42, 43, 39, 40], [36, 37, 38, 34, 36]]
  }
};
var cXAn1 = new CanvasXpress("canvasAn1", gdp, {
  graphType: "Line",
  graphOrientation: "vertical",
  decorations: {
    marker: [
      { text: "COVID dip", variable: "Germany", sample: "2019", type: "arrow", x: 0.55, y: 0.15 },
      { text: "Recovery", variable: "France", sample: "2020", type: "curved", x: 0.75, y: 0.55 }
    ]
  },
  theme: "CanvasXpress"
});

Drag to Place

Callout labels are draggable: grab the text and move it — the connector follows, and the marker's x/y fractions are written back into the configuration, so a saved chart reproduces the placement exactly.

Free Text

decorations.text places standalone notes. On scatter plots an entry takes x/y in data units (or fractions of the axes with relative: true), plus font, align, wrap and tooltip. On one-dimensional charts (bar, line, boxplot…) an entry names its category and value: { label: "Note", smp: "2019", value: 42 } (or catX for a fractional category position, e.g. centred between two bars).

Direct End-of-Line Labels

showLineEndLabels: true on a Line graph writes each series name at the end of its line, in the series color, and hides the legend — the reader's eye never has to travel to decode colors. Labels that would collide are nudged apart automatically, and the chart reserves the right-hand room they need.

var cXAn2 = new CanvasXpress("canvasAn2", {
  "y": {
    "vars": ["Germany", "France", "Italy", "Spain"],
    "smps": ["2016", "2017", "2018", "2019", "2020"],
    "data": [[41, 42, 43, 39, 40], [36, 37, 38, 34, 36],
             [30, 30.5, 31, 27, 28], [29.5, 30, 30.8, 26.5, 27.5]]
  }
}, {
  graphType: "Line",
  graphOrientation: "vertical",
  showLineEndLabels: true,
  theme: "CanvasXpress"
});

From the Menus

Right-click a Line chart and toggle Legend → Line End Labels. Every option here is also reachable through the Customizer search. Reference lines, range bands, points and images are further decoration types — see the API documentation for the full list.