Canvas Docs

Charts

Draw a chart from a data set you supply, so figures from a report or a price comparison can be read at a glance. The chart type, its data and its labels all come from the configuration you enter. It is shown in the block inserter as Canvas Chart and registered as canvas-core/chart.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Charts settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • Chart.js Configuration (JSON)DefaultEmpty

    Paste a valid Chart.js configuration object as JSON (e.g. {"type":"bar","data":{...}}). JSON has no NaN, use null for missing/skipped data points (Chart.js renders a gap; set "spanGaps": true on a dataset to bridge it).

  • Value Format PresetDefaultEmpty

    Named formatter applied to axis ticks and tooltip values by the frontend handler: JSON cannot carry callback functions, so these safe presets cover the common formatting cases.

    ChoicesNone (raw values) (empty)Currency ($1234)Percentage (42%)Thousands separator (1234)

  • Height (CSS value)Default300px

    How tall the chart box is. Give it a length such as 300px, or a share of the screen such as 50vh. The chart fills whatever width it is given.

    Shown when Mode is "Chart.js chart (config below)"

  • ModeDefaultChart.js chart (config below)

    Bare canvas mode emits a single element and nothing else: give it an ID in the Advanced panel so your script can find it.

    ChoicesChart.js chart (config below)Bare canvas surface (your script draws on it)Chart.js chart on a bare canvas (no wrapper)

  • Canvas Width (px)Default0

    Intrinsic drawing width. 0 emits no width attribute and the browser uses its 300x150 default.

    Shown when Mode is "Bare canvas surface (your script draws on it)"

  • Canvas Height (px)Default0

    How tall the drawing area is, in pixels. Set it to 0 to leave the height unstated, and the browser uses its own default of 150.

    Shown when Mode is "Bare canvas surface (your script draws on it)"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Cascading Images, Circle Stack, Clients, Data Tables, Google Map.

Was this page helpful?