CanvasXpress Editorial Chart Types

Introduction

Publication charts lean on a handful of shapes. In CanvasXpress they are not separate libraries or plug-ins but options on the Pie and Dumbbell charts and on the layout engine, so they share the same data format, themes, tooltips, footer and number formats as everything else.

Parliament Chart

pieType: "parliament" on a Pie draws one dot per seat on the rows of a hemicycle; each party fills one wedge, left to right in data order. The values are seat counts.

var seats = {
  "y": {
    "vars": ["SPD", "CDU/CSU", "Greens", "FDP", "AfD", "Left"],
    "smps": ["Seats"],
    "data": [[206], [197], [118], [92], [83], [39]]
  }
};
var cXEc1 = new CanvasXpress("canvasEc1", seats, {
  graphType: "Pie",
  pieType: "parliament",
  colors: ["#e3000f", "#1f1f1f", "#46962b", "#e6c700", "#009ee0", "#be3075"],
  legendPosition: "bottom",
  legendColumns: 3
});

Election Donut (Half Pie)

pieShape: "half" turns any Pie into a semicircle; add pieInnerRadius for the classic election donut. The semicircle is centred on startPieSectors (default 12 o'clock), so it opens upward.

{
  graphType: "Pie",
  pieShape: "half",
  pieInnerRadius: 0.55,
  pieLabelType: "value"
}

Arrow Plot (Before → After)

A Dumbbell with dumbbellType: "arrow" and dumbbellArrowDirection: "order" points every arrow from the first variable to the next — so a decline reads as a decline. The default ("value") keeps the earlier behaviour of pointing at the smaller value. Arrows work in both orientations.

var cXEc2 = new CanvasXpress("canvasEc2", {
  "y": {
    "vars": ["2014", "2024"],
    "smps": ["USA", "Germany", "Japan", "Brazil", "India", "Nigeria"],
    "data": [[79, 81, 84, 75, 68, 53], [80, 82, 83, 76, 71, 55]]
  }
}, {
  graphType: "Dumbbell",
  dumbbellType: "arrow",
  dumbbellArrowDirection: "order",
  legendPosition: "bottom"
});

Range Plot

A min–max bar per category is a Dumbbell with two variables (minimum and maximum) and dumbbellType: "bullet" (a band between the two points) or "connected". For ranges computed from replicate values, Boxplot with boxplotType: "range" draws min to max with the median.

Small Multiples

One panel per series with shared axes is the layout engine: segregateVariablesBy: ["variable"] (or segregateSamplesBy with a sample annotation) splits a chart into a grid of panels. Pair it with the editorial theme for the newsroom look.

Classed Choropleths and Symbol Maps

colorSpectrumBreaksMethod classifies a numeric colorBy into one colour class per colorSpectrum colour: "jenks" (natural breaks — the classes that best separate the data), "quantile" (equal count) or "equalWidth". Every region is filled with its exact class colour and the legend becomes a stepped legend with each class edge labelled. Hand-picked colorSpectrumBreaks with colorSpectrumBinned work the same way.

{
  graphType: "Map",
  topoJSON: "https://www.canvasxpress.org/data/maps/WORLD.json",
  colorBy: "Total",
  colorSpectrum: ["#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c"],
  colorSpectrumBreaksMethod: "jenks",
  showMapLabels: true
}

showMapLabels names the regions whose label fits inside them without touching another label, largest regions first, in black or white depending on the fill (mapLabelProperty picks the feature property, mapLabelColor overrides the colour). For a proportional-symbol map, sizeBy a sample draws one bubble per region in mapBubbleColor, and the size legend shows the same bubbles (legendColumns: 4 keeps it compact). Insets (e.g. Alaska and Hawaii) are positioned per feature with mapConfigFeatures.

Publishing Tables

The data table (view: "table") draws in-cell graphics per column with dataTableColRenderer, on any numeric column — the chart's data or its metadata (such as the non-axis columns of a loaded CSV) — or from a numeric column header's In-cell Bars menu item: "bar" draws a bar behind each value, scaled to its column (negative values grow left of a zero line), and { type: "sparkline", columns: [...] } draws a small line of each row across those columns — they can be hidden with dataTableColHide. Number formats work per column too: dataTableColFormat accepts a sprintf string or a number format ("comma", "compact", { style: "percent" }…). Heat colouring of cells is the table toolbar's colour toggle (dataTableColored). A table that does not fill the chart's space can shrink to its content: dataTableFitHeight: true removes the empty area under the last row and dataTableFitWidth: true the empty area after the last column; a larger table keeps the chart's size and scrolls.

{
  graphType: "Bar",
  view: "table",
  dataTableColHide: ["2019", "2020", "2021", "2022"],
  dataTableColRenderer: {
    "2023": "bar",
    "Trend": { type: "sparkline", columns: ["2019", "2020", "2021", "2022", "2023"] }
  },
  dataTableColFormat: { "Population": "compact" }
}

The graphics are redrawn with the cells, so they follow scrolling, sorting, filtering and pagination; the summary row never skews a bar column's scale. A numeric column's header menu toggles In-cell Bars.

From the Menus

Right-click a Pie chart and open Pie → Shape (Full / Half) or Pie → Type (Separated / Solid / Parliament). For arrow dumbbells, Dotplot → Arrow Direction switches between the two directions. On a Map, Map → Classes picks the classification and Map → Region Labels toggles the labels.