Pie chart

Purpose

This component allows to create pie and donut charts. By default, it already enables tooltip. The source data is transmitted as an array in the data field, and the displayed groups as an object in the series field. The sector size and color fileds are defined in series field and color respectively. To create donut chart sectors you need to specify inner and outer series fields, they set inner and outer radius. You can find all the available settings in the TPieConfig type.

Usage

import { useState, useEffect } from 'react';
import { usePie } from 'effcharts/pie';

// define custom web component before use
// note, that for SSR you need to call it before browser parse document body
// so you might need to add separate definition script to the document head
const { observe, getConfig } = usePie();

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(getConfig({
        data: [
            {
                name: 'Page A',
                uv: 4000,
                pv: 2400,
                color: 'green'
            },
            {
                name: 'Page B',
                uv: 3000,
                pv: 1398,
                color: 'red'
            },
            {
                name: 'Page C',
                uv: 2000,
                pv: 9800,
                color: 'blue'
            }
        ],
        series: {
            def: {
                field: 'uv',
                color: 'color',
                title: 'Default',
                inner: 0.55,
                outer: 1
            },
            sec: {
                field: 'pv',
                color: 'color',
                title: 'Secondary',
                outer: 0.5,
                angle: 180
            }
        }
    }));
    useEffect(() => {
        // you can observe web component events
        const unobserve = observe((e) => {
            // event handler
        }, ref.current);
        // and you can unobserve
        return () => unobserve();
    }, []);
    // just use web component in jsx
    return <div ref={ref}>
        <effcharts-pie config={config}>
        </effcharts-pie>
    </div>;
}

Types

You can declare a web component using the IPieChartAttrs interface. You can also validate the chart config using the TPieConfig type.

import { HTMLAttributes } from 'react';
import { IPieChartAttrs, TPieConfig } from 'effcharts/pie';

type CustomElement<T> = Partial<T & HTMLAttributes<T> & { children: any }>;

// declare effcharts components
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
        'effcharts-pie': CustomElement<IPieChartAttrs>;
    }
  }
}

// prepare config
const config = {
    data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            color: 'green'
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            color: 'red'
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            color: 'blue'
        }
    ],
    series: {
        def: {
            field: 'uv',
            color: 'color',
            title: 'Default',
            inner: 0.55,
            outer: 1
        },
        sec: {
            field: 'pv',
            color: 'color',
            title: 'Secondary',
            outer: 0.5,
            angle: 180
        }
    }
} satisfies TPieConfig;