react-control-lib

Seamless & fully customizable bar chart for React.The result of bar chart is already sorted in descending order so you don't need to write extra code for that purpose.

Quick Start

npm install --save react-control-lib

import "react-control-lib";

You should call the web component directly into your code with necessary parameters to plot the chart. All the parameters should be pass as string type since its a web component.

<racebar-chart />

Usage

Passing props.

You will need to pass your own props to the racebar-chart webcomponent. | Prop | Type | Required |Explanation | | ----------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | data | JSONArray | Yes | An array of objects with keys being the data for the chart . Ex- data=[{ mnth: "2020-08", cnt: "2133435", name: "Test",}]| | config | Object | Yes | An object containing keys that are in present in the array objects of the data attribute. timelinekey: the property on which timeline will be constructed. value: the property to be used to plot the data on the x-axis. label: the property to appear on labels of the bars in the chart | | detectOutliers | Boolean | No | A boolean attribute to detect and set max range to handle the scenario . Default maxRange: 6000 | | maxRange | Integer | No | A number to give the maxRange to limit the bars to plot the outliers. Default: 6000 | | top_n | Integer | No | The total numbers of entries to be displayed in the chart .Default: 12 | | intervalDuration | Integer |No | Waiting time between intervals in the timeLine (in ms). Default: 1000 | | dimensions | Object | No | An object that contains the width and height of the container .Default {width: window.innerwidth, height : 400 } |

Usage with parameters in HTML

<racebar-chart
  data='[{mnth:"2020-10-11", cnt :"234354", name:"Test name"}]'
  config='{"timelinekey":"mnth","value":"cnt","label":"name"}'
/>

Usage with parameters in React

<racebar-chart
  data={JSON.stringify(data)}
  config={JSON.stringify({
    timelinekey: "mnth",
    value: "cnt",
    label: "name",
  })}
  //optional parameters
  detectOutliers={"true"}
  dimensions={JSON.stringify({ width: 900, height: 500 })}
/>