{"active_installs":300,"added":{"timestamp":1618876800,"timezone":"UTC"},"author":"bobbingwide","author_profile":{"url":"https://profiles.wordpress.org/bobbingwide/","alt":"bobbingwide"},"banners":[{"type":"high","url":"f"},{"type":"low","url":"https://ps.w.org/sb-chart-block/assets/banner-772x250.jpg?rev=2519069"}],"changelog":"

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

\n","contributors":[{"slug":"bobbingwide","name":"bobbingwide","count":16,"is_owner":true,"links":{"profile":{"url":"https://profiles.wordpress.org/bobbingwide/","alt":"bobbingwide's profile"},"plugins":{"url":"https://profiles.wordpress.org/bobbingwide/#content-plugins","alt":"bobbingwide's plugins"},"activity":{"url":"https://profiles.wordpress.org/bobbingwide/#content-activity","alt":"bobbingwide's activity"},"translations":{"url":"https://profiles.wordpress.org/bobbingwide/#content-translations","alt":"bobbingwide's translations"}}}],"description":"

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

\n","downloaded":7691,"faq":"\n

\nWhat types of chart can I display?\n\n

So far…

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

\nHow do I choose the chart colors?\n\n

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

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

\nWhat options are there?\n\n

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

\nWhat Chart script does it use?\n\n

v1.2.6 delivers chartjs v4.4.2
\nand chartjs-adapter-date-fns v3.0.0

\nWhat do I need to search for to find the block?\n\n

Chart or SB Chart

\nWhat if my first language is not English?\n\n

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

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

\nDo I need to build this block?\n\n

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

\nAre there shortcodes available?\n\n

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

[chartjs attribute=\"attribute value\"]CSV content[/chartjs]\n

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

[chartjs attribute1=\"attribute1 value\" attribute2=\"attribute2 value\"]CSV content[/chartjs]\n

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\n2020-08,5421.32,1151.21\n2021-02,4823.99,887.23\n2021-03,4945.32,958.00\n2021-10,7086.65,1854.35\n2022-05,7385.21,2009.01\n[/chartjs]\n

Here’s the result:

\nAre there hooks available for developers?\n\n

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\n

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

$custom_options['plugins']['legend']['labels']['font']['size'] = 16;\n$custom_options['plugins']['legend']['labels']['color'] = '#0000FF';\n\nreturn json_decode(json_encode($custom_options));\n

}
\nadd_filter(‘sb_chart_block_options’, ‘customize_legend’, 10, 3);

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

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

}
\n `

Here’s another way (without array conversion):

`php\n

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

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

}
\nadd_filter(‘sb_chart_block_options’, ‘customize_legend’, 10, 3);
\n `

\n\n","homepage":"https://www.oik-plugins.com/oik-plugins/sb-chart-block","icons":[{"type":"1x","url":"https://ps.w.org/sb-chart-block/assets/icon-256x256.jpg?rev=2518242"},{"type":"2x","url":"https://ps.w.org/sb-chart-block/assets/icon-256x256.jpg?rev=2518242"}],"installation":"

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

OR with the authority to install plugins

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

\n","internal_ranking":0,"languages":[],"last_seen":{"timestamp":1776427811.494,"timezone":"UTC"},"last_updated":{"timestamp":1744967700,"timezone":"UTC"},"last_wordpress_compatible_version":"6.8.5","latest_num_ratings":1,"latest_rating":5,"latest_ratings":{"1":0,"2":0,"3":0,"4":0,"5":1,"links":{"1":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=1","alt":"View all 0 one star reviews"},"2":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=2","alt":"View all 0 two star reviews"},"3":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=3","alt":"View all 0 three star reviews"},"4":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=4","alt":"View all 0 four star reviews"},"5":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=5","alt":"View all 1 five star reviews"},"all":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/","alt":"View all 1 reviews"}}},"minimum_php_version":"7.2.0","minimum_wordpress_version":"5.6.0","name":"SB Chart block","num_ratings":1,"pluginid":"sb-chart-block","rating":5,"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1,"links":{"1":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=1","alt":"View all 0 one star reviews"},"2":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=2","alt":"View all 0 two star reviews"},"3":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=3","alt":"View all 0 three star reviews"},"4":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=4","alt":"View all 0 four star reviews"},"5":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/?filter=5","alt":"View all 1 five star reviews"},"all":{"url":"https://wordpress.org/support/plugin/sb-chart-block/reviews/","alt":"View all 1 reviews"}}},"reviews":[],"screenshots":"

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

","short_description":"Displays a Chart for CSV content.","support_threads":0,"support_threads_resolved":0,"tags":[{"slug":"block","label":"block","count":1154},{"slug":"bar","label":"bar","count":134},{"slug":"chart","label":"chart","count":95},{"slug":"line","label":"line","count":30},{"slug":"pie-chart","label":"pie chart","count":12},{"slug":"bar-chart","label":"Bar chart","count":4},{"slug":"horizontal-bar","label":"Horizontal bar","count":1},{"slug":"line-chart","label":"Line chart","count":1},{"slug":"horizontal-bar-chart","label":"Horizontal bar chart","count":1}],"tags_count":1432,"languages_count":0,"age_days":1857.012752198993,"installs_per_rating":300,"downloads_per_rating":7691,"installs_per_day":0.16154977915189497,"downloads_per_day":4.141597838190748,"reviews_per_day":0.0005384992638396499,"activation_rate":0.03900663112729164,"version":"1.3.1","marketplace":"wordpress","marketplace_url":"https://wordpress.org/plugins/sb-chart-block","price":null,"wordpress_link":{"alt":"WordPress","url":"https://wordpress.org/plugins/sb-chart-block"}}

Alternatives to SB Chart block

Top alternatives