SB Chart block


Use the Chart block ( oik-sb/chart ) to display a chart.


  • Line chart - Gutenberg theme colors
  • Bar chart - Chart theme colors
  • Horizontal bar chart - Tertiary theme colors
  • Pie chart - Visualizer theme colors
  • Chart type toolbar selection


Questo plugin fornisce 1 blocco.

  • Chart Displays a chart for CSV content.


  1. Upload the plugin files to the /wp-content/plugins/sb-chart-block directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress


With WordPress 5.6 or Gutenberg 9.6.2 or higher, and the authority to install plugins:

  1. In the block editor, open the block inserter.
  2. Search for the block by typing ‘Chart’.
  3. Click on the ‘Add block’ button for the SB Chart block.
  4. The SB Chart block plugin will be installed and activated.
  5. And the block will be inserted into your content.


What types of chart can I display?

So far…

  • Line and stacked line, with optional fill
  • Bar and stacked bar
  • Horizontal bar and stacked horizontal bar
  • Pie

How do I choose the chart colors?

There are 6 predefined color palettes:
choose the color palette from a drop down list.

What options are there?

Options to control the chart display are:

  • Stacked – Toggle on to stack line or bar charts
  • Begin Y axis at 0 toggle
  • Fill toggle for line charts
  • Height of the chart, in pixels.
  • Opacity – set the opacity of the background colours.

What Chart script does it use?

chartjs – from

v0.3.0 enqueues the script from a local version of chart.min.js, version 3.1.0.
When SCRIPT_DEBUG is true the debug version, chart.js, is loaded.

What do I need to search for to find the block?

Chart or SB Chart

What if my first language is not English?

If your first language is not English then you could try:

  • French – graphique
  • German – Diagramm
  • Dutch – grafiek
  • Italian – grafico
  • Spanish – gráfico

Do I need to build this block?

No. The plugin is delivered with the production version of the block.
If you do wish to modify the code then you can find instructions in the src folder.


Non ci sono revisioni per questo plugin.

Contributi e sviluppo

“SB Chart block” è un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito.


Traduci “SB Chart block” nella tua lingua.

Ti interessa lo sviluppo?

Esplora il Codice segui il Repository SVN iscriviti al Log delle Modifiche. Puoi farlo tramite RSS con un lettore di feed.

Changelog (registro delle modifiche)


  • Fixed: Chart block example doesn’t show a chart #16
  • Tested: With Gutenberg 11.6.0


  • Changed: Attempt to deal with deprecated blocks #13
  • Changed: Refactored to use apiVersion: 2 #13
  • Changed: Replace chartLine icon by trendingUp #14
  • Fixed: Ensure stacked and beginAtZero are true / false #15
  • Fixed: Remove some unnecessary code in sb_chart_block_shortcode #12
  • Tested: With Gutenberg 11.5.1
  • Tested: With PHP 8.0
  • Tested: With WordPress 5.8.1 and WordPress Multi Site


  • Changed: Added language files,[github bobbingwide sb-chart-block issues 10]
  • Changed: Remove redundant / unwanted logic,[github bobbingwide sb-chart-block issues 10]
  • Changed: Improve color palettes and selection,[github bobbingwide sb-chart-block issues 2]
  • Changed: Upgrade to use chartjs v3.1.0,[github bobbingwide sb-chart-block issues 11]
  • Changed: Add opacity with range from 0 to 1 for chart background colours,[github bobbingwide sb-chart-block issues 2]
  • Changed: Refactor Color_Palettes to SB_Chart_Color_Palettes,[github bobbingwide sb-chart-block issues 10]
  • Tested: With WordPress 5.7.1 and WordPress Multi Site
  • Tested: With Gutenberg 10.4.0
  • Tested: With PHP 8.0
  • Tested: With PHPUnit 9


  • Changed: Enqueue scripts from the plugin,[github bobbingwide sb-chart-block issues 10]
  • Changed: Load color palettes from palettes.json,[github bobbingwide sb-chart-block issues 10]
  • Tested: With WordPress 5.7 and WordPress Multi Site
  • Tested: With Gutenberg 10.3.1
  • Tested: With PHP 8.0
  • Tested: With PHPUnit 9


  • Changed: Eliminate very light gray and white from the Gutenberg colour palette. Add yellowish grey.,[github bobbingwide sb-chart-block issues 2]
  • Tested: With WordPress 5.6.1 and WordPress Multi Site
  • Tested: With Gutenberg 9.9.2


  • Changed: Enqueue chart.js in the footer, when necessary. Run Chart when DOMContentLoaded.,[github bobbingwide sb-chart-block issues 9]


  • Added: Begin Y-axis at 0 toggle.
  • Changed: Option toggle arrangement
  • Tested: With Gutenberg 9.8.0


  • Added: Chart type toolbar group and new icons,[github bobbingwide sb-chart-block issues 5]
  • Added: Example – a simple pie chart,[github bobbingwide sb-chart-block issues 5]


  • Added: Height range control. Default 450px in the editor.,[github bobbingwide sb-chart-block issues 5]


  • Added: Toggle to Fill line charts,[github bobbingwide sb-chart-block issues 5]


  • Added: Toggle to Stack charts,[github bobbingwide sb-chart-block issues 5]


  • Fixed: Support setting of the chart height using CSS,[github bobbingwide sb-chart-block issues 5]


  • Fixed: Remove dependency on oik related shared library functions,[github bobbingwide sb-chart-block issues 1]


  • Added: Server Side Rendered charts using Chart.js,[github bobbingwide sb-chart-block issues 1]
  • Added: 4 theme options for chart colors,[github bobbingwide sb-chart-block issues 2]
  • Added: Chart block in the block editor,[github bobbingwide sb-chart-block issues 4]
  • Tested: With WordPress 5.6.0 and WordPress Multi Site
  • Tested: With Gutenberg 9.7.2


  • First version copied from SB Children block