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.
import React from 'react' import BarGraph from '../_bar_graph' 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} {...props} /> </div> ) export default BarGraphDefault
import React from 'react' import { BarGraph } from '../..' 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} {...props} /> </div> ) export default BarGraphLegend
import React from 'react' import { BarGraph } from '../..' 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} {...props} /> </div> ) export default BarGraphLegendNonClickable
import React from 'react' import BarGraph from '../_bar_graph' 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} {...props} /> <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} {...props} /> </div> ) export default BarGraphDefault
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 '../_bar_graph' 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} {...props} /> </div> ) export default BarGraphSpline
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
import React from 'react' import BarGraph from '../_bar_graph' 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} {...props} /> </div> ) export default BarGraphColors