Playbook Design System

Default

In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

import React from "react";

import { PbCircleChart } from 'playbook-ui'

const chartOptions = {
  series: [
    {
      data: [
        {
          name: "Waiting for Calls",
          y: 41,
        },
        {
          name: "On Call",
          y: 49,
        },
        {
          name: "After Call",
          y: 10,
        },
      ],
    },
  ],
};
const PbCircleChartDefault = (props) => (
  <div>
    <PbCircleChart
        options={chartOptions}
    />
  </div>
);

export default PbCircleChartDefault;

Live Data

import React, { useState } from "react";

import { PbCircleChart, Button } from 'playbook-ui'

const chartData = [
  {
    name: "Waiting for Calls",
    y: 41,
  },
  {
    name: "On Call",
    y: 49,
  },
  {
    name: "After Call",
    y: 10,
  },
];

const chartData2 = [
  {
    name: "Waiting for Calls",
    y: 48,
  },
  {
    name: "On Call",
    y: 12,
  },
  {
    name: "After Call",
    y: 140,
  },
];

const PbCircleChartLiveData = (props) => {

  const [data, setData] = useState(chartData);

    const updateValue = () => {
    setData(chartData2)
  }
    const chartOptions = {
    series: [{ data: data }],
  }

  return (
    <div>
      <Button
          onClick={updateValue}
          text="Update Value"
      />
      <PbCircleChart
          options={chartOptions}
      />
    </div>
  );
};

export default PbCircleChartLiveData;

Rounded Corners

import React from "react";

import { PbCircleChart } from 'playbook-ui'

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

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

  return (
    <div>
      <PbCircleChart
          options={chartOptions}
      />
    </div>
  );
};

export default PbCircleChartRounded;

Accepts Any Block

import React from "react";

import { PbCircleChart, Title } from 'playbook-ui'

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

const PbCircleChartBlockContent = (props) => {
const chartOptions = {
    series: [{
      data: data,
      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';
          }
        }
      }
    }
  }

  return (
    <div style={{ position: 'relative' }}>
      <PbCircleChart
          options={chartOptions}
      />
      <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>
  );
};

export default PbCircleChartBlockContent;

Color Overrides

Custom data colors allow for color customization to match the needs of business requirements.

For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables.

For Rails, only HEX colors can be used eg: #CA0095

import React from "react";

import { PbCircleChart, colors } from 'playbook-ui'

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

const PbCircleChartColorOverrides = (props) => {
const chartOptions = {
    series: [{ data: data }],
    plotOptions: {
      pie: {
        colors: ["#144075", colors.data_4, colors.data_2], // Custom colors via hex OR Playbook color tokens
      },
    },
  };

  return (
  <div>
    <PbCircleChart
        options={chartOptions}
    />
  </div>
);
}

export default PbCircleChartColorOverrides;

Data with Labels

import React from "react";

import { PbCircleChart } from 'playbook-ui'

const data = [
  {
    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 PbCircleChartDataWithLabels = (props) => {
const chartOptions = {
  series: [{ data: data }],
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
      },
    },
  },
};

  return (
  <div>
    <PbCircleChart
        options={chartOptions}
    />
  </div>
);
}

export default PbCircleChartDataWithLabels;

Data with Legend

import React from "react";

import { PbCircleChart } from 'playbook-ui'

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

const PbCircleChartDataWithLegend = (props) => {
const chartOptions = {
  series: [{ data: data }],
  plotOptions: {
    pie: {
      showInLegend: true,
    },
  },
};

  return (
  <div>
    <PbCircleChart
        options={chartOptions}
    />
  </div>
);
}

export default PbCircleChartDataWithLegend;

Legend Position

Layout options from Highcharts:

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 { PbCircleChart, Title } from 'playbook-ui'

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 PbCircleChartDataLegendPosition = (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
      }
    }
  }

  return (
  <div>
    <Title
        paddingY="sm"
        size={4}
        tag="h4"
        text="align | verticalAlign"
    />
    <PbCircleChart
        options={chartOptionsFirst}
    /> 
    <Title
        paddingY="sm"
        size={4}
        tag="h4"
        text="layout"
    />
    <PbCircleChart
        options={chartOptionsSecond}
    />
    <Title
        paddingY="sm"
        size={4}
        tag="h4"
        text="x | y"
    />
    <PbCircleChart
        options={chartOptionsThird}
    />
  </div>
);
}

export default PbCircleChartDataLegendPosition;

With Title

import React from "react";

import { PbCircleChart } from 'playbook-ui'

const data= [
{
    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 PbCircleChartWithTitle = (props) => {
const chartOptions = {
    title: { text: "Active Users on Social Media" },
    series: [{ data: data }],
  };

  return (
    <div>
      <PbCircleChart
          options={chartOptions}
      />
    </div>
  );
};

export default PbCircleChartWithTitle;

Inner Circle Size Options

import React from "react";

import { PbCircleChart } from 'playbook-ui'

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 PbCircleChartInnerSizes= (props) => {
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%'
    }],
  }

  return (
    <div>
      <PbCircleChart
          options={chartOptionsSmall}
      />
      <PbCircleChart
          options={chartOptionsMedium}
      />
      <PbCircleChart
          options={chartOptionsLarge}
      />
      <PbCircleChart
          options={chartOptionsNone}
      />
    </div>
  );
};

export default PbCircleChartInnerSizes;

Tooltip Customization

Tooltip options from Highcharts:

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 { PbCircleChart } from 'playbook-ui'

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

const PbCircleChartCustomTooltip = (props) => {
const chartOptions = {
    series: [{ data: data }],
    tooltip: {
      headerFormat: null,
      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
      useHTML: true,
    },
  }

  return (
    <div>
      <PbCircleChart
          options={chartOptions}
      />
    </div>
  );
};

export default PbCircleChartCustomTooltip;

PB Circle Chart

Available Props

Contribute to Playbook

Power

Connect