Playbook logo
14.18.0

Bar Graph

Bar graphs are used to compare data. Bar graphs are not typically used to show percentages. The default height of bar graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, height:"50%" would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.


For more information, see: highcharts/chart.height.

Default

Created with Highcharts 11.4.8Number of EmployeesSolar Employment Growth by Sector, 2010-2016Source: thesolarfoundation.comJanFebMarAprMay01k2k3k4k5k

Legend

Created with Highcharts 11.4.8Number of EmployeesBar Graph with LegendNumber of InstallationsJanFebMarAprMay0500100015002000250030003500

Legend Position

align | vertical_align

Created with Highcharts 11.4.8Number of EmployeesAlignment of LegendInstallationManufacturingSales & DistributionProject DevelopmentOtherJan01k2k3k4k5k

layout

Created with Highcharts 11.4.8Number of EmployeesLayout of LegendInstallationManufacturingSales & DistributionProject DevelopmentOtherJan01k2k3k4k5k

x | y

Created with Highcharts 11.4.8Number of EmployeesOffset of LegendInstallationManufacturingSales & DistributionProject DevelopmentOtherJan01k2k3k4k5k

Prop

align Type: String | Values: left | center | right (defaults to center)
verticalAlign Type: String | Values: top | middle | bottom (defaults middle)
layout Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x Type: Number (defaults to 0)
y Type: Number (defaults to 0)

  • layout determines the position of the legend items
    layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.

  • x offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right

  • y offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

Legend Non Clickable

Created with Highcharts 11.4.8Number of EmployeesBar Graph with Legend Non ClickableNumber of InstallationsJanFebMarAprMay0500100015002000250030003500

Height

Created with Highcharts 11.4.8Number of EmployeesFixed Height (300px)JanFebMarAprMay01k2k3k4k


Created with Highcharts 11.4.8Number of EmployeesPercentage Height (50%)JanFebMarAprMay0500100015002000250030003500

Spline

Created with Highcharts 11.4.8Number of EmployeesBar Graph with SplineSource: thesolarfoundation.comNumber of InstallationsTrend LineJanFebMarAprMay0500100015002000250030003500

A spline can be added by including a separate chart data with the type: 'spline' attribute.
A color can also be specified for the spline.

Color Overrides

Created with Highcharts 11.4.8Number of EmployeesBar Graph with Custom Data ColorsJanFebMarAprMay01k2k3k4k5k

Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

Custom Overrides

Created with Highcharts 11.4.8Bar Graph with Custom OverridesRoleCompany0200400600800

The custom_options prop provides comprehensive access to additional Highcharts options that are not explicitly defined as props.
It's important to note that certain options may require specific script imports to function properly.

Stacked

Created with Highcharts 11.4.8Number of EmployeesBar Graph with Stacked ColumnsInstallationManufacturingSales & DistributionJanFebMarAprMay01k2k3k4k5k

The stacking prop can be used for a stacked bar graph. The prop allows for normal or percent as options.

Negative Numbers

Created with Highcharts 11.4.8Number of EmployeesBar Graph with Negative NumbersInstallationManufacturingSales & DistributionJanFebMarAprMay-1500-1000-5000500100015002000

Secondary Y-Axis

Created with Highcharts 11.4.8Number of InstallationsPercentageBar Graph with Secondary Y-axisSource: thesolarfoundation.comNumber of InstallationsPercentageJanFebMarAprMay080016002400320040000%20%40%60%80%100%

Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passingyAxis: 1 to the second node of your chartData array.

To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the axisFormat and axisTitle props, respectively.

Custom Options From Highcharts

Created with Highcharts 11.4.8Historic World Population by RegionSource: Wikipedia.org6316317277273,2023,2027217218148148418413,7143,7147267261,2761,2761,0071,0074,5614,561746746AfricaAmericaAsiaEurope02505007501000125015001750200022502500275030003250350037504000425045004750500050…



Available Props

Props Type Values Default

vertical_align

enum
top
middle
bottom
bottom

height

string

align

enum
left
right
center
center

axis_title

string

axis_format

string

chart_data

array

custom_options

string

orientation

enum
vertical
horizontal
vertical

point_start

numeric

stacking

string

subtitle

string

title

string

x_axis_categories

array

y_axis_min

numeric

y_axis_max

numeric

legend

boolean
false

toggle_legend_click

boolean
true

colors

array

layout

enum
horizontal
vertical
proximate
horizontal

x

numeric

y

numeric