Wondering what’s next for npm?Check out our public roadmap! »

    @antv/g2
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.14 • Public • Published

    English | 简体中文

    G2

    A highly interactive data-driven visualization grammar for statistical charts.

    CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

    WebsiteTutorial DocsBlogG2Plot

    G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, you can describe the visual appearance and interactive behavior of a visualization just by one statement, and generate web-based views using Canvas or SVG.

    📺 Live Demos

    Features

    • 💯Stable grammar of graphics: enable to draw all kinds of charts by mapping data to graphics.
    • 🤩New grammar of interaction: interaction behaviors combined with Trigger and Action mechanisms are used to exploring data.
    • 🦍Advanced View module: with the ability to develop customized multi-dimension data analysis graphics.
    • 👬Dual-engine rendering: with the ability to switch Canvas and SVG freely.
    • 💄Visual components: interaction-oriented, elegant experience.
    • 🛡Fully embrace Typescript: Complete type definition files are provided.

    📦 Installation

    $ npm install @antv/g2

    🔨 Getting Started

    Before drawing we need to prepare a DOM container for G2:

    <div id="c1"></div>
    import { Chart } from '@antv/g2';
    
    const data = [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ];
    
    // Step 1: Create a Chart instance.
    const chart = new Chart({
      container: 'c1', // Specify chart container ID
      width: 600, // Specify chart width
      height: 300, // Specify chart height
    });
    
    // Step 2: Load the data.
    chart.data(data);
    
    // Step 3: Declare the grammar of graphics, draw column chart.
    chart.interval().position('genre*sold');
    
    // Step 4: Render chart.
    chart.render();

    ⌨️ Development

    # Install dependencies
    $ npm install
    
    # Run test cases
    $ npm run test
    
    # Open electron to run test cases and listen to file changes
    $ npm run test-live
    
    # Run CI
    $ npm run ci
    
    # Run website
    $ npm start

    🏷️ Releases

    You can also use G2Plot which is an interactive and responsive charting library based on G2. You can easily make superior statistical plots through a few lines of code.

    🤝 How to Contribute

    Please let us know how can we help. Do check out issues for bug reports or suggestions first.

    To become a contributor, please follow our contributing guide.

    Let's fund issues in this repository

    Contact us

    DingTalk Group: 30233731

    Install

    npm i @antv/g2

    DownloadsWeekly Downloads

    82,339

    Version

    4.1.14

    License

    MIT

    Unpacked Size

    10.7 MB

    Total Files

    1456

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar