Line graphs are used to show changes in data over time. The default height of line 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 { LineGraph } from '../../' const data = [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227], }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], }] const LineGraphDefault = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-default" subTitle="Source: thesolarfoundation.com" title="Solar Employment Growth by Sector, 2010-2016" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default LineGraphDefault
import React from 'react' import { LineGraph } from '../..' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphLegend = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-test-2" legend title="Line Graph with Legend" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} yAxisMin={0} {...props} /> </div> ) export default LineGraphLegend
import React from 'react' import { LineGraph } from '../..' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphLegendNonclickable = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-test-3" legend title="Line Graph with Legend Non Clickable" toggleLegendClick={false} xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} {...props} /> </div> ) export default LineGraphLegendNonclickable
import React from 'react' import { LineGraph } from '../../' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphDefault = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-fixed-height" title="Fixed Height (300px)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> <br /> <br /> <LineGraph axisTitle="Number of Employees" chartData={data} height="50%" id="line-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 LineGraphDefault