Bar chart

Purpose

This component allows to create bar charts (also stacked). By default, it already enables the grid, axes, labels, and tooltip. The source data is transmitted as an array in the data field, and the displayed bars as an object in the series field. By default the name field inside data object is used to generate associated label. The column size and color are defined in series field and color respectively. To arrange the columns in the stack, you need to set the same value of the stack field for several series. You can find all the available settings in the TBarConfig type.

Usage

import { useState, useEffect } from 'react';
import { useBar } from 'effcharts/bar';

// 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 } = useBar();

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(getConfig({
        data: [
            {
                name: 'Page A',
                uv: 4000,
                pv: 2400,
                amt: -2400,
            },
            {
                name: 'Page B',
                uv: 3000,
                pv: 1398,
                amt: -2210,
            },
            {
                name: 'Page C',
                uv: 2000,
                pv: 9800,
                amt: -2290,
            }
        ],
        series: {
            def: {
                title: 'Default',
                field: 'uv',
                color: 'blue'
            },
            sec: {
                title: 'Secondary',
                field: 'pv',
                color: 'green'
            }
        }
    }));
    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-bar config={config}>
        </effcharts-bar>
    </div>;
}

Types

You can declare a web component using the IBarChartAttrs interface. You can also validate the chart config using the TBarConfig type.

import { HTMLAttributes } from 'react';
import { IBarChartAttrs, TBarConfig } from 'effcharts/bar';

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

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

// prepare config
const config = {
    data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            amt: -2400,
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            amt: -2210,
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            amt: -2290,
        }
    ],
    series: {
        def: {
            title: 'Default',
            field: 'uv',
            color: 'blue'
        },
        sec: {
            title: 'Secondary',
            field: 'pv',
            color: 'green'
        }
    }
} satisfies TBarConfig;