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:
| Tip |
|---|
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.
| Tip |
|---|
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) |