graphjs-react
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published


GraphJS-React

GraphJS-React provides you create graphs for your data.

CONTENTS
  1. Installation
  2. Usage
  3. Built With
  4. License

Installation

Follow the instructions to install GraphJS-React

$ npm install graphjs-react

(back to top)

Usage

Add GraphJS-React CSS file to your index.js.

import 'graphjs-react/index.css'

Built With

[![React][React.js]][React-url]

(back to top)

License

Distributed under the MIT License.

(back to top)

Documantation

Bar Chart

Name Description Default
data*
BarChartColumn[]
-
width
number
500
height
number
1200
onBarClick
(e: MouseEvent, item: BarChartColumn) => void
-
title
TitleProps
-
containerStyle
CSSProperties
-
labelStyle
CSSProperties
-
roundValue
number
-
range
numbernull
-
grid
boolean
true
rootStyle
CSSProperties
-
graphStyle
CSSProperties
-
backgroundColor
stringnull
white
legend
boolean
true
labels
Omit<LegendItemProps, "size">[]
-
titles
{ x: string; y: string; } | null
-
wheelScaling
boolean
-

Show Code
<BarChart
height={400}
onBarClick={() => {}}
data={[
  {
    color: 'rgb(110,221,234)',
    x: 'Ocak',
    y: -68
  },
  {
    color: 'rgb(106,226,126)',
    x: 'Şubat',
    y: -54
  },
  {
    color: 'rgb(154,222,111)',
    x: 'Mart',
    y: -37
  },
  {
    color: 'rgb(126,187,225)',
    x: 'Nisan',
    y: 56
  },
  {
    color: 'rgb(156,206,128)',
    x: 'Mayıs',
    y: 83
  },
  {
    color: 'rgb(116,245,247)',
    x: 'Haziran',
    y: -78
  },
  {
    color: 'rgb(235,196,136)',
    x: 'Temmuz',
    y: 30
  },
  {
    color: 'rgb(186,117,243)',
    x: 'Ağustos',
    y: 75
  },
  {
    color: 'rgb(221,157,208)',
    x: 'Eylül',
    y: -63
  },
  {
    color: 'rgb(252,122,106)',
    x: 'Ekim',
    y: 10
  },
  {
    color: 'rgb(193,139,193)',
    x: 'Kasım',
    y: 27
  },
  {
    color: 'rgb(254,173,150)',
    x: 'Aralık',
    y: -52
  }
]}
width={400}
  />

Funnel Chart

Name Description Default
data*
FunnelChartData
-
width*
number
-
height*
number
-
options
FunnelChartOptions
object
rootStyle
CSSProperties
-
graphStyle
CSSProperties
-
title
TitleProps
-
backgroundColor
stringnull
white

Show Code
<FunnelChart
data={[
  {
    backgroundColor: 'lightgreen',
    name: 'K',
    value: 999
  },
  {
    backgroundColor: 'green',
    name: 'B',
    value: 168
  },
  {
    backgroundColor: 'yellow',
    name: 'E',
    value: 114
  },
  {
    backgroundColor: 'red',
    name: 'C',
    value: 93
  },
  {
    backgroundColor: 'black',
    name: 'D',
    value: 32
  }
]}
height={500}
width={500}
/>

Pie Char

Name Description Default
data*
ItemProps[]
-
onMouseClickPiece
((e: MouseEvent, data: MouseEventData) => void)
e Mouseevent object
data Clicked data which contains { root: ItemProps, name: string, angle: number, bgColor: string }
-
legend
boolean
false
radius
number
120
scaled
boolean
false
textToCenter
boolean
false
rootStyle
CSSProperties
-
graphStyle
CSSProperties
-
title
TitleProps
-
backgroundColor
stringnull
white
labels
Omit<LegendItemProps, "size">[]
-
titles
{ x: string; y: string; } | null
-
doughnut
boolean
false

Show Code
  <Pie
  data={[
    {
      backgroundColor: 'lightgreen',
      name: 'K',
      textColor: 'white',
      value: 136
    },
    {
      backgroundColor: 'green',
      name: 'B',
      textColor: 'yellow',
      value: 85
    },
    {
      backgroundColor: 'red',
      name: 'C',
      textColor: 'white',
      value: 53
    },
    {
      backgroundColor: 'black',
      name: 'D',
      textColor: 'white',
      value: 22
    },
    {
      backgroundColor: 'yellow',
      name: 'E',
      textColor: 'black',
      value: 30
    }
  ]}
  legend
  onMouseClickPiece={() => {}}
/>

Line Chart

Name Description Default
data*
ChartColumn[] | ChartColumn[][]
-
width
number
500
height
number
1200
labels
Omit<LegendItemProps, "size">[]
-
title
TitleProps
-
titles
{ x: string; y: string; } | null
-
xAxisLabels
string[]
-
containerStyle
CSSProperties
-
labelStyle
CSSProperties
-
roundValue
number
-
range
numbernull
-
grid
boolean
true
wheelScaling
boolean
-
rootStyle
CSSProperties
-
graphStyle
CSSProperties
-
backgroundColor
stringnull
white
legend
boolean
true
onPointOver
((e: MouseEvent, item: ChartPointItem) => void)
-
onPointClick
((e: MouseEvent, item: ChartPointItem) => void)
-

Show Code
<LineChart
data={[
  [
    {
      color: 'rgb(119,219,103)',
      x: '2005',
      y: 34752098
    },
    {
      color: 'rgb(198,199,182)',
      x: '2006',
      y: 32487921
    },
    {
      color: 'rgb(187,183,118)',
      x: '2007',
      y: 53719722
    },
    {
      color: 'rgb(162,237,225)',
      x: '2008',
      y: 65884386
    },
    {
      color: 'rgb(153,122,222)',
      x: '2009',
      y: 50304302
    },
    {
      color: 'rgb(251,126,251)',
      x: '2010',
      y: 88975899
    }
  ],
  [
    {
      color: 'rgb(122,111,103)',
      x: '2005',
      y: 85404004
    },
    {
      color: 'rgb(241,254,214)',
      x: '2006',
      y: 44951584
    },
    {
      color: 'rgb(168,145,111)',
      x: '2007',
      y: 66770171
    },
    {
      color: 'rgb(172,186,236)',
      x: '2008',
      y: 88406893
    },
    {
      color: 'rgb(168,242,195)',
      x: '2009',
      y: 30232527
    },
    {
      color: 'rgb(237,119,101)',
      x: '2010',
      y: 17022190
    }
  ]
]}
height={400}
labels={[
  {
    color: 'blue',
    name: 'A'
  },
  {
    color: 'red',
    name: 'B'
  }
]}
onPointClick={() => {}}
onPointOver={() => {}}
title={{
  label: 'Countries\' Populations'
}}
titles={{
  x: 'Year',
  y: 'Population'
}}
width={400}
xAxisLabels={[
  '2005',
  '2002',
  '2006',
  '2007',
  '2008',
  '2009',
  '2010'
]}
/>

Show Code
<LineChart
data={[
  [
    {
      x: -35,
      y: 1225
    },
    {
      x: -34,
      y: 1156
    },
    {
      x: -33,
      y: 1089
    },
    {
      x: -32,
      y: 1024
    },
    {
      x: -31,
      y: 961
    },
    {
      x: -30,
      y: 900
    },
    {
      x: -29,
      y: 841
    },
    {
      x: -28,
      y: 784
    },
    {
      x: -27,
      y: 729
    },
    {
      x: -26,
      y: 676
    },
    {
      x: -25,
      y: 625
    },
    {
      x: -24,
      y: 576
    },
    {
      x: -23,
      y: 529
    },
    {
      x: -22,
      y: 484
    },
    {
      x: -21,
      y: 441
    },
    {
      x: -20,
      y: 400
    },
    {
      x: -19,
      y: 361
    },
    {
      x: -18,
      y: 324
    },
    {
      x: -17,
      y: 289
    },
    {
      x: -16,
      y: 256
    },
    {
      x: -15,
      y: 225
    },
    {
      x: -14,
      y: 196
    },
    {
      x: -13,
      y: 169
    },
    {
      x: -12,
      y: 144
    },
    {
      x: -11,
      y: 121
    },
    {
      x: -10,
      y: 100
    },
    {
      x: -9,
      y: 81
    },
    {
      x: -8,
      y: 64
    },
    {
      x: -7,
      y: 49
    },
    {
      x: -6,
      y: 36
    },
    {
      x: -5,
      y: 25
    },
    {
      x: -4,
      y: 16
    },
    {
      x: -3,
      y: 9
    },
    {
      x: -2,
      y: 4
    },
    {
      x: -1,
      y: 1
    },
    {
      x: 0,
      y: 0
    },
    {
      x: 0,
      y: 0
    },
    {
      x: 1,
      y: 1
    },
    {
      x: 2,
      y: 4
    },
    {
      x: 3,
      y: 9
    },
    {
      x: 4,
      y: 16
    },
    {
      x: 5,
      y: 25
    },
    {
      x: 6,
      y: 36
    },
    {
      x: 7,
      y: 49
    },
    {
      x: 8,
      y: 64
    },
    {
      x: 9,
      y: 81
    },
    {
      x: 10,
      y: 100
    },
    {
      x: 11,
      y: 121
    },
    {
      x: 12,
      y: 144
    },
    {
      x: 13,
      y: 169
    },
    {
      x: 14,
      y: 196
    },
    {
      x: 15,
      y: 225
    },
    {
      x: 16,
      y: 256
    },
    {
      x: 17,
      y: 289
    },
    {
      x: 18,
      y: 324
    },
    {
      x: 19,
      y: 361
    },
    {
      x: 20,
      y: 400
    },
    {
      x: 21,
      y: 441
    },
    {
      x: 22,
      y: 484
    },
    {
      x: 23,
      y: 529
    },
    {
      x: 24,
      y: 576
    },
    {
      x: 25,
      y: 625
    },
    {
      x: 26,
      y: 676
    },
    {
      x: 27,
      y: 729
    },
    {
      x: 28,
      y: 784
    },
    {
      x: 29,
      y: 841
    },
    {
      x: 30,
      y: 900
    },
    {
      x: 31,
      y: 961
    },
    {
      x: 32,
      y: 1024
    },
    {
      x: 33,
      y: 1089
    },
    {
      x: 34,
      y: 1156
    },
    {
      x: 35,
      y: 1225
    }
  ],
  [
    {
      x: -35,
      y: 1319
    },
    {
      x: -34,
      y: 1246
    },
    {
      x: -33,
      y: 1175
    },
    {
      x: -32,
      y: 1106
    },
    {
      x: -31,
      y: 1039
    },
    {
      x: -30,
      y: 974
    },
    {
      x: -29,
      y: 911
    },
    {
      x: -28,
      y: 850
    },
    {
      x: -27,
      y: 791
    },
    {
      x: -26,
      y: 734
    },
    {
      x: -25,
      y: 679
    },
    {
      x: -24,
      y: 626
    },
    {
      x: -23,
      y: 575
    },
    {
      x: -22,
      y: 526
    },
    {
      x: -21,
      y: 479
    },
    {
      x: -20,
      y: 434
    },
    {
      x: -19,
      y: 391
    },
    {
      x: -18,
      y: 350
    },
    {
      x: -17,
      y: 311
    },
    {
      x: -16,
      y: 274
    },
    {
      x: -15,
      y: 239
    },
    {
      x: -14,
      y: 206
    },
    {
      x: -13,
      y: 175
    },
    {
      x: -12,
      y: 146
    },
    {
      x: -11,
      y: 119
    },
    {
      x: -10,
      y: 94
    },
    {
      x: -9,
      y: 71
    },
    {
      x: -8,
      y: 50
    },
    {
      x: -7,
      y: 31
    },
    {
      x: -6,
      y: 14
    },
    {
      x: -5,
      y: -1
    },
    {
      x: -4,
      y: -14
    },
    {
      x: -3,
      y: -25
    },
    {
      x: -2,
      y: -34
    },
    {
      x: -1,
      y: -41
    },
    {
      x: 0,
      y: -46
    },
    {
      x: 0,
      y: -46
    },
    {
      x: 1,
      y: -49
    },
    {
      x: 2,
      y: -50
    },
    {
      x: 3,
      y: -49
    },
    {
      x: 4,
      y: -46
    },
    {
      x: 5,
      y: -41
    },
    {
      x: 6,
      y: -34
    },
    {
      x: 7,
      y: -25
    },
    {
      x: 8,
      y: -14
    },
    {
      x: 9,
      y: -1
    },
    {
      x: 10,
      y: 14
    },
    {
      x: 11,
      y: 31
    },
    {
      x: 12,
      y: 50
    },
    {
      x: 13,
      y: 71
    },
    {
      x: 14,
      y: 94
    },
    {
      x: 15,
      y: 119
    },
    {
      x: 16,
      y: 146
    },
    {
      x: 17,
      y: 175
    },
    {
      x: 18,
      y: 206
    },
    {
      x: 19,
      y: 239
    },
    {
      x: 20,
      y: 274
    },
    {
      x: 21,
      y: 311
    },
    {
      x: 22,
      y: 350
    },
    {
      x: 23,
      y: 391
    },
    {
      x: 24,
      y: 434
    },
    {
      x: 25,
      y: 479
    },
    {
      x: 26,
      y: 526
    },
    {
      x: 27,
      y: 575
    },
    {
      x: 28,
      y: 626
    },
    {
      x: 29,
      y: 679
    },
    {
      x: 30,
      y: 734
    },
    {
      x: 31,
      y: 791
    },
    {
      x: 32,
      y: 850
    },
    {
      x: 33,
      y: 911
    },
    {
      x: 34,
      y: 974
    },
    {
      x: 35,
      y: 1039
    }
  ]
]}
height={400}
labels={[
  {
    color: 'blue',
    name: 'A'
  },
  {
    color: 'red',
    name: 'B'
  }
]}
onPointClick={() => {}}
onPointOver={() => {}}
titles={{
  x: 'X',
  y: 'Y'
}}
width={400}
/>

Interfaces

interface ChartColumn {
  y: string | number,
  x: string | number,
  color?: string, 
}
interface TitleProps{
    label:string,
    style?:CSSProperties
}
interface ContextChartXY {
  context: CanvasRenderingContext2D | null
  maxItemWidth: number
}
interface LegendItemProps {
    name: string,
    color: string,
    size?: number
}
interface ChartPointItem extends ChartColumn{
    root:LegendItemProps
}
interface LineChartProps{
    onPointOver?:(e:MouseEvent,item:ChartPointItem)=>void,
    onPointClick?:(e:MouseEvent,item:ChartPointItem)=>void
} 
interface ItemProps {
    /**
     * @description The value of item
     */
    value: number,
    /**
     * @description item name
     */
    name: string,
    /**
     * @description specify a color for background
     */
    backgroundColor: string,
    /**
     * @description text color, It was excluded from Funnel Chart
     */
    textColor?: string
}
interface FunnelChartOptions{
    /**
     * @description high value bg gradient color
     * @default #00308F
     */
    highBarColor:string,
     /**
     * @description low value bg gradient color
     * @default gray
     */
    lowBarColor:string,
     /**
     * @description inline text color
     * @default lightgray
     */
    barInlineTextColor:string,
     /**
     * @description label text color
     * @default black
     */
    labelTextColor:string
}

Notes for 1.0.2

  • Fixed bar chart number zero problem
  • Changed barchar values property name to data

Notes for 1.0.3

  • Fixed going x axis to right when adding x and y labels
  • Added Line Chart

Package Sidebar

Install

npm i graphjs-react

Weekly Downloads

12

Version

1.0.4

License

MIT

Unpacked Size

500 kB

Total Files

39

Last publish

Collaborators

  • codepool