logo

piechart - Create a Pie Chart

Version: 1.0.0
Credits: 3

Creates a pie chart with custom data and styling. Output can be an image or a PDF.
A pie chart is a type of chart that displays data as a circle divided into segments, with each segment representing a proportion of the whole. It is useful for showing how a particular data set is divided into parts and how each part contributes to the whole. For example, a pie chart can be used to show the percentage breakdown of sales by product category in a business. The size of each segment is determined by the value it represents in relation to the other segments, with the whole circle representing 100%. Pie charts are commonly used in business, finance, and other fields to help visualize data in an easily understandable way.

Sample output:

Set type=pie piechart.png

Set type=donut donut.png

To add the chart as an attachment in an email, you can generate the chart as an image or PDF using the function and then attach the resulting file to your email. You can also embed it by generating a base64 image based on using the function files/asset2base64

The function is built on the Chart.js library, which is an open-source JavaScript library that allows developers to create interactive and customizable charts for web applications. Chart.js offers a variety of chart types, including bar charts, line charts, pie charts, and more, and provides extensive options for styling and customization.

You can find more information about Chart.js on their homepage: https://www.chartjs.org/

data
Type
array<object>
Required
required
An array of data to be displayed
Minimum: 1
Example:
[
  {
    "label": "January",
    "value": 65,
    "backgroundColor": "#FF6384"
  },
  {
    "label": "February",
    "value": 39,
    "backgroundColor": "#FF9F40"
  },
  {
    "label": "March",
    "value": 49,
    "backgroundColor": "#FFCD56"
  },
  {
    "label": "April",
    "value": 72,
    "backgroundColor": "#4BC0C0"
  },
  {
    "label": "May",
    "value": 93,
    "backgroundColor": "#36A2EB"
  },
  {
    "label": "June",
    "value": 84,
    "backgroundColor": "#9966FF"
  }
]
backgroundColor
Type
HEX Color
The background color of your pie slice. Defaults to #000000 if no color is provided.
Example:
#FF9F4033
label
Type
string
Required
required
The text to associate with your value
Example:
January
value
Type
number
Required
required
The value of your entry
Example:
100
options
Type
object
Options to customize your chart.
Example:
{
  "title": "PieChart / Donut Generation for Automation Platforms with 1001fx",
  "titleAlignment": "center",
  "titleColor": "#2563EB",
  "subtitle": "Automatic piechart / donut generation from your data as image and PDF. Highly customizable.",
  "subtitleAlignment": "center",
  "subtitleColor": "#333333",
  "fontFamily": "Roboto",
  "titleFontSize": 32,
  "subtitleFontSize": 16,
  "dataLabelAnchor": "end",
  "dataLabelAlignment": "end",
  "dataLabelFontSize": 18,
  "legendPosition": "top",
  "legendFontSize": 18
}
legendHidden
Type
boolean
When true hides the legend. Defaults to false.
Example:
legendPosition
Type
string
Where to place your legend. Defaults to top.
Possible values are: left, top, right, bottom
Example:
bottom
legendFontSize
Type
number
The legend's font size.
Example:
18
title
Type
string
The title to be displayed above your chart.
Example:
Anual Report
titleAlignment
Type
string
Where to place your chart title. Defaults to center.
Possible values are: start, center, end
Example:
left
titleColor
Type
HEX Color
The title's color. Defaults to #000000 if no color is provided.
Example:
#36A2EB
titleFontSize
Type
number
The title's font size.
Example:
18
subtitle
Type
string
The subtitle to be displayed above your chart.
Example:
Anual Report
subtitleAlignment
Type
string
Where to place your chart subtitle. Defaults to center.
Possible values are: start, center, end
Example:
left
subtitleColor
Type
HEX Color
The subtitle's color. Defaults to #000000 if no color is provided.
Example:
#4BC0C0
subtitleFontSize
Type
number
The subtitleFontSize's font size.
Example:
18
backgroundColor
Type
HEX Color
The chart's backgroundColor. Defaults to #ffffff if no color is provided.
Example:
#FFCD56
padding
Type
number
The padding around your chart. Defaults to 50.
Example:
25
fontFamily
Type
string
The font to use in your chart.
Possible values are: Alegreya, Barlow, Inter, Lato, Montserrat, OpenSans, Oswald, Poppins, PTSans, Raleway, Roboto
Example:
Roboto
dataLabelAnchor
Type
string
Anchor position of your element. Defaults to center.
Possible values are: start, center, end
Example:
start
dataLabelAlignment
Type
string
Defines the position of the label relative to the anchor point. Defaults to center.
Possible values are: start, center, end, left, top, right, bottom
Example:
top
dataLabelFontSize
Type
number
The data label's font size
Example:
10
dataLabelOffset
Type
number
Offset from the anchor point. Defaults to 0.
Example:
10
dataLabelsHidden
Type
boolean
When true hides all data labels. Defaults to false.
Example:
dataLabelClamp
Type
boolean
When true enforces the anchor position to be calculated based on the visible geometry of the associated element. Defaults to false.
Example:
type
Type
string
How to display your chart. Defaults to pie.
Possible values are: pie, donut
Example:
pie
outputFormat
Type
string
Required
required
The desired output format.
Possible values are: pdf, png, jpg
Example:
png

Available on

Postman
Make
Zapier
N8N
Airtable
SeaTable
Bubble
Power Automate
Workato
SAP Build