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 '../_line_graph' 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 '../_line_graph' 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} height="300px" 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
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 LineGraph from '../_line_graph' const data = [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }, { name: 'Manufacturing', data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434], }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387], }, { name: 'Project Development', data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227], }, { name: 'Other', data: [null, null, null, 3112, 4989, 5816, 15274, 18111], }] const LineGraphColors = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']} id="line-colors" title="Line Graph with Custom Data Colors" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default LineGraphColors