Charts And Graphs

Bar Graph

Default

Code Example

import React from 'react'
import { BarGraph } from '../../'

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, {
  name: 'Manufacturing',
  data: [4434, 524, 2320, 440, 500],
}, {
  name: 'Sales & Distribution',
  data: [3387, 743, 1344, 434, 440],
}, {
  name: 'Project Development',
  data: [3227, 878, 999, 780, 1000],
}, {
  name: 'Other',
  data: [1111, 677, 3245, 500, 200],
}]

const BarGraphDefault = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-default"
        subTitle="Source: thesolarfoundation.com"
        title="Solar Employment Growth by Sector, 2010-2016"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
        {...props}
    />
  </div>
)

export default BarGraphDefault

Legend

Code Example

import React from 'react'
import { BarGraph } from '../..'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const BarGraphLegend = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-test-2"
        legend
        title="Bar Graph with Legend"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
        {...props}
    />
  </div>
)

export default BarGraphLegend

Legend Non Clickable

Code Example

import React from 'react'
import { BarGraph } from '../..'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const BarGraphLegendNonClickable = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-test-3"
        legend
        title="Bar Graph with Legend Non Clickable"
        toggleLegendClick={false}
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
        {...props}
    />
  </div>
)

export default BarGraphLegendNonClickable

Height

Code Example

import React from 'react'
import { BarGraph } from '../../'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const BarGraphDefault = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        height="300"
        id="bar-fixed-height"
        title="Fixed Height (300px)"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
        yAxisMin={0}
        {...props}
    />

    <br />
    <br />

    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        height="50%"
        id="bar-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 BarGraphDefault

Circle Chart

Default Style

Code Example

import React from 'react'
import { CircleChart } from '../../'

const data = [
  {
    name: 'Waiting for Calls',
    value: 41,
  },
  {
    name: 'On Call',
    value: 49,
  },
  {
    name: 'After call',
    value: 10,
  },
]

const CircleChartDefault = (props) => (
  <div>
    <CircleChart
        chartData={data}
        id="circle-chart-default"
        {...props}
    />
  </div>
)

export default CircleChartDefault

Live Data

Code Example

import React, { useState } from 'react'
import { Button, CircleChart } from '../../'

const CircleChartLiveData = (props) => {
  const [data, setData] = useState([
    {
      name: 'Waiting for Calls',
      value: 41,
    },
    {
      name: 'On Call',
      value: 49,
    },
    {
      name: 'After call',
      value: 10,
    },
  ])

  const data2 = [
    {
      name: 'Waiting for Calls',
      value: 48,
    },
    {
      name: 'On Call',
      value: 12,
    },
    {
      name: 'After call',
      value: 140,
    },
  ]

  const updateValue = () => {
    setData(data2)
  }

  return (
    <div>
      <Button
          onClick={updateValue}
          text="Update Value"
          {...props}
      />
      <CircleChart
          chartData={data}
          id="circle-chart-live-data"
          {...props}
      />
    </div>
  )
}

export default CircleChartLiveData

Rounded Corners

Code Example

import React from 'react'
import { CircleChart } from '../../'

const dataRounded = [
  {
    name: 'Waiting for Calls',
    value: 41,
  },
  {
    name: 'On Call',
    value: 49,
  },
  {
    name: 'After call',
    value: 10,
  },
]

const CircleChartRounded = (props) => (
  <div>
    <CircleChart
        chartData={dataRounded}
        id="default-test-rounded"
        innerSize="lg"
        rounded
        {...props}
    />
  </div>
)

export default CircleChartRounded

Accepts Any Block

Code Example

import React from 'react'
import { CircleChart, Title } from '../../'

const dataWithABlock = [
  {
    name: 'Waiting for Calls',
    value: 41,
  },
  {
    name: 'On Call',
    value: 49,
  },
  {
    name: 'After call',
    value: 10,
  },
]

const CircleChartBlock = (props) => (

  <div>
    <CircleChart
        chartData={dataWithABlock}
        id="chart-with-a-block"
        innerSize="lg"
        marginTop="xl"
        rounded
        {...props}
    >
      <Title
          size={1}
          tag="div"
          {...props}
      >
        {'83'}
      </Title>
    </CircleChart>
  </div>
)

export default CircleChartBlock

Color Overrides

Code Example

import React from 'react'
import { CircleChart } from '../../'

const dataWithColors = [
  {
    name: 'Waiting for Calls',
    value: 41,
  },
  {
    name: 'On Call',
    value: 49,
  },
  {
    name: 'After call',
    value: 10,
  },
]

const CircleChartColors = (props) => (
  <div>
    <CircleChart
        chartData={dataWithColors}
        colors={['data-6', 'data-4', 'data-2']}
        id="colors-example"
        {...props}
    />
  </div>
)

export default CircleChartColors

Data Labels

Code Example

import React from 'react'
import { CircleChart } from '../../'

const dataWithLabels = [
  {
    name: 'Facebook',
    value: 2498,
  },
  {
    name: 'YouTube',
    value: 2000,
  },
  {
    name: 'WhatsApp',
    value: 2000,
  },
  {
    name: 'Facebook Messenger',
    value: 1300,
  },
  {
    name: 'WeChat',
    value: 1165,
  },
  {
    name: 'Instagram',
    value: 1000,
  },
  {
    name: 'Tik Tok',
    value: 800,
  },
]

const CircleChartWithLabels = (props) => (
  <div>
    <CircleChart
        chartData={dataWithLabels}
        dataLabels
        id="with-labels-example"
        {...props}
    />
  </div>
)

export default CircleChartWithLabels

Legend

Code Example

import React from 'react'
import { CircleChart } from '../../'

const dataWithLegend = [{
  name: 'Bugs',
  value: 8,

},
{
  name: 'Chores',
  value: 1,

},
{
  name: 'Stories',
  value: 12,
},
]

const CircleChartWithLegendKit = (props) => (
  <div>
    <CircleChart
        chartData={dataWithLegend}
        id="with-legend-example"
        legend
        {...props}
    />
  </div>
)

export default CircleChartWithLegendKit

Title

Code Example

import React from 'react'
import { CircleChart } from '../../'

const dataWithTitle = [
  {
    name: 'Facebook',
    value: 2498,
  },
  {
    name: 'YouTube',
    value: 2000,
  },
  {
    name: 'WhatsApp',
    value: 2000,
  },
  {
    name: 'Facebook Messenger',
    value: 1300,
  },
  {
    name: 'WeChat',
    value: 1165,
  },
  {
    name: 'Instagram',
    value: 1000,
  },
  {
    name: 'Tik Tok',
    value: 800,
  },
]

const CircleChartWithLegendKit = (props) => (
  <div>
    <CircleChart
        chartData={dataWithTitle}
        id="with-title-example"
        title="Active Users on Social Media"
        {...props}
    />
  </div>
)

export default CircleChartWithLegendKit

Inner Circle Size Options

Code Example

import React from 'react'
import { CircleChart } from '../../'

const dataFirst = [
  {
    name: 'Bugs',
    value: 8,
  },
  {
    name: 'Chores',
    value: 1,
  },
  {
    name: 'Stories',
    value: 12,
  },
]

const dataSecond = [
  {
    name: 'Queued',
    value: 7,
  },
  {
    name: 'In Progress',
    value: 6,
  },
  {
    name: 'Validation',
    value: 3,
  },
  {
    name: 'Done',
    value: 6,
  },
]

const dataThird = [
  {
    name: '1 Point Tickets',
    value: 2,
  },
  {
    name: '3 Point Tickets',
    value: 5,
  },
  {
    name: '5 Point Tickets',
    value: 6,
  },
  {
    name: '8 Point Tickets',
    value: 3,
  },
  {
    name: '13 Point Tickets',
    value: 1,
  },
]
const dataFourth = [
  {
    name: 'Facebook',
    value: 2498,
  },
  {
    name: 'YouTube',
    value: 2000,
  },
  {
    name: 'WhatsApp',
    value: 2000,
  },
  {
    name: 'Facebook Messenger',
    value: 1300,
  },
  {
    name: 'WeChat',
    value: 1165,
  },
  {
    name: 'Instagram',
    value: 1000,
  },
  {
    name: 'Tik Tok',
    value: 800,
  },
]

const CircleChartInnerSizes = (props) => (
  <div>
    <CircleChart
        chartData={dataFirst}
        id="with-innersize-sm"
        innerSize="sm"
        {...props}
    />
    <CircleChart
        chartData={dataSecond}
        id="with-innersize-md"
        innerSize="md"
        {...props}
    />
    <CircleChart
        chartData={dataThird}
        id="with-innersize-lg"
        innerSize="lg"
        {...props}
    />
    <CircleChart
        chartData={dataFourth}
        className="poop"
        id="with-innersize-none "
        innerSize="none"
        {...props}
    />
  </div>
)

export default CircleChartInnerSizes

Distribution Bar

Default

Code Example

import React from 'react'
import DistributionBar from '../_distribution_bar.jsx'

const DistributionBarDefault = (props) => {
  return (
    <React.Fragment>
      <div>
        <DistributionBar
            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
            {...props}
        />
      </div>
      <br />
      <br />
      <div>
        <DistributionBar
            size="sm"
            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
            {...props}
        />
      </div>
    </React.Fragment>
  )
}

export default DistributionBarDefault

Custom Colors

You can customize the order of the colors you would like to use by using the colors prop. Only the data and status colors will work for Playbook charts. See the design page for reference.

Code Example

import React from 'react'
import DistributionBar from '../_distribution_bar.jsx'

const DistributionBarCustomColors = (props) => {
  return (
    <React.Fragment>
      <div>
        <DistributionBar
            colors={['data_7', 'data_1', 'neutral']}
            widths={[4, 5, 3]}
            {...props}
        />
      </div>
    </React.Fragment>
  )
}

export default DistributionBarCustomColors

Gauge

Default

Code Example

import React from 'react'
import { Gauge } from '../../'

const data = [
  { name: 'Name', value: 45 },
]

const GaugeDefault = (props) => (
  <div>
    <Gauge
        chartData={data}
        id="gauge-default"
        {...props}
    />
  </div>
)

export default GaugeDefault

Disable Animation

Code Example

import React from 'react'
import { Gauge } from '../../'

const data = [
  { name: 'Participants', value: 84 },
]

const GaugeDisableAnimation = (props) => (
  <div>
    <Gauge
        chartData={data}
        disableAnimation
        id="gauge-disable-animation"
        {...props}
    />
  </div>
)

export default GaugeDisableAnimation

Title

Code Example

import React from 'react'
import { Gauge } from '../../'

const data = [
  { name: 'Score', value: 780 },
]

const GaugeTitle = (props) => (
  <div>
    <Gauge
        chartData={data}
        id="gauge-title"
        max={850}
        min={300}
        title="Credit Score"
        {...props}
    />
  </div>
)

export default GaugeTitle

Units

Code Example

import React from 'react'
import { Gauge } from '../../'

const data1 = [
  { name: 'Data Used', value: 32 },
]
const data2 = [
  { name: 'Sales to Date', value: 65 },
]

const GaugeUnits = (props) => (
  <div>
    <Gauge
        chartData={data1}
        id="gauge-units1"
        suffix="GB"
        title="Data Usage"
        {...props}
    />
    <Gauge
        chartData={data2}
        id="gauge-units2"
        prefix="$"
        suffix="k"
        title="Sales Goal"
        {...props}
    />
  </div>
)

export default GaugeUnits

Full Circle

Code Example

import React from 'react'
import { Gauge } from '../../'

const data = [
  { name: 'Capacity', value: 75 },
]

const GaugeFullCircle = (props) => (
  <div>
    <Gauge
        chartData={data}
        fullCircle
        id="gauge-full-circle"
        suffix="%"
        title="Seating Capacity"
        {...props}
    />
  </div>
)

export default GaugeFullCircle

Min Max Labels

Min defaults to 0, Max to 100.

Code Example

import React from 'react'
import { Gauge } from '../../'

const data = [{
  name: 'Rating', value: 4.5,
}]

const GaugeMinMax = (props) => (
  <div>
    <Gauge
        chartData={data}
        id="gauge-min-max"
        max={5}
        min={0}
        showLabels
        title="Product Rating"
        {...props}
    />
  </div>
)

export default GaugeMinMax

Sizing

Gauge resizes dynamically to fit whatever element it's placed within.

Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

Code Example

import React from 'react'
import { Flex, FlexItem, Gauge } from '../../'

const GaugeSizing = (props) => (
  <div>
    <Flex
        wrap
        {...props}
    >
      <FlexItem
          fixedSize="400px"
          overflow="hidden"
          shrink
          {...props}
      >
        <Gauge
            chartData={[ { name: 'Point 1', value: 100 } ]}
            id="gauge-sizing4"
            {...props}
        />
      </FlexItem>
      <FlexItem
          fixedSize="300px"
          overflow="hidden"
          shrink
          {...props}
      >
        <Gauge
            chartData={[ { name: 'Point 2', value: 75 } ]}
            id="gauge-sizing3"
            {...props}
        />
      </FlexItem>
      <FlexItem
          fixedSize="200px"
          overflow="hidden"
          shrink
          {...props}
      >
        <Gauge
            chartData={[ { name: 'Point 3', value: 50 } ]}
            id="gauge-sizing2"
            {...props}
        />
      </FlexItem>
      <FlexItem
          fixedSize="125px"
          overflow="hidden"
          shrink
          {...props}
      >
        <Gauge
            chartData={[ { name: 'Point 4', value: 25 } ]}
            id="gauge-sizing1"
            {...props}
        />
      </FlexItem>
    </Flex>
  </div>
)

export default GaugeSizing

Height

Code Example

import React from 'react'
import { Gauge } from '../../'

const GaugeHeight = (props) => (
  <div>
    <Gauge
        chartData={[ { name: 'Pixels', value: 400 } ]}
        height="400"
        id="gauge-height-px"
        suffix="px"
        title="Fixed Height in Pixels"
        {...props}
    />
    <Gauge
        chartData={[ { name: 'Percentage', value: 45 } ]}
        height="45%"
        id="gauge-height-percent"
        suffix="%"
        title="Height as Percentage of Width"
        {...props}
    />
  </div>
)

export default GaugeHeight

Live Data

Code Example

import React, { useState } from 'react'
import { Button, Gauge } from '../../'

const GaugeLiveData = (props) => {
  const [value, setValue] = useState(50)
  const [name, setName] = useState('Name')

  const updateValue = () => {
    setValue(Math.floor(Math.random() * 100))
  }
  const updateName = () => {
    let index = namesArray.indexOf(name)
    if (namesArray.indexOf(name) == 5) {
      index = 0
    } else {
      index += 1
    }
    setName(namesArray[index])
  }
  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']

  return (
    <div>
      <Button
          onClick={updateValue}
          text="Update Value"
          {...props}
      />
      <Button
          onClick={updateName}
          text="Update Name"
          {...props}
      />
      <Gauge
          chartData={[{ name: name, value: value }]}
          id="gauge-live-data"
          {...props}
      />
    </div>
  )
}

export default GaugeLiveData

Legend

Default

Code Example

import React from 'react'
import { Legend } from '../../'

const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']

const LegendDefault = (props) => (
  <div>
    {
      products.map((product, i) => (
        <Legend
            color={`data_${i + 1}`}
            key={`legend_${i + 1}`}
            text={product}
            {...props}
        />
      ))
    }
  </div>
)

export default LegendDefault

With Prefix Text

Code Example

import React from 'react'
import { Legend } from '../..'

const LegendPrefix = (props) => (
  <div>
    <Legend
        color="data_3"
        prefixText="10"
        text="Windows"
        {...props}
    />
  </div>
)

export default LegendPrefix

Line Graph

Default

Code Example

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

Legend

Code Example

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

Legend Nonclickable

Code Example

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

Height

Code Example

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

Charts And Graphs

Bar Graph

Circle Chart

Distribution Bar

Gauge

Min defaults to 0, Max to 100.

Gauge resizes dynamically to fit whatever element it's placed within.

Note: set overflow to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

Legend

Line Graph

Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.