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


Legend


Legend Position


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


Height


Spline


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


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


The customOptions 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.

Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our staticOptions. For example, yAxis will need to be wrapped with square brackets.

You may also need to override any of the defaults in order to get that options to work.

Stacked


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

Negative Numbers


Secondary Y-Axis


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



UI Samples using Bar Graph Kit

Get the full picture. See how this kit is used in our samples.

Available Props