logo

linechart - Create a Line Chart

Version: 1.0.0
Credits: 3

Creates a line chart with custom data and styling. Output can be an image or a PDF.
This function creates a line chart with custom data and styling. It can output the chart as an image or a PDF. The function accepts several properties to customize the chart, such as labels and data to display, border color, fill color, and curve tension.

One feature of this function is that it allows adding more than one line to the chart by including an array of objects in the data property. Each object in the data array represents a dataset and can include a label, values, border color, fill color, and curve tension.

Sample output:

linechart.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/

labels
Type
array<string>
Required
required
An array of labels to display.
Minimum: 1
Example:
[
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July"
]
data
Type
array<object>
Required
required
An array of data to be displayed
Minimum: 1
Example:
[
  {
    "label": "Expectations",
    "values": [
      30,
      35,
      58,
      51,
      81,
      23,
      77
    ],
    "borderColor": "#a0a0a0",
    "tension": 0.5,
    "borderDash": [
      5,
      15
    ]
  },
  {
    "label": "Value",
    "values": [
      10,
      15,
      38,
      31,
      91,
      43,
      67
    ],
    "borderColor": "#FF9F40",
    "fillColor": "#FF9F4033",
    "tension": 0.5
  },
  {
    "label": "Base Line",
    "values": [
      5,
      10,
      15,
      20,
      25,
      30,
      35
    ],
    "borderColor": "#4BC0C0",
    "fillColor": "#4BC0C033"
  }
]
label
Type
string
Required
required
The text to associate with your dataset.
Example:
2022
values
Type
array
Required
required
The values of your dataset.
Minimum: 1
Example:
[
  65,
  59,
  80,
  81,
  56,
  55,
  40
]
borderColor
Type
HEX Color
The border color of your bar. Defaults to #000000 if no color is provided.
Example:
#FF9F40
borderDash
Type
array
Length and spacing of dashes.
Example:
[
  5,
  15
]
fillColor
Type
HEX Color
The fill color between your line and the axis.
Example:
#FF9F4033
tension
Type
number
Bezier curve tension of the line. Set to 0 to draw straightlines. Defaults to 0.
Example:
0.5
options
Type
object
Options to customize your chart.
Example:
{
  "title": "Linechart Generation for Automation Platforms with 1001fx",
  "titleAlignment": "center",
  "titleColor": "#2563EB",
  "subtitle": "Automatic linechart generation from as image and PDF. Highly customizable.",
  "subtitleAlignment": "center",
  "subtitleColor": "#333333",
  "fontFamily": "Roboto",
  "titleFontSize": 20,
  "subtitleFontSize": 16,
  "axisTitleFontSize": 16,
  "axisFontSize": 16,
  "dataLabelAnchor": "start",
  "dataLabelAlignment": "top",
  "dataLabelFontSize": 16,
  "indexAxis": "x"
}
indexAxis
Type
string
The base axis. Defaults to x.
Possible values are: x, y
Example:
y
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:
yAxisTitle
Type
string
Text to be displayed on the y axis.
Example:
Month
xAxisTitle
Type
string
Text to be displayed on the x axis.
Example:
Value
axisTitleFontSize
Type
number
The axis title's font size.
Example:
18
axisTitleColor
Type
HEX Color
The axis title's color. Defaults to #000000 if no color is provided.
Example:
#4BC0C0
gridColor
Type
HEX Color
The grid's color. Defaults to #f2f2f2 if no color is provided. Hide by setting to same as chart background color.
Example:
#4BC0C0
axisColor
Type
HEX Color
The grid's color. Defaults to #a0a0a0 if no color is provided. Hide by setting to same as chart background color.
Example:
#9966FF
axisFontSize
Type
number
The axis's font size.
Example:
18
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