Charts And Graphs

Bar Graph

Default

Code Example

import React from 'react'

import BarGraph from '../_bar_graph'

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 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.

Code Example

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

const chartData = [{
  name: 'Installation',
  data: [1475],
}, {
  name: 'Manufacturing',
  data: [4434],
}, {
  name: 'Sales & Distribution',
  data: [3387],
}, {
  name: 'Project Development',
  data: [3227],
}, {
  name: 'Other',
  data: [1111],
}]

const BarGraphLegendPosition = (props) => (
  <div>
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="align | verticalAlign"
    />
    <BarGraph
        align='right'
        axisTitle="Number of Employees"
        chartData={chartData}
        id="legend-position-bar"
        legend
        paddingBottom="sm"
        title="Alignment of Legend"
        verticalAlign="top"
        xAxisCategories={['Jan']}
        yAxisMin={0}
        {...props}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="layout"
    />
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="legend-position-bar-1"
        layout="vertical"
        legend
        paddingBottom="sm"
        paddingTop="sm"
        title="Layout of Legend"
        xAxisCategories={['Jan']}
        yAxisMin={0}
        {...props}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="x | y"
    />
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="legend-position-bar-2"
        layout="vertical"
        legend
        title="Offset of Legend"
        x={100}
        xAxisCategories={['Jan']}
        y={10}
        yAxisMin={0}
        {...props}
    />
  </div>
)

export default BarGraphLegendPosition

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 '../_bar_graph'

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

Spline

A spline can be added by including a separate chart data with the type: 'spline' attribute.
A color can also be specified for the spline.

Code Example

import React from 'react'

import BarGraph from '../_bar_graph'

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}, {
  type: 'spline',
  name: 'Trend Line',
  data: [1975, 600, 2500, 924, 500],
  color: '#F9BB00',
}]

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

export default BarGraphSpline

Color Overrides

Code Example

import React from 'react'

import BarGraph from '../_bar_graph'

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 BarGraphColors = (props) => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
        id="bar-colors"
        title="Bar Graph with Custom Data Colors"
        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
        yAxisMin={0}
        {...props}
    />
  </div>
)

export default BarGraphColors

Circle Chart

Default Style

Code Example

import React from 'react'

import CircleChart from '../_circle_chart'

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 CircleChart from '../_circle_chart'
import Button from '../../pb_button/_button'

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 '../_circle_chart'

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 from '../_circle_chart'
import Title from '../../pb_title/_title'

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 '../_circle_chart'

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 '../_circle_chart'

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 '../_circle_chart'

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

Legend Position

Prop

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.

Code Example

import React from 'react'

import CircleChart from '../_circle_chart'

import {Title} from '../..'

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

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 CircleChartLegendPosition = (props) => (
  <div>
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="align | verticalAlign"
    />
    <CircleChart
        align='right'
        chartData={data}
        id="legend-position-circle"
        legend
        paddingBottom="sm"
        title="Alignment of Legend"
        verticalAlign="top"
        {...props}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="layout"
    />
    <CircleChart
        chartData={dataFirst}
        id="legend-position-circle-1"
        layout="vertical"
        legend
        paddingBottom="sm"
        paddingTop="sm"
        title="Layout of Legend"
        {...props}
    />
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="x | y"
    />
    <CircleChart
        chartData={dataSecond}
        id="legend-position-circle-2"
        layout="vertical"
        legend
        title="Offset of Legend"
        x={100}
        y={10}
        {...props}
    />
  </div>
)

export default CircleChartLegendPosition

Title

Code Example

import React from 'react'

import CircleChart from '../_circle_chart'

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 '../_circle_chart'

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'

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'

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
        align="center"
        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 } ]}
            height="100%"
            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

Color Overrides

Code Example

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

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

const GaugeColors = (props) => (
  <div>
    <Gauge
        chartData={data}
        id="gauge-colors"
        {...props}
        colors={['data-7']}
    />
  </div>
)

export default GaugeColors

Complex

We are able to wrap our Gauge kits within multiple other Flex and Card components.

Code Example

import React from "react";
import {
  Title,
  Card,
  Gauge,
  Flex,
  FlexItem,
  SectionSeparator,
  Body,
  Caption,
} from "../..";

const data = [{ name: "Name", value: 10 }];

const GaugeComplex = (props) => (
  <Flex
      gap="sm"
      padding="xl"
      wrap
  >
    <FlexItem
        flex={1}
        grow
    >
      <Card
          maxWidth="xs"
          padding="md"
      >
        <Title
            paddingBottom="sm"
            size={4}
            text="Abandoned Calls"
        />
        <Flex align="stretch">
          <Flex
              marginRight="sm"
              orientation="column"
          >
            <Body
                color="light"
                paddingBottom="sm"
                text="Total Abandoned"
            />
            <Flex
                align="baseline"
                paddingBottom="xs"
            >
              <Title
                  size={1}
                  text="39"
              />
              <Title
                  color="light"
                  size={3}
                  text="calls"
              />
            </Flex>
            <Caption
                size="xs"
                text="of 390"
            />
          </Flex>

          <SectionSeparator
              alignSelf="stretch"
              marginRight="sm"
              orientation="vertical"
          />

          <Flex
              orientation="column"
              wrap
          >
            <Body
                color="light"
                text="% Abandoned"
            />
            <Flex wrap>
              <FlexItem
                  fixedSize="150px"
                  overflow="hidden"
                  shrink
              >
                <Gauge
                    chartData={data}
                    disableAnimation
                    height="100%"
                    id="gauge-complex"
                    suffix="%"
                    {...props}
                />
              </FlexItem>
            </Flex>
          </Flex>
        </Flex>
      </Card>
    </FlexItem>
  </Flex>
);

export default GaugeComplex;

Legend

Default

Code Example

import React from 'react'

import Legend from '../_legend'

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

Colors

By default legend kit uses data_1 color.
Pass the color prop and use any desired value from $data_colors, $status_colors, $product_colors and $category_colors list.

Code Example

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

const LegendColors = (props) => (
  <div>
    <Legend
        color="data_8"
        text="Windows"
        {...props}
    />
    <Legend
        color="warning"
        text="Windows"
        {...props}
    />
    <Legend
        color="windows"
        text="Windows"
        {...props}
    />
    <Legend
        color="category_7"
        text="Windows"
        {...props}
    />
  </div>
)

export default LegendColors

Custom Colors

The color prop also allows for use of custom colors passed in as HEX codes.

Code Example

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

const LegendCustomColors = (props) => (
  <div>
    <Legend
        color="#dc418a"
        text="Windows"
        {...props}
    />
    <Legend
        color="#3ef0b8"
        text="Windows"
        {...props}
    />
    <Legend
        color="#ab8b04"
        text="Windows"
        {...props}
    />
  </div>
)

export default LegendCustomColors

Line Graph

Default

Code Example

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

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 Position

Prop

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.

Code Example

import React from 'react'
import { LineGraph, Title } 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 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}
        {...props}
    />
    <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}
        {...props}
    />
    <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}
        {...props}
    />
  </div>
)

export default LineGraphLegendPosition

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 '../_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

Color Overrides

Code Example

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

Treemap Chart

Default

Points are automatically arranged by their value size.

By default, point colors are assigned sequentially from the global data colors. Note that data points without a value (such as parent nodes) will still take on the next available color.

Code Example

import React from 'react'

import TreemapChart from '../_treemap_chart'

const chartData = [
  {
    name: "Pepperoni",
    parent: "Toppings",
    value: 600,
  }, {
    name: "Cheese",
    parent: "Toppings",
    value: 510,
  }, {
    name: "Mushroom",
    parent: "Toppings",
    value: 330,
  },{
    name: "Onions",
    parent: "Toppings",
    value: 250,
  }, {
    name: "Olives",
    parent: "Toppings",
    value: 204,
  }, {
    name: "Pineapple",
    parent: "Toppings",
    value: 90,
  }, {
    name: "Pizza Toppings",
    id: "Toppings",
  },
]

const TreemapChartDefault = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        id="treemap-default"
        title="Favored Pizza Toppings"
        {...props}
    />
  </div>
)

export default TreemapChartDefault

Grouped Data

Data can be grouped into distinct segments by specifying the relationship in the chartData. For a point to be a parent, it needs an id of type string included in its object. Any other data points may then reference that id as their parent value to establish the tree structure.

Parents can also be passed a custom color to be applied to all of its child points.

Code Example

import React from 'react'

import TreemapChart from '../_treemap_chart'

const chartData = [
  {
    name: 'Meat',
    id: 'Meat',
    color: "#0056CF",
  }, {
    name: 'Pepperoni',
    parent: 'Meat',
    value: 250,
  }, {
    name: 'Meatball',
    parent: 'Meat',
    value: 400,
  }, {
    name: "Anchovy",
    parent: 'Meat',
    value: 40,
  }, {
    name: 'Vegetarian',
    id: 'Vegetarian',
    color: "#F9BB00",
  }, {
    name: 'Onions',
    parent: 'Vegetarian',
    value: 300,
  }, {
    name: 'Pineapple',
    parent: 'Vegetarian',
    value: 90,
  }, {
    name: "Peppers",
    parent: 'Vegetarian',
    value: 80,
  }, {
    name: "Specialty",
    id: "Specialty",
    color: "#9E64E9",
  },{
    name: "Buffalo Chicken",
    parent: "Specialty",
    value: 400,
  }, {
    name: "Supreme",
    parent: "Specialty",
    value: 150,
  }
]

const TreemapChartGroupedData = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        grouped
        id="treemap-grouped-data"
        title="Grouped Toppings"
        {...props}
    />
  </div>
)

export default TreemapChartGroupedData

Drillable

Adding the drillable prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the chartData, detailed in the Grouped Data section above.

Code Example

import React from 'react'

import TreemapChart from '../_treemap_chart'

const chartData = [
  {
    name: "Evergreen",
    id: "Evergreen",
    color: "#0056CF",
  }, {
    name: "Pine",
    id: "Pine",
    parent: "Evergreen",
    value: 300,
    color: "#477BC4",
  }, {
    name: "Ponderosa Pine",
    parent: "Pine",
    value: 50,
  }, {
    name: "Scots Pine",
    parent: "Pine",
    value: 150,
  }, {
    name: "White Pine",
    parent: "Pine",
    value: 100,
  }, {
    name: "Douglas Fir",
    parent: "Evergreen",
    value: 150,
  }, {
    name: "Juniper",
    parent: "Evergreen",
    value: 80,
  }, {
    name: "Hemlock",
    parent: "Evergreen",
    value: 30,
  }, {
    name: "Deciduous",
    id: "Deciduous",
    color: "#F9BB00",
  }, {
    name: "Oak",
    parent: "Deciduous",
    value: 80,
  }, {
    name: "Maple",
    id: "Maple",
    parent: "Deciduous",
    value: 180,
    color: "#F7CE52",
  }, {
    name: "Red Maple",
    parent: "Maple",
    value: 80,
  }, {
    name: "Sugar Maple",
    parent: "Maple",
    value: 100,
  }, {
    name: "Beech",
    parent: "Deciduous",
    value: 50,
  }, {
    name: "Willow",
    parent: "Deciduous",
    value: 100,
  }, {
    name: "Juniper",
    parent: "Deciduous",
    value: 90,
  },
]

const TreemapChartDrillable = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        drillable
        grouped
        id="treemap-drillable"
        title="Drillable Grouped Tree Species"
        {...props}
    />
  </div>
)

export default TreemapChartDrillable

Color Overrides

Code Example

import React from 'react'

import TreemapChart from '../_treemap_chart'

const chartData = [
  {
    name: "Pepperoni",
    parent: "Toppings",
    value: 600,
  }, {
    name: "Cheese",
    parent: "Toppings",
    value: 510,
  }, {
    name: "Mushroom",
    parent: "Toppings",
    value: 330,
  },{
    name: "Onions",
    parent: "Toppings",
    value: 250,
  }, {
    name: "Olives",
    parent: "Toppings",
    value: 204,
  }, {
    name: "Pineapple",
    parent: "Toppings",
    value: 90,
  }, {
    name: "Pizza Toppings",
    id: "Toppings",
  },
]

const TreemapChartColors = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        colors={["data-4", "data-7", "#8E6E53", "#124732"]}
        id="treemap-colors"
        title="Favored Pizza Toppings"
        {...props}
    />
  </div>
)

export default TreemapChartColors

Tooltip Customization

A custom tooltip format can be specified. The desired format can be passed as a string of custom HTML to the tooltipHtml prop.

{point.name} and {point.value} are useful values that can be referenced for each point in the graph.

Code Example

import React from 'react'

import TreemapChart from '../_treemap_chart'

const chartData = [
  {
    name: "Pepperoni",
    parent: "Toppings",
    value: 600,
  }, {
    name: "Cheese",
    parent: "Toppings",
    value: 510,
  }, {
    name: "Mushroom",
    parent: "Toppings",
    value: 330,
  },{
    name: "Onions",
    parent: "Toppings",
    value: 250,
  }, {
    name: "Olives",
    parent: "Toppings",
    value: 204,
  }, {
    name: "Pineapple",
    parent: "Toppings",
    value: 90,
  }, {
    name: "Pizza Toppings",
    id: "Toppings",
  },
]

const TreemapChartTooltip = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        id="treemap-tooltip"
        title="Favored Pizza Toppings"
        tooltipHtml={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
        {...props}
    />
  </div>
)

export default TreemapChartTooltip

Charts And Graphs

Bar Graph

Prop

Circle Chart

Prop

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

Prop

Treemap Chart

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