PHPackages                             fiedsch/vuetaocharts-ce - 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. [Utility & Helpers](/categories/utility)
4. /
5. fiedsch/vuetaocharts-ce

ActiveContao-module[Utility & Helpers](/categories/utility)

fiedsch/vuetaocharts-ce
=======================

Charts withe Vue.js as Contao content elements

v0.1.4(8y ago)04MITPHPPHP >=5.6

Since Apr 1Pushed 8y ago1 watchersCompare

[ Source](https://github.com/fiedsch/vuetaocharts-ce)[ Packagist](https://packagist.org/packages/fiedsch/vuetaocharts-ce)[ RSS](/packages/fiedsch-vuetaocharts-ce/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (3)Versions (3)Used By (0)

Vuetao Charts -- Charts with Vue.js for Contao
==============================================

[](#vuetao-charts----charts-with-vuejs-for-contao)

Overview
--------

[](#overview)

The extension consists of two parts

- Code for dynamic SVG-charts with Vue.js (see  for the Vue.js components. Also make sure to visit  and read the guide).
- A Contao content element that let's you embed the chart and provide the chart's data.

Usage
-----

[](#usage)

The extension provides a new Contao content element.

- insert into article as usual
- edit the "data" field and provide the chart's data as JSON. Example:

```
{
    "chart_data": [
        {
            "label": "Foo",
            "value": 61.1
        },
        {
            "label": "Bar",
            "value": 18.6
        },
        {
            "label": "Baz",
            "value": 20.3
        }
    ]
}
```

You may provide arbitrary additional data in the JSON data field which you can use to extend the chart.

An example für the donut chart:

```
{
    "headline": "The Headline for the Chart",
    "chart_data": [ /* as above */ ]
}
```

Next you create a new Contao template as usual (e.g. by cloning `ce_vtcdonut`). Make sure, your template's name also starts with `ce_vtc`, which enables you to select it in your content element.

```