Skip to main content

Bar Charts

Add the component to the canvas

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

Library Bar

The bar chart should show on the screen.

Library Bar

Configure Options

Library Bar

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.

BarChart Labels

The barChart Labeles 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.

Bar Chart Data Series

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

Table(
{
label: "Goals For",
backgroundColor: "#008000",
borderColor: "#008400",
borderWidth:1,
data: "3,3,4,6,2,3"
},
{
label: "Goals Against",
backgroundColor: "#FF8000",
borderColor: "#FF8400",
borderWidth:1,
data:"4, 2, 2, 6, 9, 12, 1,4"
},
{
label: "Yellow Cards",
backgroundColor: "#FFC000",
borderColor: "#FFC400",
borderWidth:1,
data:"2, 0, 8, 5, 4, 3, 4,6"
}, {
label: "Red Cards",
backgroundColor: "#FF0000",
borderColor: "#FF4000",
borderWidth:1,
data:"0, 0, 0, 1, 0, 0, 0,1"
}
)

Bar Chart Title

Text for the Chart Title

ShowTitle

Boolean whether to show the title in the graph.

RoundedBars

Boolean to show the bars with rounded ends.

Orientation

Horizontal or Vertical bars

Stacked

Show data as stacked.

TitleFontSize

font Size for the Title.|

LegendFontSize

Legend font size.