Name: cf Charts
SKU: 3842
Price: 20.00 EUR
Availability: InStock

Charts Element for YOOtheme Pro based on Chart.js

Chart.js

Nearly all options of the popular JavaScript charting library Chart.js are available.

Datasets

Add one or multiple datasets to the chart.

Types

Decide between Bar, Line, Pie, Doughnut, Area, Bubble, Radar or Scatter Charts. You can also mix them!

Axes

Add additional axes or configurate the existing to your needs, e.g. changing the scale and style.

Style

Choose the style of the displayed data, the title, legend and so much more.

Live Data

Reference a link with a json file to update the data whenever the chart is loaded.

Documentation

Every Chart needs at least Labels and one dataset with Data to render properly.

The Labels field has to contain the same amount of elements as your dataset with the most Data values. So this Labels and Data combination
```
January, February, March, April, May
```
```
5, -4, 1.2, 7, -4.9
```
will work and sets the 'January' value to 5, the 'February' Value to -4 and so on.
When the Data is a comma seperated list of numbers, values from Labels at the same index are used for the index axis.

Another method is this internal format used for parsed data:
```
{x: 'Sales', y: 20}, {x: 'Revenue', y: 10}
```
The Data should be sorted in the formats the associated chart type and scales use internally, so x,y for linear charts and r for radial.

Otherwise you have to use the Parsing option to tell the chart keys that point to the values to look at. For Example with
```
{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}
```
you will need to set xAxisKey to 'id' and yAxisKey to 'nested.value'.
The default scales for cartesian charts are x and y and for radial charts r. You can customize these scales by adding an axis with x, y or r as the ScaleId.

By specifying a different ScaleId you will add a new axis to which datasets can be mapped. Just add this scaleId to the X Axis Id, Y Axis Id or R Axis Id of your dataset.
It's good use for additional x, y or r axes to start the ScaleId with the respective letter, like xNew.

If the ID for an axis is not specified, the first scale for that axis is used. If no scale for an axis is found, a new scale is created.

Description

Needs YOOtheme Pro 2.3 or later
Easy to Install as Plugin for Joomla and WordPress
Updates for 180 days after purchase via download
Support via E-Mail for 180 days after purchase
Configurable in YOOtheme Pro builder
No coding needed

cf Simple Form

cf Emotion Accordion

cf Typer

Charts Element for YOOtheme Pro based on Chart.js

Chart.js

Datasets

Types

Axes

Style

Live Data

Check it out!

Documentation

Chart.js

cf Charts

Description

cf Simple Form

cf Emotion Accordion

cf Typer

Changelog

Install

Update

Charts Element for YOOtheme Pro based on Chart.js

Chart.js

Datasets

Types

Axes

Style

Live Data

Check it out!

Documentation

Chart.js

cf Charts

Description

Related products

cf Simple Lottie

cf Modal

cf Simple Form

cf Typer