Line chart

Purpose

This component allows to create line charts and area charts. 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 curves 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. The smoothing of lines is affected by the smooth field. By default, the area under the line is colored. You can disable this by passing the false value in the area field, or you can set a different fill direction (max, min, zero options are available). You can find all the available settings in the TLineConfig type.

Usage

import { useState, useEffect } from 'react';
import { useLine } from 'effcharts/line';

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

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: 'Base vals',
                field: 'uv',
                color: 'green',
                smooth: true,
                area: {
                    towards: 'max'
                }
            },
            sec: {
                title: 'Next vals',
                field: 'pv',
                color: 'blue',
                area: false
            },
        }
    }));
    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-line config={config}>
        </effcharts-line>
    </div>;
}

Types

You can declare a web component using the ILineChartAttrs interface. You can also validate the chart config using the TLineConfig type.

import { HTMLAttributes } from 'react';
import { ILineChartAttrs, TLineConfig } from 'effcharts/line';

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

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

// 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: 'Base vals',
            field: 'uv',
            color: 'green',
            smooth: true,
            area: {
                towards: 'max'
            }
        },
        sec: {
            title: 'Next vals',
            field: 'pv',
            color: 'blue',
            area: false
        },
    }
} satisfies TLineConfig;