@licuido-ui/ui_pie-chart NPM

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 raslan@crayond.co

Link

Story Book Link Table

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_pie-chart

Image

alt text

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]}
/>

@emotion/react @emotion/styled @mui/material apexcharts react react-apexcharts react-dom

@licuido-ui/react

1.0.1

8 months ago