Installing

$ npm install @berryv/g2-react

importReactfrom"react";import{Chart}from"@berryv/g2-react";exportfunctionDemo(){return(<Chartoptions={{type:"interval",width:640,height:480,data:[{genre:"Sports",sold:275},{genre:"Strategy",sold:115},{genre:"Action",sold:120},{genre:"Shooter",sold:350},{genre:"Other",sold:150},],encode:{x:"genre",y:"sold"},}}/>);}

API Reference

Examples

Creating Chart

importReactfrom"react";import{Chart}from"@berryv/g2-react";import{Renderer}from"@antv/g-svg";exportfunctionDemo(){constrenderer=useMemo(()=>newRenderer(),[]);return(<Chart// Set renderer to SVG, optional.renderer={renderer}options={{type:"interval",autoFit:true,// Fit the container.data:[{genre:"Sports",sold:275},{genre:"Strategy",sold:115},{genre:"Action",sold:120},{genre:"Shooter",sold:350},{genre:"Other",sold:150},],encode:{x:"genre",y:"sold"},}}/>);}

Updating Data

importReact,{useState,useMemo}from"react";import{Chart}from"@berryv/g2-react";exportfunctionDemo(){const[data,setData]=useState(null);// The options will update after data updating.constoptions=useMemo(()=>({type:"interval",      data,encode:{x:"genre",y:"sold"},}),[data]);useEffect(()=>{// Mock the fetch delay.setTimeout(()=>{// Update the data.setData([{genre:"Sports",sold:275},{genre:"Strategy",sold:115},{genre:"Action",sold:120},{genre:"Shooter",sold:350},{genre:"Other",sold:150},]);},1000);});return<>{data===null ?<p>Loading...</p> :<Chartoptions={options}/>}</>;}

Handling Events

importReact,{useRef,useEffect}from"react";import{ChartEvent}from"@antv/g2";import{Chart}from"@berryv/g2-react";exportfunctionDemo(){constchartRef=useRef();functiononInit(){constchart=chartRef.current;// Listen input events.chart.on("plot:mouseover",()=>{});// Listen lifecycle events.chart.on(ChartEvent.AFTER_RENDER,()=>{// Emit to init the state of highlight interaction.chart.emit("element:highlight",{data:{data:{genre:"Sports"},},});});}return<Chartref={chartRef}onInit={onInit}/>;}

Customizing Component

importReact,{useRef,useEffect}from"react";import{register}from"@antv/g2";// Register a triangle shape for interval globally.register("shape.interval.triangle",(style,context)=>{const{ document}=context;return(P,value,defaults)=>{const{color:defaultColor}=defaults;const[p0,p1,p2,p3]=P;constpm=[(p0[0]+p1[0])/2,p0[1]];const{ color=defaultColor}=value;constgroup=document.createElement("g");constpolygon=document.createElement("polygon",{style:{        ...style,fill:color,points:[pm,p2,p3],},});group.appendChild(polygon);returngroup;};});exportfunctionDemo(){return(<Chartoptions={{type:"interval",data:[{genre:"Sports",sold:275},{genre:"Strategy",sold:115},{genre:"Action",sold:120},{genre:"Shooter",sold:350},{genre:"Other",sold:150},],encode:{x:"genre",y:"sold",shape:"triangle",// Use the custom shape.},}}/>);}

Styling Container

importReactfrom"react";import{Chart}from"@berryv/g2-react";exportfunctionDemo(){// ...return(<Chartoptions={{autoFit:true}}style={{width:800,height:600,background:"#eee",padding:"1em",borderRadius:"0.5em",}}/>);}