Nanananananananana.. Pat Man!

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

    1.4.2 • Public • Published

    @ant-design/charts

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

    build npm npm GitHub stars npm License

    WebsiteQuick StartGalleryFAQBlog

    Case

    Statistical charts

    Flowchart

    Maps

    Relation Graphs

    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: 44788198 .

    License

    MIT

    Keywords

    none

    Install

    npm i @ant-design/charts

    DownloadsWeekly Downloads

    38,683

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    28.2 MB

    Total Files

    10

    Last publish

    Collaborators

    • madccc
    • afc163
    • vthinkxie
    • zombiej
    • chenshuai2144
    • vagusx
    • wynterding
    • yutingzhao1991
    • arvinxx
    • rdmclin2
    • flash1
    • kn9117