### Examples:

### Basic 
New Graph requires ctx , w , h, type and then data
```
const ctx = c.getContext('2d')

const G = new Graph(ctx,290,290,Graph.BAR,{
x:[100,140,230],
y:[40,6,70],
}
)
```
### Import
```
import Graph from '@jandkboy/graph-maker'
```
### Types ?
```
console.log(Graph.ALLTYPES)
```
### Data of Graph Instance
```
c = ctx
W = width
H = height
t = Type of Graph 
data = Data

Data Contains these
x : x axis
y : y axis
barlabels: labels array
colors: colors array
radius: for Pie and Ring charts
fill: fill area of line Graph
markers: markers
fixed: fixed
line: line for pie graphs


Markers -
c circle
s square
String custom marker e.g - , + etc


Types -

LINE 
 MULTIPLELINE
SCATTER 
MULTIPLESCATTER 
BAR 
MULTIPLEBAR 
PIE 
 MULTIPLEPIE 
 HIST
 HISTCENTER 
HISTSIZE100
RADAR
MULTIPLERADAR 
CIRCULARRADAR 
MULTIPLECIRCULARRADAR 
RING
 CURVE 
 HEAT
 FUNNEL 
BULLET 
SPEEDOMETER 



```
### To add Translations 
requires canvasElement and update function
```
G.events(canvasElement , update)
```

### To add Zoom functionality on events
Returns a array of functions to be used for Zoom
requires 
G object  Graph instance 
update update function
```
Graph.zoomfunction(G, update)[0]() // Zoom out
Graph.zoomfunction(G , update)[1]() // Zoom in 
```


### Update Function 
requires two colors for bg and line strokes and then whether to match the bg and then whether to match lineStrokes
```
function update (){
G.update(
"hsla(225,36%,53%,0.72)",
"hsl(225,36%,16%)",
true , true
)
}
update()
```
### Line Graphs:
```
const ctx = c.getContext('2d')

const G = new Graph(ctx,290,290,Graph.LINE ,{
x:[100,140,230],
y:[40,6,70],
}
)
function update (){
G.update(
"hsla(225,36%,53%,0.72)",
"hsl(225,36%,16%)",
true , true
)
}
update()
```

### Bar Graphs
```
const ctx = c.getContext('2d')

const G = new Graph(ctx,290,290,Graph.BAR,{
x:[100,140,230],
y:[40,6,70],
}
)
function update (){
G.update(
"hsla(225,36%,53%,0.72)",
"hsl(225,36%,16%)",
true , true
)
}
update()


```

### Full Example with PIE GRAPHS
```
<canvas id="c" height="500" width="500" style="background:hsl(225,36%,16%)"></canvas>
<button id="btn">+</button>
<button id="bn">-</button>
```
```
const type = Graph.PIE
let Q = new Graph(
c.getContext("2d") 
,
500,500,
 type , {
x : [570, 160, 230, 710, 980, 800, 430, 800, 807, 102],
y : [940, 90, 700, 960, 310, 306, 309, 807, 602, 804],
marker: true ,
fixed: true ,
fill: false ,
line: true ,
}
)
btn.addEventListener("click" , (e) => {
Graph.zoomfunction(Q , update)[0]()
})
bn.addEventListener("click" , (e) => {
Graph.zoomfunction(Q , update)[1]()
})
Q.events(c , update)
function update(){
Q.update("hsla(225,34%,64%,0.771)" ,"hsla(225,34%,44%,0.471)" , true , true)
}
update()
```
![Image]("https://madarauchihame.w3spaces.com/Screenshot_20230610_184856_anWriter.jpg")