Playbook Design System

Default Style

import React from 'react'

import CircleChart from 'playbook-ui'

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

export default CircleChartDefault

Live Data

import React, { useState } from 'react'

import CircleChart from 'playbook-ui'
import Button from 'playbook-ui'

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"
      />
      <CircleChart
          chartData={data}
          id="circle-chart-live-data"
      />
    </div>
  )
}

export default CircleChartLiveData

Rounded Corners

import React from 'react'

import CircleChart from 'playbook-ui'

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

export default CircleChartRounded

Accepts Any Block

import React from 'react'

import CircleChart from 'playbook-ui'
import Title from 'playbook-ui'

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
    >
      <Title
          size={1}
          tag="div"
      >
        {'83'}
      </Title>
    </CircleChart>
  </div>
)

export default CircleChartBlock

Color Overrides

import React from 'react'

import CircleChart from 'playbook-ui'

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

export default CircleChartColors

Data Labels

import React from 'react'

import CircleChart from 'playbook-ui'

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

export default CircleChartWithLabels

Legend

import React from 'react'

import CircleChart from 'playbook-ui'

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

export default CircleChartWithLegendKit

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 CircleChart from 'playbook-ui'

import {Title} from 'playbook-ui'

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

export default CircleChartLegendPosition

Title

import React from 'react'

import CircleChart from 'playbook-ui'

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

export default CircleChartWithLegendKit

Inner Circle Size Options

import React from 'react'

import CircleChart from 'playbook-ui'

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"
    />
    <CircleChart
        chartData={dataSecond}
        id="with-innersize-md"
        innerSize="md"
    />
    <CircleChart
        chartData={dataThird}
        id="with-innersize-lg"
        innerSize="lg"
    />
    <CircleChart
        chartData={dataFourth}
        className="poop"
        id="with-innersize-none "
        innerSize="none"
    />
  </div>
)

export default CircleChartInnerSizes

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.y} are useful values that can be referenced for each point in the graph.

import React from 'react'

import CircleChart from 'playbook-ui'

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

const CircleChartCustomTooltip = (props) => (
  <div>
    <CircleChart
        chartData={data}
        id="circle-chart-default"
        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
    />
  </div>
)

export default CircleChartCustomTooltip

Circle Chart

Prop

Available Props

Contribute to Playbook

Power

Connect