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.

Summary

React Rendered

See this kit in action in our sample UI

Default

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, {
  name: 'Manufacturing',
  data: [4434, 524, 2320, 440, 500],
}, {
  name: 'Sales & Distribution',
  data: [3387, 743, 1344, 434, 440],
}, {
  name: 'Project Development',
  data: [3227, 878, 999, 780, 1000],
}, {
  name: 'Other',
  data: [1111, 677, 3245, 500, 200],
}]

const BarGraphDefault = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-default"
        subTitle="Source: thesolarfoundation.com"
        title="Solar Employment Growth by Sector, 2010-2016"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphDefault

Legend

import React from 'react'
import { BarGraph } from 'playbook-ui'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const BarGraphLegend = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-test-2"
        legend
        title="Bar Graph with Legend"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphLegend

Legend Position

Prop

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.

import React from 'react'
import { BarGraph, Title } from 'playbook-ui'

const chartData = [{
  name: 'Installation',
  data: [1475],
}, {
  name: 'Manufacturing',
  data: [4434],
}, {
  name: 'Sales & Distribution',
  data: [3387],
}, {
  name: 'Project Development',
  data: [3227],
}, {
  name: 'Other',
  data: [1111],
}]

const BarGraphLegendPosition = (props) => (
  <div>
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="align | verticalAlign"
    />
    <BarGraph
        align='right'
        axisTitle="Number of Employees"
        chartData={chartData}
        id="legend-position-bar"
        legend
        paddingBottom="sm"
        title="Alignment of Legend"
        verticalAlign="top"
        xAxisCategories={['Jan']}
        yAxisMin={0}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="layout"
    />
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="legend-position-bar-1"
        layout="vertical"
        legend
        paddingBottom="sm"
        paddingTop="sm"
        title="Layout of Legend"
        xAxisCategories={['Jan']}
        yAxisMin={0}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="x | y"
    />
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="legend-position-bar-2"
        layout="vertical"
        legend
        title="Offset of Legend"
        x={100}
        xAxisCategories={['Jan']}
        y={10}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphLegendPosition

Legend Non Clickable

import React from 'react'
import { BarGraph } from 'playbook-ui'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const BarGraphLegendNonClickable = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-test-3"
        legend
        title="Bar Graph with Legend Non Clickable"
        toggleLegendClick={false}
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphLegendNonClickable

Height

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const BarGraphDefault = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        height="300"
        id="bar-fixed-height"
        title="Fixed Height (300px)"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
        yAxisMin={0}
    />

    <br />
    <br />

    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        height="50%"
        id="bar-percentage-height"
        title="Percentage Height (50%)"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphDefault

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.

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}, {
  type: 'spline',
  name: 'Trend Line',
  data: [1975, 600, 2500, 924, 500],
  color: '#F9BB00',
}]

const BarGraphSpline = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-spline"
        legend
        title="Bar Graph with Spline"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphSpline

Color Overrides

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, {
  name: 'Manufacturing',
  data: [4434, 524, 2320, 440, 500],
}, {
  name: 'Sales & Distribution',
  data: [3387, 743, 1344, 434, 440],
}, {
  name: 'Project Development',
  data: [3227, 878, 999, 780, 1000],
}, {
  name: 'Other',
  data: [1111, 677, 3245, 500, 200],
}]

const BarGraphColors = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
        id="bar-colors"
        title="Bar Graph with Custom Data Colors"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphColors

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.

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, {
  name: 'Manufacturing',
  data: [4434, 524, 2320, 440, 500],
}, {
  name: 'Sales & Distribution',
  data: [3387, 743, 1344, 434, 440],
}, {
  name: 'Project Development',
  data: [3227, 878, 999, 780, 1000],
}, {
  name: 'Other',
  data: [1111, 677, 3245, 500, 200],
}]

const barGraphOptions = {
  subtitle: {
    text: "Overwritten subtitle",
    style: {
      color: "red"
    }
  },
  xAxis: {
      labels: {
          useHTML: true,
          formatter: function() {
              switch (this.value) {
                  case 'Jan':
                      return `<i class="far fa-apple-whole"></i> ${this.value}`
                  case 'Feb':
                      return `<i class="far fa-strawberry"></i> ${this.value}`
                  case 'Mar':
                      return `<i class="far fa-lemon"></i> ${this.value}`
                  case 'Apr':
                      return `<i class="far fa-pear"></i> ${this.value}`
                  case 'May':
                      return `<i class="far fa-peach"></i> ${this.value}`
                  default:
                      return ''
              }
          }
      }
  }
}

const BarGraphCustom = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        customOptions={barGraphOptions}
        id="bar-custom"
        subTitle="Subtitle to replace"
        title="Bar Graph with Custom Overrides"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphCustom

Stacked

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

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, 
{
  name: 'Manufacturing',
  data: [1270, 800, 200, 454, 956],
}, {
  name: 'Sales & Distribution',
  data: [975, 1600, 1500, 924, 500],
}]


const BarGraphStacked = (props) => (
  <div>
    <BarGraph
        axisTitle="Number Of Employees"
        chartData={chartData}
        id="bar-default"
        legend
        stacking="normal"
        title="Bar Graph with Stacked Columns"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphStacked

Negative Numbers

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Installation',
  data: [-475, 400, -1000, 354, -856],
  threshold: 0
}, {
  name: 'Manufacturing',
  data: [1475, 200, 1000, 654, -656],
  threshold: 0
}, 
{
  name: 'Sales & Distribution',
  data: [1270, 100, -1200, 554, 756],
  threshold: 0
}]


const BarGraphStacked = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-default"
        legend
        title="Bar Graph with Negative Numbers"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
    />
  </div>
)

export default BarGraphStacked

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.

import React from 'react'

import BarGraph from 'playbook-ui'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}, {
  type: 'spline',
  name: 'Percentage',
  data: [48, 70, 25, 55, 72],
  color: '#F9BB00',
  yAxis: 1
}]

const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]

const axisFormats = [{format: ""}, {format: "{value}%"}]

const BarGraphSecondaryYAxis= (props) => (
  <div>
    <BarGraph
        axisFormat={axisFormats}
        axisTitle={axisTitles}
        chartData={chartData}
        id="bar-spline"
        legend
        title="Bar Graph with Secondary Y-axis"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
    />
  </div>
)

export default BarGraphSecondaryYAxis

Custom Options From Highcharts

import React from 'react'

import BarGraph from 'playbook-ui'


const barGraphOptions = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region',
        align: 'left'
    },
    subtitle: {
        text: 'Source: <a ' +
            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
            'target="_blank">Wikipedia.org</a>',
        align: 'left'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe'],
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            },
            groupPadding: 0.1
        }
    },
    series: [{
        name: 'Year 1990',
        data: [631, 727, 3202, 721]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 726]
    }, {
        name: 'Year 2018',
        data: [1276, 1007, 4561, 746]
    }]
}

const BarGraphHorizontal = (props) => (
  <div>
    <BarGraph
        customOptions={barGraphOptions}
        id="bar-horizontal"
        yAxisMin={0}
    />
  </div>
)

export default BarGraphHorizontal

UI Samples using Bar Graph Kit

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

Analytics Dashboard

Conference Statistics

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat