Line Graph

Important Note for the React Kit: In order to leverage this kit, you must install highcharts and highcharts-react-official into your project as shown below. To then apply Playbook styles to your Highchart, import lineGraphTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

Summary

React Rendered

Default

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 chartOptions = {
  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 LineGraphDefault = () => {
  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

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

export default LineGraphDefault

Legend

import React from 'react'

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

const data = [{
  name: 'Number of Installations',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']

const chartOptions = {
  series: data,
  title: { text: "Line Graph with Legend" },
  xAxis: {
    categories: categories,
  },
  yAxis: {
    min: 0,
    title: {
      text: "Number of Employees",
    },
  },
  legend: {
    enabled: true,
  },
}

const LineGraphLegend = () => {
  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

  return(
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </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 alignment. Negative x moves it to the left, positive x moves it to the right

y offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

import React from 'react'

import { lineGraphTheme, Title } 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']

const LineGraphLegendPosition = (props) => {
  const chartOptionsFirst = {
    title: { text: "Alignment of Legend" },
    series: data,
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: "Number of Employees",
      },
    },
    legend: {
      enabled: true,
      align: 'right',
      verticalAlign: 'top'
    },
  }

  const chartOptionsSecond = {
    title: { text: "Layout of Legend" },
    series: data,
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: "Number of Employees",
      },
    },
    legend: {
      enabled: true,
      layout: 'vertical'
    },
  }

  const chartOptionsThird = {
    title: { text: "Offset of Legend" },
    series: data,
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: "Number of Employees",
      },
    },
    legend: {
      enabled: true,
      layout: 'vertical',
      x: 100,
      y: 10
    },
  }

  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
  const optionsThird = Highcharts.merge({}, lineGraphTheme, chartOptionsThird)

  return (
    <div>
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="align | verticalAlign"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsFirst}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="layout"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsSecond}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="x | y"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsThird}
      />
    </div>
  )
}

export default LineGraphLegendPosition

Legend Nonclickable

import React from 'react'

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

const data = [{
  name: 'Number of Installations',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']

const chartOptions = {
  title: {
    text: 'Line Graph with Legend Non Clickable',
  },
  xAxis: {
    categories: categories,
  },
  yAxis: {
    title: {
      text: 'Number of Employees',
    },
  },
  legend: {
    enabled: true,
    events: {
      itemClick: function () {
        return false;
      }
    }
  },
  series: data
}

const LineGraphLegendNonclickable = () => {
  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

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

export default LineGraphLegendNonclickable

Height

By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.

Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

import React from 'react'

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

const data = [{
  name: 'Number of Installations',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

const LineGraphHeight = () => {
  const chartOptionsFirst = {
    title: {
      text: 'Fixed Height (300px)',
    },
    chart: {
      height: '300px'
    },
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number of Employees',
      },
    },
    series: data
  }

  const chartOptionsSecond = {
    title: {
      text: 'Percentage Height (50%)',
    },
    chart: {
      height: '50%'
    },
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number of Employees',
      },
    },
    series: data
  }

  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)

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

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

export default LineGraphHeight

Color Overrides

Custom data colors allow for color customization to match the needs of business requirements.
Import the colors from Playbook's tokens, then set custom colors in the colors array using the desired color variables. Hex colors are also available eg: #CA0095.

import React from 'react'

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

const LineGraphColors = () => {
  const chartOptions = {
    title: {
      text: 'Line Graph with Custom Data Colors',
    },
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number of Employees',
      },
    },
    series: data,
    colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
  }

  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </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

Github

Connect Chat