PB Line Graph

In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible.

See the highcharts API docs for a comprehensive look at what is possible.

Summary

React Rendered

Default

In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

import React from 'react'

import { PbLineGraph } 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 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 PbLineGraphDefault = (props) => (
  <div>
    <PbLineGraph
        options={chartOptions}
    />
  </div>
)

export default PbLineGraphDefault

Legend

import React from 'react'

import { PbLineGraph } from 'playbook-ui'

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 PbLineGraphLegend = (props) => (
  <div>
    <PbLineGraph
        options={chartOptions}
    />
  </div>
)

export default PbLineGraphLegend

Legend Position

Highcharts provides many options for customizing the legend display. This example showcases the following:

align can be used to align the legend left, right or center (defaults to center)

verticalAlign can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom

layout determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal 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 (defaults to 0)

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

import React from 'react'

import { PbLineGraph, 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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']

  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 PbLineGraphLegendPosition = (props) => (
  <div>
    <Title
        paddingY="sm"
        size={4}
        tag="h4"
        text="align | verticalAlign"
    />
    <PbLineGraph
        options={chartOptionsFirst}
    /> 
    <Title
        paddingY="sm"
        size={4}
        tag="h4"
        text="layout"
    />
    <PbLineGraph
        options={chartOptionsSecond}
    /> 
    <Title
        paddingY="sm"
        size={4}
        tag="h4"
        text="x | y"
    />
    <PbLineGraph
        options={chartOptionsThird}
    />
  </div>
)

export default PbLineGraphLegendPosition

Legend NonClickable

import React from 'react'

import { PbLineGraph } from 'playbook-ui'

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 PbLineGraphLegendNonclickable = (props) => {
  return (
    <div>
      <PbLineGraph
          options={chartOptions}
      />
    </div>
  )
}

export default PbLineGraphLegendNonclickable

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 { PbLineGraph } from 'playbook-ui'

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 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 PbLineGraphHeight = (props) => {
  return (
    <div>
      <PbLineGraph
          options={chartOptionsFirst}
      />
      <PbLineGraph
          options={chartOptionsSecond}
      />
    </div>
  )
}

export default PbLineGraphHeight

Color Overrides

Custom data colors allow for color customization to match the needs of business requirements.

For React, import 'colors' from Playbook, then set custom colors in the colors array using the desired color variables. Hex colors are also available.

For Rails, HEX values are required.

import React from 'react'

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

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 PbLineGraphColors = (props) => {
  return (
    <div>
      <PbLineGraph
          options={chartOptions}
      />
    </div>
  )
}

export default PbLineGraphColors

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