data

Array

an array of objects that represents the data to be displayed in the graph. The minimal object structure must be as follows :

{ "x_datakey": "x_value", "y_datakey": "y_value" }

Example :

const chartData = [   
  { name: '01/02/2022', doc: 300 },   
  { name: '02/02/20222', doc: 145 }
]

X labels will be based on x_datakey value. The legend for Y axis will be based on x_datakey name (not the value!). Each axis is auto scale.

With the previous example, the dates are used for X labels. doc appears in the legend on top. But you can use any type of values as well :

const chartData = [   
  { index: 1, price: 1000 },   
  { index: 2, price: 350 }
]

xDataKey

string

Name of the field in the data array object for X axis

yDataKey

string

Name of the field in the data array object for Y axis

maxHeight

number|string

Max height of the graph. Default is 100%

width

number|string

Width of the graph. Default is 100%

startIndex

number

Start index of the brush tool

endIndex

number

End index of the brush tool

brushStrokeColor

string

CSS color of the brush tool stroke. Default is #679439

barFillColor

string

CSS color of the chart bar. Default is #679439AA

xTickFormater

function<value>:string

A function that takes the X axis label value and returns a formatted value. Default is undefined.

brushLabelFormatter

function<value>:string

A function that formats the brush label as you will. Default returns the current value

onSelectChanged

function<startIndex, endIndex>:void

A function called when the user has changed the brush selection.