r-chart v7.7.0

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

each data object properties

keyAxis properties

valueAxis properties

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):