Negligible Participation Metric

    @ant-design/charts
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.14 • Public • Published

    @ant-design/charts

    A React chart library, based on G2Plot, G6, X6, L7.

    build npm npm GitHub stars npm License

    WebsiteQuick StartGalleryFAQBlog

    Features

    • Easy to use
    • TypeScript
    • Pretty & Lightweight
    • Responsive
    • Storytelling

    📦 Installation

    $ npm install @ant-design/charts

    🔨 Usage

    import React from 'react';
    import { Line } from '@ant-design/charts';
    
    const Page: React.FC = () => {
      const data = [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
      ];
    
      const config = {
        data,
        width: 800,
        height: 400,
        autoFit: false,
        xField: 'year',
        yField: 'value',
        point: {
          size: 5,
          shape: 'diamond',
        },
        label: {
          style: {
            fill: '#aaa',
          },
        },
      };
    
      let chart;
    
      // Export Image
      const downloadImage = () => {
        chart?.downloadImage();
      };
    
      // Get chart base64 string
      const toDataURL = () => {
        console.log(chart?.toDataURL());
      };
    
      return (
        <div>
          <button type="button" onClick={downloadImage} style={{ marginRight: 24 }}>
            Export Image
          </button>
          <button type="button" onClick={toDataURL}>
            Get base64
          </button>
          <Line {...config} onReady={(chartInstance) => (chart = chartInstance)} />
        </div>
      );
    };
    export default Page;

    Preview

    📜 Document & API

    See chart API for details. Common props:

    Property Description Type defaultValue
    onReady chart loaded callback (chart)=> void -
    onEvent chart events (chart, event)=> void -
    loading loading status boolean -
    loadingTemplate loading template React.ReactElement -
    errorTemplate custom error template (e: Error) => React.ReactNode -
    className container class string -
    style container style React.CSSProperties -

    🤝 How to Contribute

    Your contributions are always welcome! Please Do have a look at the issues first.

    📧 Contact us

    DingTalk group number: 30233731.

    License

    MIT

    Keywords

    none

    Install

    npm i @ant-design/charts

    DownloadsWeekly Downloads

    23,451

    Version

    1.2.14

    License

    MIT

    Unpacked Size

    28 MB

    Total Files

    344

    Last publish

    Collaborators

    • yesmeck
    • afc163
    • heskey
    • wilsoncook
    • vthinkxie
    • tangjinzhou
    • bang88
    • zombiej
    • chenshuai2144
    • vagusx
    • gongzhen
    • dahong
    • ycjcl868
    • kn9117
    • esora
    • wynterding
    • yutingzhao1991
    • duxiaodong
    • arvinxx
    • mmmary
    • carrietan
    • rdmclin2
    • wendellhu95