Bar charts present categorical data with rectangular bars with heights or lengths proportional to the values they represent.
Vertical
To place the columns vertically, set chart.type to bar:
Vertical bars are always easy to read on mobile devices. In case there are many categories, the end user will scroll vertically instead of horizontally.
Bar.groovy
ResultHighchart verticalBars(
String title,
List<String> categories,
List<Map<String, Object>> series
) {
return api.buildHighchart([
chart: [
type: 'bar', // ❶
],
credits: [
enabled: false, // Hide the Highcharts link
],
title: [
text: title,
],
xAxis: [
categories: categories,
],
yAxis: [
min: 0,
title: title
],
series: series
])
}
❶ Places the bars vertically.
BarChartVertical.groovy
def bar = libs.Library_Charts.Bar
String title = 'Sales per Quarter & Region'
def categories = [
'2019-Q1', '2019-Q2', '2019-Q3', '2019-Q4',
'2020-Q1', '2020-Q2', '2020-Q3', '2020-Q4',
]
def series = [[
name: 'EMEA',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
], [
name: 'APAC',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3]
]]
return bar.verticalBars(title, categories, series)
Horizontal
To place the columns horizontally, set chart.type to column. Horizontal bars are typically used to display time dependent data.
Horizontal bar charts can become difficult to read if there are many categories, especially on mobile devices. Consider using vertical bars instead.
Bar.groovy
ResultHighchart horizontalBars(
String title,
List<String> categories,
List<Map<String, Object>> series
) {
return api.buildHighchart([
chart: [
type: 'column', // ❶
],
credits: [
enabled: false, // Hide the Highcharts link
],
title: [
text: title,
],
xAxis: [
categories: categories,
],
yAxis: [
min: 0,
title: title
],
series: series
])
}
❶ Places the bars horizontally.
BarChartHorizontal.groovy
def bar = libs.Library_Charts.Bar
String title = 'Sales per Quarter & Region'
def categories = [
'2019-Q1', '2019-Q2', '2019-Q3', '2019-Q4',
'2020-Q1', '2020-Q2', '2020-Q3', '2020-Q4',
]
def series = [[
name: 'EMEA',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
], [
name: 'APAC',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3]
]]
return bar.verticalBars(title, categories, series)