Line Graph

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.

Summary

React Rendered

Default

import React from 'react'

import { LineGraph } from 'playbook-ui'

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}
    />
  </div>
)

export default LineGraphDefault

Playbook Styles

You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

import React from 'react'

import { lineGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

const baseOptions = {
  series: data,
  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
  subtitle: { text: "Source: thesolarfoundation.com" },
  xAxis: {
    categories: categories,
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
}

const LineGraphPbStyles = () => {
  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)

  return(
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default LineGraphPbStyles

Legend

import React from 'react'

import { LineGraph } from 'playbook-ui'

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}
    />
  </div>
)

export default LineGraphLegend

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 { LineGraph, Title } from 'playbook-ui'

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 LineGraphLegendPosition = (props) => (
  <div>
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="align | verticalAlign"
    />
    <LineGraph
        align='right'
        axisTitle="Number of Employees"
        chartData={data}
        id="legend-position-line"
        legend
        title="Alignment of Legend"
        verticalAlign="top"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
        yAxisMin={0}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="layout"
    />
    <LineGraph
        axisTitle="Number of Employees"
        chartData={data}
        id="legend-position-line-1"
        layout="vertical"
        legend
        title="Layout of Legend"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
        yAxisMin={0}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="x | y"
    />
    <LineGraph
        axisTitle="Number of Employees"
        chartData={data}
        id="legend-position-line-2"
        layout="vertical"
        legend
        title="Offset of Legend"
        x={100}
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
        y={10}
        yAxisMin={0}
    />
  </div>
)

export default LineGraphLegendPosition

Legend Nonclickable

import React from 'react'

import { LineGraph } from 'playbook-ui'

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']}
    />
  </div>
)

export default LineGraphLegendNonclickable

Height

import React from 'react'

import { LineGraph } from 'playbook-ui'

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}
    />

    <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}
    />
  </div>
)

export default LineGraphDefault

Color Overrides

import React from 'react'

import { LineGraph } from 'playbook-ui'

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}
    />
  </div>
)

export default LineGraphColors

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