Playbook Design System

Default Style

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 chartOptions = {
  series: [{ data: data }],
}

const CircleChartDefault = () => {
  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

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

export default CircleChartDefault;

Live Data

import React, { useState } from 'react'

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

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

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

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

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

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <Button
          onClick={updateValue}
          text="Update Value"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default CircleChartLiveData

Rounded Corners

import React from 'react'

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

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

const CircleChartRounded = () => {
  const chartOptions = {
    series: [{ data: dataRounded }],
    plotOptions: {
      pie: {
        borderColor: null,
        borderWidth: 20,
        innerSize: '100%',
      },
    },
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

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

export default CircleChartRounded

Accepts Any Block

import React from 'react'

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

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

const CircleChartBlock = (props) => {
  const chartOptions = {
    series: [{
      data: dataWithABlock,
      innerSize: '100%',
      borderWidth: 20,
      borderColor: null,
    }],
    chart: {
      events: {
        render: function() {
          const chart = this;
          const blockElement = document.querySelector('.pb-circle-chart-block');
          if (blockElement) {
            blockElement.style.width = chart.chartWidth + 'px';
            blockElement.style.height = chart.chartHeight + 'px';
          }
        },
        redraw: function() {
          const chart = this;
          const blockElement = document.querySelector('.pb-circle-chart-block');
          if (blockElement) {
            blockElement.style.width = chart.chartWidth + 'px';
            blockElement.style.height = chart.chartHeight + 'px';
          }
        }
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <div style={{ position: 'relative' }}>
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
        />
        <div 
            className="pb-circle-chart-block"
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              zIndex: 1,
              textAlign: 'center',
              pointerEvents: 'none'
          }}
        >
          <Title
              size={1}
              tag="div"
          >
            {'83'}
          </Title>
        </div>
      </div>
    </div>
  )
}

export default CircleChartBlock

Color Overrides

Custom data colors allow for color customization to match the needs of business requirements.
Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available eg: #CA0095.

import React from 'react'

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

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

const CircleChartColors = () => {
  const chartOptions = {
    series: [{ data: dataWithColors }],
    plotOptions: {
      pie: {
        colors: ["#144075", colors.data_4, colors.data_2]
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

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

export default CircleChartColors

Data Labels

import React from 'react'

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

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

const CircleChartWithLabels = () => {
  const chartOptions = {
    series: [{ data: dataWithLabels }],
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
        }
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

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

export default CircleChartWithLabels

Legend

import React from 'react'

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

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

const CircleChartWithLegendKit = () => {
  const chartOptions = {
    series: [{ data: dataWithLegend }],
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </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 alignment. Negative x moves it to the left, positive x moves it to the right

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

import React from 'react'

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

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

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

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

const CircleChartLegendPosition = (props) => {
  const chartOptionsFirst = {
    title: { text: "Alignment of Legend" },
    series: [{ data: dataFirst }],
    legend: {
      align: 'right',
      verticalAlign: 'top'
    },
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const chartOptionsSecond = {
    title: { text: "Layout of Legend" },
    series: [{ data: dataSecond }],
    legend: {
      layout: 'vertical'
    },
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const chartOptionsThird = {
    title: { text: "Offset of Legend" },
    series: [{ data: dataThird }],
    legend: {
      layout: 'vertical',
      x: 100,
      y: 10
    },
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const optionsFirst = Highcharts.merge({}, circleChartTheme, chartOptionsFirst)
  const optionsSecond = Highcharts.merge({}, circleChartTheme, chartOptionsSecond)
  const optionsThird = Highcharts.merge({}, circleChartTheme, chartOptionsThird)

  return (
    <div>
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="align | verticalAlign"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsFirst}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="layout"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsSecond}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="x | y"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsThird}
      />
    </div>
  )
}

export default CircleChartLegendPosition

Title

import React from 'react'

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

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

const CircleChartWithTitle = () => {
  const chartOptions = {
    title: { text: "Active Users on Social Media" },
    series: [{ data: dataWithTitle }],
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

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

export default CircleChartWithTitle

Inner Circle Size Options

import React from 'react'

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

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

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

const dataThird = [
  {
    name: '1 Point Tickets',
    y: 2,
  },
  {
    name: '3 Point Tickets',
    y: 5,
  },
  {
    name: '5 Point Tickets',
    y: 6,
  },
  {
    name: '8 Point Tickets',
    y: 3,
  },
  {
    name: '13 Point Tickets',
    y: 1,
  },
]

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

const CircleChartInnerSizes = () => {
  const chartOptionsSmall = {
    series: [{ 
      data: dataFirst,
      innerSize: '35%'
    }],
  }

  const chartOptionsMedium = {
    series: [{ 
      data: dataSecond,
      innerSize: '50%'
    }],
  }

  const chartOptionsLarge = {
    series: [{ 
      data: dataThird,
      innerSize: '85%'
    }],
  }

  const chartOptionsNone = {
    series: [{ 
      data: dataFourth,
      innerSize: '0%'
    }],
  }

  const optionsSmall = Highcharts.merge({}, circleChartTheme, chartOptionsSmall)
  const optionsMedium = Highcharts.merge({}, circleChartTheme, chartOptionsMedium)
  const optionsLarge = Highcharts.merge({}, circleChartTheme, chartOptionsLarge)
  const optionsNone = Highcharts.merge({}, circleChartTheme, chartOptionsNone)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsSmall}
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsMedium}
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsLarge}
      />
      <div className="poop">
        <HighchartsReact
            highcharts={Highcharts}
            options={optionsNone}
        />
      </div>
    </div>
  )
}

export default CircleChartInnerSizes

Tooltip Customization

Custom tooltip formatting is configured through the tooltip object in the chart options:
headerFormat Type: String | when set to null will disable the header.
pointFormat Type: String | defines the HTML template for each data point and supports custom HTML when useHTML is enabled.
useHTML Type: boolean (default false) | enables HTML rendering in tooltips.
{point.name} and {point.y} are useful values that can be referenced for each point in the graph.

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 CircleChartCustomTooltip = () => {
  const chartOptions = {
    series: [{ data: data }],
    tooltip: {
      headerFormat: null,
      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
      useHTML: true,
    },
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

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

export default CircleChartCustomTooltip

Circle Chart

Prop

Available Props

Contribute to Playbook

Power

Connect