Pie Chart

A pie chart is a circular statistical graphic that is divided into slices to illustrate numerical proportions. Each slice represents a proportion or percentage of the whole. The size of each slice is directly proportional to the quantity it represents, making it easy to visualize the relative magnitudes of the different categories.

Author

• @author Raslan [email protected]

Link

Story Book Link Table

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_pie-chart

Image

Import component

import { PieChart } from '@licuido-ui/ui_pie-chart';

Usage

<PieChart option={{}} series={[]} />

Props

| Property | Type | Description | Default Value | | ----------------------- | ------------------------------------------------- | --------------------------------------------------------------------- | ----------------- | | LineChartProps | | | | | className | string | Represents the class name for the LineChart component. | '' | | sx | SxProps | Represents the style props for the LineChart component. | {} | | headerStyle | SxProps | Represents the style props for the header of the LineChart component. | undefined | | graphStyle | SxProps | Represents the style props for the graph in the LineChart component. | undefined | | graphComponentStyle | SxProps | Represents the style props for the LineChart component. | undefined | | options | ApexCharts.ApexOptions | Represents the options for the ApexCharts. | undefined | | series | ApexAxisChartSeries | ApexNonAxisChartSeries | Represents the series for the ApexCharts. | [] | | headerComponent | string | React.ReactNode | Represents the header component for the LineChart. | undefined | | width | string | number | Represents the width of the LineChart component. | '100%' | | height | string | number | Represents the height of the LineChart component. | 'auto' |

Option props

| Option | Description | Example Value | | ---------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | | chart | Object containing the chart configuration, including the ID of the chart. | { id: 'basic-line', type: 'line' } | | xaxis | Object containing the configuration for the X-axis, such as categories for the chart. | { categories: [1991, 1992, 1993] } | | stroke | Object defining the curve of the line. | { curve: 'smooth' } | | title | Object containing the title configuration for the chart. | { text: 'Line Chart' } | | subtitle | Object containing the subtitle configuration for the chart. | { text: 'Sample Subtitle' } | | markers | Object defining the size of the markers on the chart. | { size: 6, strokeWidth: 0 } | | yaxis | Object containing the configuration for the Y-axis, including the title of the Y-axis. | { title: { text: 'Values' } } | | grid | Object defining the grid configuration for the chart, including row colors and opacity. | { row: { colors: ['#f3f3f3', 'transparent'], opacity: 0.5 } } | | dataLabels | Object defining whether data labels are enabled or not. | { enabled: false } | | tooltip | Object defining the configuration for the tooltip, including enabling it and setting the font size. | { enabled: true, style: { fontSize: '12px' } } |

Sample Props

<PieChart
  width={500}
  height={300}
  options={{
    labels: ['Engineers', 'Analyst', 'Deisgners', 'Human Resource', 'Marketing'],
    dataLabels: {
      enabled: true,
    },
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: true,
          },
        },
      },
    },
    title: {
      text: 'Crayond',
      align: 'left',
    },
    subtitle: {
      text: 'policy',
      align: 'left',
    },
  }}
  series={[44, 55, 41, 17, 15]}
/>