Title: SB Chart block
Author: bobbingwide
Published: <strong>2021-يىلى 20-ئاپرېل</strong>
Last modified: 2025-يىلى 18-ئاپرېل

---

قىستۇرما ئىزدە

![](https://ps.w.org/sb-chart-block/assets/banner-772x250.jpg?rev=2519069)

![](https://ps.w.org/sb-chart-block/assets/icon-256x256.jpg?rev=2518242)

# SB Chart block

 يازغۇچى [bobbingwide](https://profiles.wordpress.org/bobbingwide/)

[چۈشۈر](https://downloads.wordpress.org/plugin/sb-chart-block.1.3.1.zip)

 * [تەپسىلاتلار](https://ug.wordpress.org/plugins/sb-chart-block/#description)
 * [باھالاشلار](https://ug.wordpress.org/plugins/sb-chart-block/#reviews)
 *  [ئورنىتىش](https://ug.wordpress.org/plugins/sb-chart-block/#installation)
 * [ئىجادىيەت](https://ug.wordpress.org/plugins/sb-chart-block/#developers)

 [قوللاش](https://wordpress.org/support/plugin/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

## بۆلەك

بۇ قىستۇرما 1 بۆلەك تەمىنلەيدۇ.

 *   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

OR with 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.

## FAQ

### 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.

Use the Background color overrides and border color overrides fields to set custom
color values.

### 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)
 * Y-axes for multi axis charts
 * Color palette dropdown
 * Background color overrides. Enter comma separated hex codes.
 * Border color overrides. Enter comma separated hex codes.
 * Opacity – set the opacity of the background colours.
 * Height of the chart, in pixels
 * Bar thickness in pixels
 * Tension – for curved line charts
 * Legend font size
 * X-axis font size

### What Chart script does it use?

v1.2.6 delivers [chartjs v4.4.2](https://www.jsdelivr.com/package/npm/chart.js?path=dist)

and [chartjs-adapter-date-fns v3.0.0](https://github.com/chartjs/chartjs-adapter-date-fns)

### 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.

### Are there shortcodes available?

Charts can be embedded with the shortcode `chartjs`. The general syntax is as follows:

    ```
    [chartjs attribute="attribute value"]CSV content[/chartjs]
    ```

Several attributes can be added at the same time. Example:

    ```
    [chartjs attribute1="attribute1 value" attribute2="attribute2 value"]CSV content[/chartjs]
    ```

Here’s the list of supported attributes:

 * `backgroundColors` (string): list of custom background colors (separated by comma)
   to use for datasets. For example, if there are 3 datasets (`d1`, `d2` and `d3`)
   and we want `d1` to use the color `#0000FF`, `d2` to use `#FFFF00` and `d3` to
   use `#008000`, the value of the attribute must be `#0000FF,#FFFF00,#008000`. 
   If some colors are missing (ex.: `#0000FF,,#008000`), default colors from the
   theme (set with the attribute `theme`) are used as fallback (`#0000FF,second 
   theme color,#008000`); default is no custom colors used
 * `barThickness` (int): thickness (in pixels) of a bar in bar charts; default is
   the default Chart.js thickness
 * `beginYAxisAt0` (bool): make sure the Y axis begins at 0; default is `false`
 * `borderColors` (string): list of custom border colors (separated by comma) to
   use for datasets. See the description of the attribute `backgroundColors` for
   more details; default is the value of the attribute `backgroundColors`
 * `class` (string): class or classes to be added to the chart container; default
   is an empty string
 * `fill` (bool): fill the area under the line; default is `false`
 * `height` (int): chart height (in pixels); default is the default Chart.js height
 * `indexAxis` (string): axis to use as index; choices are `x`, `y`; note that `
   y` is automatically used for horizontal bar charts; default is `x`
 * `max` (float): maximum value for Y axes; default is no maximum value
 * `opacity` (float): opacity to apply to the lines or bars; it must be between `
   0` and `1`; default is `0.8`
 * `showLine` (bool): show (draw) lines; default is `true`
 * `stacked` (bool): enable stacking for line/bar charts; default is `false`
 * `tension` (float): add Bezier curve tension to lines; when set to `0`, lines 
   are straight; default is `0`
 * `theme` (string): theme used for the chart colors; choices are `Chart`, `Gutenberg`,`
   Rainbow`, `Tertiary`, `Visualizer`, `WordPress`; default is `Chart`
 * `time` (bool): add support for time line on the X axis; default is `false`
 * `timeUnit` (string): time unit to use if time line is enabled; choices are `year`,`
   quarter`, `month`, `week`, `day`, `hour`, `minute`, `second`, `millisecond`; 
   default is `hour`
 * `type` (string): type of chart; choices are `bar`, `horizontalbar`, `line`, `
   pie`; default is `line`
 * `yAxes` (string): list of Y axes to which the datasets are bound. It allows to
   enable multi-axis charts. For example, if there are 3 datasets (`d1`, `d2` and`
   d3`) and we want `d1` to use the first Y axis, and `d2` and `d3` to use the second
   Y axis, the attribute value must be `y,y1,y1`; default is an empty string, so
   multi-axis feature is disabled and all datasets are automatically bound to the
   first (and only) Y axis `y`

Here’s a fully functional example:

    ```
    [chartjs backgroundColors="#008000" fill="true" opacity="0.35" tension="0.2" theme="Visualizer" time="true" timeUnit="month" yAxes="y,y1"]Year,Sales,Expenses
    2020-08,5421.32,1151.21
    2021-02,4823.99,887.23
    2021-03,4945.32,958.00
    2021-10,7086.65,1854.35
    2022-05,7385.21,2009.01
    [/chartjs]
    ```

Here’s the result:

### Are there hooks available for developers?

The following filter hooks are available:

 * `sb_chart_block_content`: filter allowing to manipulate the content before it’s
   processed
 * `sb_chart_block_options`: filter allowing to add custom Chart.js options

For example, to customize the legend, use the `sb_chart_block_options` filter in
your `functions.php` theme file as follows:

    ```
    `php
    ```

function customize_legend($options, $atts, $series) {
 $custom_options = to_array(
$options);

    ```
    $custom_options['plugins']['legend']['labels']['font']['size'] = 16;
    $custom_options['plugins']['legend']['labels']['color'] = '#0000FF';

    return json_decode(json_encode($custom_options));
    ```

}
 add_filter(›sb_chart_block_options‹, ›customize_legend‹, 10, 3);

function to_array($data) {
 $array = [];

    ```
    if (is_array($data) || is_object($data)) {
        foreach ($data as $key => $value) {
            $array[$key] = (is_array($value) || is_object($value)) ? to_array($value) : $value;
        }
    } else {
        $array[] = $data;
    }

    return $array;
    ```

}
 `

Here’s another way (without array conversion):

    ```
    `php
    ```

function customize_legend($options, $atts, $series) {
 if (!isset($options->plugins))
$options->plugins = new stdClass(); if (!isset($options->plugins->legend)) $options-
>plugins->legend = new stdClass(); if (!isset($options->plugins->legend->labels))
$options->plugins->legend->labels = new stdClass(); if (!isset($options->plugins-
>legend->labels->font)) $options->plugins->legend->labels->font = new stdClass();

    ```
    $options->plugins->legend->labels->font->size = 16;
    $options->plugins->legend->labels->color = '#0000FF';

    return $options;
    ```

}
 add_filter(›sb_chart_block_options‹, ›customize_legend‹, 10, 3); `

## باھالاشلار

![](https://secure.gravatar.com/avatar/d4f42271a068c598d6a2a3410ec3a036854032e6ff5928a6d159e01fe476f064?
s=60&d=retro&r=g)

### 󠀁[What I was looking for](https://wordpress.org/support/topic/what-i-was-looking-for-74/)󠁿

 [icke2011](https://profiles.wordpress.org/icke2011/) 2025-يىلى 26-ئىيۇن

Thank you for this Plugin… something very easy. Its great to see such gems after
trying so many other plugins claiming what they cannot do. It even looks nice. It
fulfils my requirements as a beginner. Very well done.

 [ 1 باھالاشنىڭ ھەممىنى ئوقۇش ](https://wordpress.org/support/plugin/sb-chart-block/reviews/)

## تۆھپىكار ۋە ئىجادكار

«SB Chart block» كودى ئوچۇق يۇمشاق دېتال. تۆۋەندىكى كىشىلەر بۇ قىستۇرمىغا تۆھپە 
قوشقان.

تۆھپىكار

 *   [ bobbingwide ](https://profiles.wordpress.org/bobbingwide/)

[«SB Chart block» نى تىلىڭىزغا تەرجىمە قىلىڭ](https://translate.wordpress.org/projects/wp-plugins/sb-chart-block)

### ئىجادىيەتكە قىزىقامسىز؟

[كودقا كۆز يۈگۈرتۈپ](https://plugins.trac.wordpress.org/browser/sb-chart-block/)،
[SVN خەزىنە](https://plugins.svn.wordpress.org/sb-chart-block/) تەكشۈرۈپ ياكى [RSS](https://plugins.trac.wordpress.org/log/sb-chart-block/?limit=100&mode=stop_on_copy&format=rss)
ئارقىلىق [ئىجادىيەت خاتىرىسى](https://plugins.trac.wordpress.org/log/sb-chart-block/)
گە مۇشتەرى بولغىلى بولىدۇ.

## ئۆزگىرىش خاتىرىسى

#### 1.3.1

 * Changed: Run esc_attr() against the classNames attribute. Props: Peter Thaleikis(
   Wordfence) #38
 * Changed: Support PHP 8.4’s str_getcsv() changes #38
 * Tested: With WordPress 6.8 and WordPress Multisite
 * Tested: With PHP 8.3 and PHP 8.4
 * Tested: With PHPUnit 9.6

## Meta

 *  Version **1.3.1**
 *  ئاخىرقى يېڭىلانغان ۋاقىت **12 ئاي بۇرۇن**
 *  ئاكتىپ ئورنىتىش سانى **300+**
 *  WordPress نەشرى ** 5.6.0 ياكى يۇقىرى **
 *  **6.8.5** دا سىنالغان
 *  PHP نەشرى ** 7.2.0 ياكى يۇقىرى **
 *  تىل
 * [English (US)](https://wordpress.org/plugins/sb-chart-block/)
 * بەلگە
 * [Bar chart](https://ug.wordpress.org/plugins/tags/bar-chart/)[block](https://ug.wordpress.org/plugins/tags/block/)
   [Line chart](https://ug.wordpress.org/plugins/tags/line-chart/)[pie chart](https://ug.wordpress.org/plugins/tags/pie-chart/)
 *  [ئالىي كۆرۈنۈش](https://ug.wordpress.org/plugins/sb-chart-block/advanced/)

## دەرىجە

 5/5 يۇلتۇز

 *  [  1 5-star review     ](https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/sb-chart-block/reviews/#new-post)

[بارلىق ئىنكاسنى كۆرسەت](https://wordpress.org/support/plugin/sb-chart-block/reviews/)

## تۆھپىكار

 *   [ bobbingwide ](https://profiles.wordpress.org/bobbingwide/)

## قوللاش

چۈشەندۈرۈشىڭىز بارمۇ؟ ياردەم لازىممۇ؟

 [قوللاش مۇنبىرىنى كۆرسەت](https://wordpress.org/support/plugin/sb-chart-block/)