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

Playbook Styles

You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

import React from 'react'

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

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

const baseOptions = {
  series: [{ data: data }],
}

const CircleChartPbStyles = () => {
  const options = Highcharts.merge({}, circleChartTheme, baseOptions )

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

export default CircleChartPbStyles;

Live Data

import React, { useState } from 'react'

import { CircleChart, 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, 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, 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