use-g2
v0.5.0
Published
React hooks for G2
Downloads
3
Readme
use-g2
Installation
$ npm install use-g2 --save
or
$ yarn add use-g2
@antv/data-set
is an optional dependency. If you use hooks related to it, it is better to add it to your dependencies:
$ npm install @antv/data-set --save
or
$ yarn add @antv/data-set
Usage
Basic
import React from 'react';
import { useG2Chart } from 'use-g2';
export default () => {
const source = [
{ name: 'foo', age: 20 },
{ name: 'bar', age: 22 },
];
const [ref, chart] = useG2Chart({ height: 200, source });
chart.point().position('name*age');
return <div ref={ref} />;
};
With @antv/data-set
import React from 'react';
import { useDataSetView, useG2Chart } from 'use-g2';
export default () => {
const source = [
{ name: 'foo', age: 20 },
{ name: 'bar', age: 22 },
];
const [dv] = useDataSetView({});
const [ref, chart] = useG2Chart({ dv, height: 200, source });
chart.point().position('name*age');
dv.transform({
type: 'filter',
callback(row) {
return row.age < 21;
},
});
return <div ref={ref} />;
};