Skip to main content

Line Charts

Add the component to the canvas

From the Insert menu under Library Components, click on BarChart to add to your canvas.

Library Line

The line chart should show on the screen.

Library Line

Configure Options

Library Line

GraphWidth and GraphHeight

To ensure your graph is responsive set these to Self.Width and Self.Height respectively, once set the graph will automatically scale to the size you set.

GraphPadding

Default: 8

The padding that should be applied to the image container of the graph.

Theme

The theme for your graph, see Chart Theming

QuickChart URL

Default: quickchart.io

Allows you to set the URL to use if you are self hosting.

DarkMode

Default: true

Boolean weather the graph should show in dark or lightmode.

GraphRadius

Default: 0

Allows you to set the radius of the corners of the graph.

LineChart Labels

The LineChart Labels parameter sets the labels on the graph and should be text in the following format:

['label1','label2','label3']

There should be the same number of labels as the values in your datasets.

Line Chart Data Series

The data for the charts is provided to the component in a table with the following format:

Table(
{
label: "Dogs",
backgroundColor: "#004400",
borderColor: "blue",
borderWidth:2,
data: "50, 60, 70, 180, 190",
fill:false
},
{
label: "Cats",
backgroundColor: "#444444",
borderColor: "green",
borderWidth:2,
data:"100, 200, 300, 400, 500",
fill:false
}
)

Line Chart Title

Text for the Chart Title

ShowTitle

Boolean whether to show the title in the graph.