r-chart (react editable line chart and bar chart)

description

• developed by reactjs.
• create line chart , bar chart and both in one container.
• editable points By drag or popup.
• add point on chart abilty.
• remove point on chart ability.
• high performance.
• mobile support(support touch events).
• responsive.
• customizable style.
• zoomable.
• up to 500000 point support.
• multi select points

Instalation

npm i r-chart

Usage

import react from "react";
import Chart from "r-chart";
<Chart />

end of preview

Code:

import React,{Component,Fragment} from "react";
import Chart from './r-chart'
import './style.css';
export default class App extends Component{
    state = {
        targets:[
            {date:'January',amount:10,size:8},
            {date:'February',amount:30},
            {date:'March',amount:20},
            {date:'May',amount:15},
            {date:'July',amount:50},
            {date:'August',amount:55},
            {date:'September',amount:40},
            {date:'October',amount:20},
            {date:'November',amount:40},
            {date:'December',amount:50},
        ],
        sales:[
            {date:'January',amount:0},
            {date:'February',amount:20},
            {date:'March',amount:40},
            {date:'April',amount:40},
            {date:'May',amount:45},
            {date:'June',amount:30},
            {date:'July',amount:10}
        ],
        logs:[]
    }
    change({point,key,value,dataIndex,pointIndex,drag}){
        var {targets,sales,logs} = this.state;
        if(dataIndex === 0){
            targets[pointIndex].amount = value;
            if(!drag){//drag end
                logs.push(`You changed this.state.targets[${pointIndex}].amount to ${value}`);
            }
            this.setState({targets,logs})    
        }
        else if(dataIndex === 1){
            sales[pointIndex].amount = value;
            if(!drag){//drag end
                logs.push(`You changed this.state.saled[${pointIndex}].amount to ${value}`);
            }
            this.setState({sales,logs})   
        }
    }
    add({key,value,dataIndex,pointIndex}){
        var {logs} = this.state;
        var newPoint = {date:key,amount:value};
        if(dataIndex === 0){
            let {targets} = this.state;
            targets.splice(pointIndex,0,newPoint); 
            logs.push(`You added ${JSON.stringify(newPoint)} to this.state.targets`)
            this.setState({targets,logs})
        }
        else if(dataIndex === 1){
            let {sales} = this.state;
            sales.splice(pointIndex,0,{date:key,amount:value}); 
            logs.push(`You added ${JSON.stringify(newPoint)} to this.state.sales`)
            this.setState({sales,logs})
        }
    }
    remove({point,key,value,dataIndex,pointIndex}){
        var {logs} = this.state;
        if(dataIndex === 0){
            let {targets} = this.state;
            targets.splice(pointIndex,1);
            logs.push(`You removed this.state.targets[${pointIndex}]`);
            this.setState({targets,logs});
        }
        else if(dataIndex === 1){
            let {sales} = this.state;
            sales.splice(pointIndex,1);
            logs.push(`You removed this.state.sales[${pointIndex}]`)
            this.setState({sales,logs});
        }
    }
    render(){
        var {targets,sales,logs} = this.state;
        return (
            <Fragment>
                <h5>Try to drag points or click on points to open popup and edit clicked point (remove or edit)</h5>
                <h5>Try to add point where plus is apear near mouse cursor (you can add point in empty places)</h5>
                <Chart
                    data={[ 
                        {
                            type:'line',
                            color:'#0688f3',
                            getPointStyle:(point)=>{return {radius:5,fill:'blue'}},
                            getPointText:(point)=>{return {value:point.date,y:-20}},
                            title:'Data1',areaOpacity:.1,
                            points:targets
                            getKey={({point})=>point.date}
                            getValue={({point})=>point.amount}
                        },
                        {
                            type:'bar',
                            color:'#03ebcc',
                            title:'Data2',
                            points:sales,
                            getKey={({point})=>point.date}
                            getValue={({point})=>point.amount}
                        },
                    ]} 
                    keyAxis={{
                        edit:(text)=>text.slice(0,3),
                        zoom:true,
                        title:'Date'
                    }}
                    valueAxis={{
                        edit:(value)=>value + '%',
                        gridColor:'#ddd',
                        zoom:true,
                        title:'Amount'
                    }}
                    keys={['January','February','March','April','May','June','July','August','September','October','November','December']}
                    onChange={this.change.bind(this)}
                    onAdd={this.add.bind(this)}
                    onRemove={this.remove.bind(this)}
                />
                <h3>Logs</h3>
                <div className='logs'>
                    <ul>
                        {logs.map((log,i)=><li key={i}>{log}</li>)}
                    </ul>
                </div>
            </Fragment> 
        )
    }
}

Preview(Click image and open demo on stackblitz):

r-chart consists of a set of data, and each data consists of a set of points.

r-chart have 2 axis (key axis and value axis)

key axis is based on chart keys array

value axis is based on points value

root props

Prop | type | Default | Description --------------- | --------------------------------------------- | ----------------------------------------------- | ---------------------------- data | Array of objects | Required | list of chart data keys | Array of strings or numbers | Required | list of chart keys keyAxis | object | Required | key axis properties valueAxis | object | Required | value axis properties labelSize | number | 40 | set size of horizontal labels labelRotate | number | 0 | angle of labels on horizontal axis onChange | function | Optional | change points value in chart popup or dragging points. onAdd | function | Optional | get point details for add onRemove | function | Optional | get point details for remove html | function | Optional | add custom html on chart(example: add a button on chart)

each data object properties

Property | Type | Default | Description -------------- | ----------------------- | ----------------------------------------------- | ----------- type | string('line' or 'bar') | 'line' | type of chart data title | string | 'untitle' | title of chart data getKey | function | Required | get key from point object getValue | function | Required | get value from point object points | array of objects | required | points of chart data color | string(color) | '#000' | color of chart data dash | array of 2 number(int) | Optional | dash style of line of data lineWidth | number | 2 | line width of line of data area | boolean | false | show line chart area getPointStyle | function | Optional | get point object and returns style of line chart point getPointText | function | Optional | get point object and returns text for render on chart point editable | boolean | true | Specifies whether chart points can be edited or not draggable | boolean | false | Specifies whether chart points can be edited by drag or not

keyAxis properties

Prop | type | Default | Description --------------- | --------------------------------------------- | ----------------------------------------------- | ---------------------------- gridColor | string(color) | Optional | set grid lines on key axis title | string | Required for show in chart popup | title of key axis lines | Array of objects | Optional | set lines by custom style on key axis edit | function | Optional | get each key label and return edited it zoom | boolean | false | set key axis zoomable size | number | 50 | set thickness of key axis

valueAxis properties

Prop | type | Default | Description --------------- | --------------------------------------------- | ----------------------------------------------- | ---------------------------- gridColor | string(color) | Optional | set grid lines on value axis title | string | Required for show in chart popup | title of value axis lines | Array of objects | Optional | set lines by custom style on value axis edit | function | Optional | get each value label and return edited it zoom | boolean | false | set value axis zoomable size | number | 50 | set thickness of key value

onChange props

is a function that get changed point details as a parameter. this parameter type is object and has this properties:

• dataIndex(index of data of changed point)(number)
• pointIndex(index of changed point)(number)
• value(value of point)(number)
• key(key of point)(string or number)
• point(object of point)(object)
• drag(if is true mean this point is changed by drag)(boolean)

Line Chart

Code:

<Chart
    data={[
      {
        type:'line',
        title:'data1',
        color:'blue',
        getKey:(point)=>point.date,
        getValue:(point)=>point.value,
        points:[
          {date:'January',value:10},
          {date:'February',value:15},
          {date:'March',value:25},
          {date:'April',value:30},
          {date:'May',value:40},
          {date:'June',value:35},
          {date:'July',value:40},
          {date:'August',value:60},
          {date:'September',value:60},
          {date:'October',value:75},
          {date:'November',value:80},
          {date:'December',value:100}
        ],

      },
      {
        type:'line',
        title:'data2',
        getKey:(point)=>point.date,
        getValue:(point)=>point.value,
        color:'crimson',
        points:[
          {date:'January',value:20},
          {date:'February',value:35},
          {date:'March',value:15},
          {date:'April',value:40},
          {date:'May',value:60},
          {date:'June',value:55},
          {date:'July',value:50},
          {date:'August',value:70},
          {date:'September',value:65},
          {date:'October',value:85},
          {date:'November',value:90},
          {date:'December',value:100}
        ],
      }
    ]}
    keys={[
      'January','February','March','April','May','June','July','August','September','October','November','December'
    ]}
  />

Preview(Click image and open demo on stackblitz):

Bar Chart

Code:

<Chart
    data={[
      {
        type:'bar',
        title:'data1',
        color:'blue',
        getKey:(point)=>point.date,
        getValue:(point)=>point.value,
        points:[
          {date:'January',value:10},
          {date:'February',value:15},
          {date:'March',value:25},
          {date:'April',value:30},
          {date:'May',value:40},
          {date:'June',value:35},
          {date:'July',value:40},
          {date:'August',value:60},
          {date:'September',value:60},
          {date:'October',value:75},
          {date:'November',value:80},
          {date:'December',value:100}
        ],

      },
      {
        type:'bar',
        title:'data2',
        getKey:(point)=>point.date,
        getValue:(point)=>point.value,
        color:'crimson',
        points:[
          {date:'January',value:20},
          {date:'February',value:35},
          {date:'March',value:15},
          {date:'April',value:40},
          {date:'May',value:60},
          {date:'June',value:55},
          {date:'July',value:50},
          {date:'August',value:70},
          {date:'September',value:65},
          {date:'October',value:85},
          {date:'November',value:90},
          {date:'December',value:100}
        ],
      }
    ]}
    keys={[
      'January','February','March','April','May','June','July','August','September','October','November','December'
    ]}
  />

Preview(Click image and open demo on stackblitz):

Line Chart And Bar Chart

Code:

<Chart
    data={[
      {
        type:'bar',
        title:'data1',
        color:'blue',
        getKey:(point)=>point.date,
        getValue:(point)=>point.value,
        points:[
          {date:'January',value:10},
          {date:'February',value:15},
          {date:'March',value:25},
          {date:'April',value:30},
          {date:'May',value:40},
          {date:'June',value:35},
          {date:'July',value:40},
          {date:'August',value:60},
          {date:'September',value:60},
          {date:'October',value:75},
          {date:'November',value:80},
          {date:'December',value:100}
        ],

      },
      {
        type:'line',
        title:'data2',
        getKey:(point)=>point.date,
        getValue:(point)=>point.value,
        color:'crimson',
        points:[
          {date:'January',value:20},
          {date:'February',value:35},
          {date:'March',value:15},
          {date:'April',value:40},
          {date:'May',value:60},
          {date:'June',value:55},
          {date:'July',value:50},
          {date:'August',value:70},
          {date:'September',value:65},
          {date:'October',value:85},
          {date:'November',value:90},
          {date:'December',value:100}
        ],
      }
    ]}
    keys={[
      'January','February','March','April','May','June','July','August','September','October','November','December'
    ]}
  />

Preview(Click image and open demo on stackblitz):

Label Size

Set width of horizontal axis labels by 'labelSize' prop to prevent those to interference .

Code:

<Chart
  ...
  labelSize={90}
  ...
/>

Preview(Click image and open demo on stackblitz):

Edit Labels

Set 'edit' function in ketAxis props to edit 'key axis' labels.

Set 'edit' function in valueAxis props to edit 'value axis' labels.

Code:

<Chart
  ...
  keyAxis={{
    ...
    edit:(key)=>key.slice(0,3)
    ...
  }}
  valueAxis={{
    ...
    edit:(value)=>value + '%'
    ...
  }}
  ...
/>`

Preview(Click image and open demo on stackblitz):

Grid Lines

Set 'key_gridColor' to show and set color of grid lines on key axis.

Set 'value_gridColor' to show and set color of grid lines on value axis.

Code:

<Chart
  ...
  keyAxis={{
    ...
    gridLines:'#ddd'
    ...
  }}
  valueAxis={{
    ...
    gridLines:'#ddd'
    ...
  }}
  ...
/>`

Preview(Click image and open demo on stackblitz):

Set Multi Data by diffrent styles

Set 3 data on 'data' prop by diffrent styles.

Controlling line chart style by 'dash' , 'lineWidth' , 'color' and 'areaOpacity' property on data

Code:

<Chart
  ...
  data={[
    {
      ...
      title:'data1',
      color:'blue',
      dash:[4,2],
      area:true
      ...
    },
    {
      ...
      title:'data2',
      color:'#03ebcc',
      lineWidth:4,
      ...
    },
    {
      ...
      title:'data3',
      color:'#e414c8',
      dash:[7,5],
    }
  ]}
  ...
/>

Preview(Click image and open demo on stackblitz):

Get Point Style

Set circle on each points by set 'getPointStyle' function prop on data.

Code:

<Chart
  ...
  data={[
    {
      ...
      pointStyle:{
        radius:5,fill:'blue',stroke:'rgba(0,0,255,.1)',lineWidth:6
      }
      ...
    }
  ]}
  ...
/>

Preview(Click image and open demo on stackblitz):

Code:

<Chart
  ...
  data={[
    {
      ...
      getPointStyle:(point)=>{
        if(point.date === 'January'){
          return {radius:5,fill:'blue'}
        }
        if(point.date === 'August'){
          return {radius:8,stroke:'red',lineWidth:2,dash:[4,3]}
        }
        else{
          return {radius:5}
        }
      }
      ...
    }
  ]}
  ...
/>

Preview(Click image and open demo on stackblitz):

Set Lines

Set lines by 'lines' prop width custom style on 'keyAxis' or 'valueAxis' props.

Code:

<Chart
  ...
  keyAxis={
    ...
    lines:[
        {key:'June',dash:[2,2],color:'red',lineWidth:1}
    ]
    ...
  }
  valueAxis={
    ...
    lines:[
        {value:50,dash:[8,5],color:'blue',lineWidth:2}
    ]
    ...
  }
  ...
/>

Preview(Click image and open demo on stackblitz):

Set Text On Points

Set text on each points by set 'getPointText' function props on data that read text value from point object and can get custom style.

Code:

<Chart
  ...
  data={[
    {
      ...
      points:[
        {date:'January',percent:10,size:'low'},
          {date:'February',percent:15,size:'low'},
          {date:'March',percent:25,size:'low'},
          {date:'April',percent:30,size:'low'},
          {date:'May',percent:40,size:'medium'},
          {date:'June',percent:35,size:'medium'},
          {date:'July',percent:40,size:'medium'},
          {date:'August',percent:60,size:'high'},
          {date:'September',percent:60,size:'high'},
          {date:'October',percent:75,size:'high'},
          {date:'November',percent:80,size:'high'},
          {date:'December',percent:100,size:'high'}
      ],
      getPointText:(point)=>{
        return {
          value:point.size,
          top:20,
          fontSize:12,
          rotate:point.date === 'December'?90:0,
          align:[0,0]
        }
      }
      ...
    }
  ]}
  ...
/>

Preview(Click image and open demo on stackblitz):

Rotate Horizontal Labels

rotate horizontal labels by 'labelRotate' props.

Code:

<Chart
  ...
  labelRotate={45}
  ...
/>

Preview(Click image and open demo on stackblitz):

Set Axis Size

Set axis thickness by 'size' property in keyAxis or valueAxis.

Code:

<Chart
  ...
  keyAxis={{
    size:90  
  }}
  valueAxis={{
    edit:(value)=>value * 1000 + '$',
    size:70  
  }}
  labelRotate={90}
  labelSize={40}
  ...
/>

Preview(Click image and open demo on stackblitz):