PHPackages creative-web-solution/svg-chart-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. creative-web-solution/svg-chart-bundle ActiveSymfony-bundle[Templating & Views](/categories/templating) creative-web-solution/svg-chart-bundle ====================================== Light and simple SVG chart for Symfony. 1.0.1(6y ago)0393↓50%MITPHPPHP ^7.1 Since Jan 28Pushed 6y ago3 watchersCompare [ Source](https://github.com/creative-web-solution/svg-chart-bundle)[ Packagist](https://packagist.org/packages/creative-web-solution/svg-chart-bundle)[ RSS](/packages/creative-web-solution-svg-chart-bundle/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (1)Versions (3)Used By (0) SVG Chart ========= [](#svg-chart) [![Charts example](chart.png)](chart.png) Symfony requirement ------------------- [](#symfony-requirement) - [meyfa/php-svg](https://packagist.org/packages/meyfa/php-svg) Pie/Donut chart --------------- [](#piedonut-chart) ### Example [](#example) ``` use Cws\Bundle\SVGChartBundle\SVGChart\SVGChart; $conf = json_decode(file_get_contents('pie_chart_data.json')); $response = new Response( SVGChart::createPie( $conf->data, $conf->styles ) ); $response->headers->set('Content-Type', 'image/svg+xml'); return $response; ``` ### Configuration [](#configuration) Inside the `pie_chart_data.json` file: ``` { "data": [ // Only the first element will be processed (one pie/donut per chart) { "values": [ { "value" : 0.88, "color" : "#58595b", "label" : "0,88€", "id" : "arc-1" }, ... ] } ], "styles": { "center" : { "x" : 250, "y" : 180 }, // Display of the labels "legend" : { "labelCssClass" : "label label-slice", "textHeight" : 30, "textMaxWidth" : 100, // Optional "textTemplate" : "{{TEXT}}", // Line between the legend and the donut slice "hasLine" : true, "lineColor" : "#000000", "lineCssClass" : "legend-line", // Only used on pie mode. // Position of the start of the legend line between the border and the center of the chart in percent (value between 0 and 1) "lineOffset" : 0.75 }, // Only used on donut mode // Legend in the center of the donut "donutMainLegend" : { "label" : "2015", "cssClass" : "main-legend" }, // There are 2 display mode: pie and donut "mode" : "donut", // External radius "radius" : 140, // Starting angle "angleOffset" : 120, //Size of the SVG element "width" : 500, "height" : 360, "cssClass" : "pie-chart", "cssSliceClass" : "slice", // Only used on donut mode "donutThickness" : 60 } } ``` Lines chart ----------- [](#lines-chart) ### Example [](#example-1) ``` use Cws\Bundle\SVGChartBundle\SVGChart\SVGChart; $conf = json_decode(file_get_contents('lines_chart_data.json')); $response = new Response( SVGChart::createLines( $conf->data, $conf->styles ) ); $response->headers->set('Content-Type', 'image/svg+xml'); return $response; ``` ### Configuration [](#configuration-1) Inside the `lines_chart_data.json` file: ``` { "data": [ // All elements will be processed (several lines on the same chart) { // Line properties "color" : "#9bc340", "thickness" : 5, "id" : "line-1", "cssClass" : "line", // Bullets properties (circle placed on each point of the line) "displayBullets" : true, // If displayBullets is false, you don't need the following properties "bulletColor" : "#ffffff", "bulletRadius" : 5, "bulletStroke" : "#000", "bulletStrokeWidth" : 2, "baseBulletId" : "line-1-bullet", "cssBulletClass" : "bullet", "cssBulletListClass" : "bullets", // All value of the lines "values" : [ { "value" : 27500, "label" : "27 500" }, ... ] }, // Other lines ... ], "styles": { // Display of the abscissa and ordinate line "axes" : { "abs" : { "color" : "#9b9b9b", "thickness" : 1, "isDisplayed" : true, "wrapperCssClass" : "labels-abs", "labelCssClass" : "label label-abs", "labels" : [ { "label" : "Jan." }, { "label" : "Feb." }, ... ] }, "ord" : { "color" : "#c5c5c5", "thickness" : 1, "isDisplayed" : true, "wrapperCssClass" : "labels-ord", "labelCssClass" : "label label-ord", // Offset between the top of the ordinate line and the first line of the grid "marginY" : 10, "min" : 20000, "max" : 36000, "step" : 2000 } }, // Display of the grid behind the chart "grid" : { "horizontal" : { "color" : "#c5c5c5", "isDisplayed" : true, "thickness" : 1 }, "vertical" : { "color" : "#323232", "isDisplayed" : true, "thickness" : 1 } }, // Size and position of the chart inside the SVG element "canvas" : { // Margin between the ordinate line and the first point of the lines. // Same margin between the last point of the lines and the right side of the chart "marginX" : 20, "top" : 80, "left" : 60, "width" : 1000, "height" : 170 }, // Size of the SVG element "width" : 1000, "height" : 280, "cssClass" : "lines-chart", "linecap" : "round", "linejoin" : "round" } } ``` Bars chart ---------- [](#bars-chart) ### Example [](#example-2) ``` use Cws\Bundle\SVGChartBundle\SVGChart\SVGChart; $conf = json_decode(file_get_contents('bars_chart_data.json')); $response = new Response( SVGChart::createBars( $conf->data, $conf->styles ) ); $response->headers->set('Content-Type', 'image/svg+xml'); return $response; ``` ### Configuration [](#configuration-2) Inside the `bars_chart_data.json` file: ``` { "data": [ // Only the first element will be processed (one set of bar per chart) { "values": [ { "value" : 8800, "label" : "8 800€", "color" : "#58595b", "stroke" : "none", "id" : "bar-1" }, ... ] } ], "styles": { // Display of the abscissa and ordinate line "axes" : { "abs" : { "color" : "#9b9b9b", "thickness" : 1, "isDisplayed" : true, "wrapperCssClass" : "labels-abs", "labelCssClass" : "label label-abs", // If null, the width of the bars will be computed using the width of the chart canvas (see canvas properties below). Otherwise, the size is in px "barWidth" : null, // Size between bars in px "barGap" : 50, "labels" : [ { "label" : "Jan." }, { "label" : "Feb." }, ... ] }, "ord" : { "color" : "#9b9b9b", "thickness" : 1, "isDisplayed" : true, "wrapperCssClass" : "labels-ord", "labelCssClass" : "label label-ord", // Offset between the top of the ordinate line and the first line of the grid "marginY" : 10, "min" : 5000, "max" : 45000, "step" : 5000 } }, // Display of the horizontal lines behind the bars "grid" : { "horizontal" : { "color" : "#c5c5c5", "isDisplayed" : true, "thickness" : 1 } }, // Size and position of the chart inside the SVG element "canvas" : { // Margin between the ordinate line and the first point of the lines. // Same margin between the last point of the lines and the right side of the chart "marginX" : 20, "top" : 80, "left" : 60, "width" : 940, "height" : 170 }, // Size of the SVG element "height" : 360, "width" : 1000, "cssClass" : "bars-chart", // Properties of each bar "cssBarClass" : "bar", // stroke "linecap" : "square", "linejoin" : "square", "thickness" : 1 } } ``` ### Health Score 27 — LowBetter than 49% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity15 Limited adoption so far Community8 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 2302d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/45b1fad7ac68a5b360b3e075470d6ba12f054e21d40402aa209e8a13875bd408?d=identicon)[ChristopheDufourg](/maintainers/ChristopheDufourg) --- Top Contributors [![ChristopheDufourg](https://avatars.githubusercontent.com/u/38108071?v=4)](https://github.com/ChristopheDufourg "ChristopheDufourg (12 commits)") --- Tags bundlechartsvgsymfonybundlechartsymfony4cwscreative-web-solution ### Embed Badge ![Health badge](/badges/creative-web-solution-svg-chart-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/creative-web-solution-svg-chart-bundle/health.svg)](https://phpackages.com/packages/creative-web-solution-svg-chart-bundle) ``` ### Alternatives [knplabs/knp-paginator-bundle Paginator bundle for Symfony to automate pagination and simplify sorting and other features 1.8k42.8M315](/packages/knplabs-knp-paginator-bundle)[twig/extra-bundle A Symfony bundle for extra Twig extensions 91492.0M315](/packages/twig-extra-bundle)[endroid/qr-code-bundle Endroid QR Code Bundle 32110.6M17](/packages/endroid-qr-code-bundle)[qossmic/rich-model-forms-bundle Provides additional data mapper options that ease the use of the Symfony Form component with rich models. 218278.7k](/packages/qossmic-rich-model-forms-bundle)[cmen/google-charts-bundle This Bundle provides a Twig extension and PHP objects to display Google charts in your Symfony application. 76844.8k2](/packages/cmen-google-charts-bundle)[emanueleminotto/twig-cache-bundle Symfony 2 Bundle for twigphp/twig-cache-extension 59678.3k4](/packages/emanueleminotto-twig-cache-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)