# @antv/g2-brush

> Select a one-, two-dimensional or irregular region using the mouse.

Latest version **0.0.2** (published 2017-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @antv/g2-brush
pnpm add @antv/g2-brush
yarn add @antv/g2-brush
bun add @antv/g2-brush
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2017-12-15 |
| First published | 2017-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | sima.zhang1990@gmail.com |
| Maintainers | dxq613, simaq, dori, leungwensen |
| Keywords | antv, g2-brush, g2 |

## Links

- npm: https://www.npmjs.com/package/@antv/g2-brush
- Repository: https://github.com/antvis/g2-brush
- Homepage: https://github.com/antvis/g2-brush#readme
- Issues: https://github.com/antvis/g2-brush/issues
- npm.io page: https://npm.io/package/@antv/g2-brush

## Recent versions

- 0.0.2 (latest) — 2017-12-15
- 0.0.1 — 2017-12-15

## README

# g2-brush

![](https://img.shields.io/badge/language-javascript-red.svg)
![](https://img.shields.io/badge/license-MIT-000000.svg)

[![npm package](https://img.shields.io/npm/v/@antv/g2-brush.svg)](https://www.npmjs.com/package/@antv/g2-brush)
[![NPM downloads](http://img.shields.io/npm/dm/@antv/g2-brush.svg)](https://npmjs.org/package/@antv/g2-brush)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2-brush.svg)](http://isitmaintained.com/project/antvis/g2-brush "Percentage of issues still open")


## Install

```bash
$ npm install @antv/g2-brush
```

or use cdn:

```html
<script src="https://gw.alipayobjects.com/os/antv/assets/g2-brush/0.0.1/g2-brush.js"></script>
```

## Usage

First of all, the brush instance must be created after the chart be rendered.

```js
import Brush from '@antv/g2-brush';
// ...
chart.render();

new Brush({
  canvas: chart.get('canvas'), // must be set
  chart, // if you want to filter data by default, please set the chart
  type: 'X', // set the brush type, default value is 'XY'
});
```

### Example

online demos: [https://antvis.github.io/g2-brush/demos/#](https://antvis.github.io/g2-brush/demos/#)

![](https://gw.alipayobjects.com/zos/rmsportal/HRkzmAbHDcJYweUxDAlC.gif)

```js
$.getJSON('./data/top2000.json', data => {
  const ds = new DataSet();
  const dv = ds.createView('test')
    .source(data)
    .transform({
      as: [ 'count' ],
      groupBy: [ 'release' ],
      operations: [ 'count' ],
      type: 'aggregate'
    });

  const chart = new G2.Chart({
    container: 'canvas',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(dv);
  chart.scale({
    count: {
      alias: 'top2000 唱片总量'
    },
    release: {
      tickInterval: 5,
      alias: '唱片发行年份'
    }
  });
  chart.interval()
    .position('release*count')
    .color('#e50000');

  chart.render();

  new Brush({
    canvas: chart.get('canvas'),
    chart,
    type: 'X',
    onBrushstart() {
      chart.hideTooltip();
    },
    onBrushmove() {
      chart.hideTooltip();
    }
  });
  chart.on('plotdblclick', () => {
    chart.get('options').filters = {};
    chart.repaint();
  });
});
```

## API

[API DOCS](https://github.com/antvis/g2-brush/blob/master/docs/brush.md)

## Development

```bash
$ npm install

$ npm run dev
```

## How to Contribute

Please let us know how can we help. Do check out [issues](https://github.com/antvis/g2-brush/issues) for bug reports or suggestions first.

To become a contributor, please follow our [contributing guide](https://github.com/antvis/g2-brush/blob/master/CONTRIBUTING.md).

---
_Source: https://npm.io/package/@antv/g2-brush · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._