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.

Rails
React

Default

Code Example

import React from 'react'
import { BarGraph } from '../../'

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 = () => (
  <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

Code Example

import React from 'react'
import { BarGraph } from '../..'

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

const BarGraphLegend = () => (
  <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 Non Clickable

Code Example

import React from 'react'
import { BarGraph } from '../..'

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

const BarGraphLegendNonClickable = () => (
  <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

Code Example

import React from 'react'
import { BarGraph } from '../../'

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

const BarGraphDefault = () => (
  <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