Bar charts presents 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 verically 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
])
}
❶ Place the bars vertically.
Use as such
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, sepcially 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
])
}
❶ Place the bars horizontally
Use as such
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)