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


Este plugin proporciona 1 bloque.

  • 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
  • Time line toggle for a date based axis, with selectable Time unit (stepSize)
  • Opacity – set the opacity of the background colours.
  • Height of the chart, in pixels
  • Bar thickness in pixels
  • Tension – for curved line charts

What Chart script does it use?

v1.0.0 delivers chartjs v3.7.1
and chartjs-adapter-date-fns v2.0.0

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.


No hay valoraciones para este plugin.

Colaboradores y desarrolladores

«SB Chart block» es un software de código abierto. Las siguientes personas han colaborado con este plugin.


Traduce «SB Chart block» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios


  • Added: Add tension Range Control for Line charts #11
  • Added: Add support for Time line on x-axis, with timeunit and barThickness #17
  • Added: Support additional parameters for performance related charts #18
  • Changed: Update to chartjs v3.7.1 #11
  • Changed: Add chartjs-adapter-date-fns v2.0.0 #15
  • Changed: Catch and report errors when using Time line #17
  • Changed: Enable Time options for x or y axis #17
  • Changed: Improve support for the chartjs shortcode for beginYAxisAt0 #15
  • Changed: Reintroduced chartLine icon #14
  • Changed: Improved internationalization and localization #13
  • Tested: With WordPress 5.9.1
  • Tested: With Gutenberg 12.6.0
  • Tested: With PHP 8.0


  • 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