SVG charts for Kirby v3
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Martin Folkers cc4488ddde
Bump version
2 months ago
blueprints Initial commit 5 months ago
src Initial commit 5 months ago
tests Add tests 2 months ago
vendor Remove testing deps from 'vendor' 2 months ago
.editorconfig Initial commit 5 months ago
.gitattributes Initial commit 5 months ago
.gitignore Initial commit 5 months ago
.php_cs Initial commit 5 months ago
.woodpecker.yml Add tests 2 months ago
LICENSE Initial commit 5 months ago Add tests 2 months ago
composer.json Bump version 2 months ago
example.svg Fix 'example.svg' dimensions 5 months ago
index.php Fix inline SVG depending on '$file' permissions 2 months ago
phpunit.xml Initial commit 5 months ago



A Kirby v3 plugin for creating SVG charts - batteries included.


kirby3-charts is a Kirby v3 wrapper for SVGGraph, as such there are (almost) no limits to what kind of chart may be created.


Install this package with Composer:

composer require fundevogel/kirby3-charts


In order to generate a chart, we need some data first. The page method toChart() accepts an array of data points as first argument - basically two or more arrays, each of which consists of color (string) and share (float):

$data = [
    ['title' => 'HTML', 'color' => '#4F5D95', 'share' => 0.6],
    ['title' => 'CSS', 'color' => '#2b7489', 'share' => 0.4],


There's also a field method toChart() suitable for structure fields. The included example blueprint fields/chart is a good starting point & looks basically like this:

type: structure
    label: Title
    type: text

    label: share
    type: number
    step: .01

    label: Color
    type: text

Both methods take another two arrays for further customization:

# SVG settings
$settings = [
    'width' => 100,
    'height' => 100,
    'type' => 'DonutGraph',
    'inline' => false,

# Options depend on the type of chart (in this example 'DonutGraph'),
# see
$options = [
    'inner_radius' => 2,
    'stroke_width' => 0.5,
    'show_labels' => true,

    # .. etc

# Page method
$page->toChart($data, $settings, $options);

# Field method
$page->chartData()->toChart($settings, $options);

Note: Both methods return a file object of the newly created SVG chart (unless inline is activated) for further use.


You may also change certain fallback options from your config.php globally ('fundevogel.charts.optionName'):

Option Type Default Description
'type' string DonutGraph Default chart type to be created
'template' string chart Default file template
'width' int 100 SVG canvas width
'height' int 100 SVG canvas height
'precision' int 2 Rounding precision (-1 = off)
'inline' bool false Return SVG string insead of File


# Create SVG chart as page file
$chart = $page->toChart($data, ['type' => 'DonutGraph'], [
    'donut_slice_gap' => 1.5,
    'inner_radius' => 0.7,
    'start_angle'  => -90,
    'stroke_width' => 0,

Adding more items to the example $data from before and using above code, the generated chart looks like this:



This library is powered by SVGGraph, an extensive library for creating SVG charts, written by goat1000.


kirby3-charts is licensed under the MIT License, but using Kirby in production requires you to buy a license.

Happy coding!