Decorations & Reference Lines

The decorations Parameter

The decorations configuration parameter adds visual annotations that are part of the chart, not the data — so they are drawn into every PNG, SVG and PDF export. Its structure depends on the graph type.

• One-dimensional charts (bar, line, box, …): an object keyed by line, range, point, text, marker or error.
• Scatter plots: keyed by a fit (linear, exponential, logarithmic, power, polynomial, nonlinearfit, regression, normal) or a shape (line, text, label, point, range, image, polygon).
• Network graphs: an array of node property names.

Each key holds an array of objects, one per decoration.

Reference Lines & Ranges

A line decoration draws a horizontal threshold at a data value; a range shades a band between two values. Both take a color, width, label and label align.

var cXDec = new CanvasXpress("canvasDec", decData, {
  graphType: "Line",
  decorations: {
    line: [
      { value: 80, color: "#ff0000", width: 2, label: "Target", align: "right" }
    ],
    range: [
      { value: [40, 60], color: "#cccccc", label: "Normal", align: "left" }
    ]
  }
});

On Scatter Plots

On scatter plots the same parameter draws fitted curves and free segments. A linear fit, for example, takes endpoints and style:

{ decorations: { linear: [
  { x: 1, y: 2, x2: 3, y2: 4, color: "#ff0000", width: 2, label: "Guide", align: "right" }
] } }

For a data-driven regression or LOESS fit with a confidence band, see Statistical Fits & Clustering. For editorial callouts with arrows pointing at specific data points, see Annotations.

From the Menus

Reference lines and ranges can also be added interactively from the Customizer under Decorations, and are saved with the chart configuration.