Comment on page
Charts
Manual for proper chart usage
Currently we support five kinds of charts in your template
- 1.Bar chart - both horizontal and vertical with ability to stack y-axis
- 2.Line chart
- 3.Pie chart
- 4.Doughnut chart - uses pie chart menu with the ability to set the cutout percentage to create doughnut chart
- 5.Radar chart
Generally, you would have JSON data that looks like this for your modification,
{
"template": "bfba4ccf-7153-4ae4-9e2e-6c736eaffef5",
"modifications": [
{
"name": "radar_chart_4",
"labels": [
"Speed",
"Passing",
"Dribbling",
"Defense",
"Attacking",
"Heading"
],
"datasets": [
{
"backgroundColor": "rgba(0, 112, 0, 0.5)",
"data": [
89,
95,
70,
40,
90,
80
],
"label": "Player #1"
}
]
}
]
}
Chart modification data consists of two main fields,
Field | Description |
labels | List of labels for the data |
datasets | List of dataset object |
Dataset object consists of three fields,
Field | Description |
data | List of numbers. The index of the number corresponds to the index of the labels |
label | The label or title for the dataset |
backgroundColor | Either a color formatted string or a list of color formatted strings |
The format depends on the type of chart.
Color formatted string,
- Bar chart
- Line chart
- Radar chart
List of color formatted strings,
- Pie chart
- Doughnut chart
Color must be formatted according to these formats,
- Hex -
#FFFFFF
- RGBA -
rgba(255, 255, 105, 0.8)
which support alpha transparency
Pie and doughnut charts needs to take list of colors because each color represent each cut out, while the other type of charts only need a single color to represent the data.
Our API will validate your modification and return a user friendly error message. However, it is useful to know what is considered as a valid chart modification because chart can be trickier than the rest of the template's objects.
- 1.
labels
must be unique - 2.
labels
length must match the length of thedata
- 3.Dataset's
label
must be unique - 4.If
backgroundColor
requires list of colors, then the length must match the length of thelabels
- 5.
backgroundColor
must have the right format i.e. either hex or RGBA value
Don't worry about the complexity. Our API will return proper error messages when any of the rules are not met.

Use our built-in Test API Console to know which modification are available
It is also a good idea to play around in our Test API Console page to get a feel about the correct modification. Only successful image generation will count towards your quota.
Template editor comes with an easy to use data editor in case you want to create a static chart (not modified through API) or to create a default chart which can be overridden through API.

Data editor user interface
Data editor comes in two modes,
- User friendly UI that validates the data as you type and will generate the proper JSON.
- JSON editor that allows you write the JSON yourself.
In both mode, data will always be validated so you don't have to worry about making mistake. The error will guide you on what to fix.
As mentioned, you can create a default chart with all the colors and styles using data editor.
When sending the image creation request, you can choose to override the data and use the colors set with by the data editor. To do this, send the request with the same dataset
label
that you want to override.Sample JSON generated by data editor
{
"labels": [
"Passing",
"Dribbling"
],
"datasets": [
{
"label": "Player #1",
"data": [
95,
70
],
"backgroundColor": "rgba(0, 112, 0, 0.5)"
}
]
}
You can send a modification request like so to override the
data
and use existing backgroundColor
Modification Request
Response
{
"template": "bfba4ccf-7153-4ae4-9e2e-6c736eaffef5",
"modifications": [
{
"name": "radar_chart_4",
"datasets": [
{
"data": [
30,
40,
],
"label": "Player #1"
}
]
}
]
}
{
"labels": [
"Passing",
"Dribbling"
],
"datasets": [
{
"label": "Player #1",
"data": [
30,
40
],
"backgroundColor": "rgba(0, 112, 0, 0.5)"
}
]
}
It is important that you set the same dataset's
label
in the modification request so it knows which dataset to merge with.Last modified 2yr ago