Skip to main content

PipeChart

A powerfull wrapping of React ApexCharts that automatically fetches, parses and plots data.

Some Fallback Content

Usage Example

const myUrl = 'https://indexer.algoexplorerapi.io/stats/v2/movements?time-start=1638618727&interval=6H&asset-id=137594422'

myParseFunction(data){
let series1 = []
let series2 = []
let i = false
data.data.forEach(point => {
i = !i
if (i) {
series1.push(parseInt(point['tx-count']))
series2.push(parseInt(point.volume))
}
})
return [
{ name: 'Transactions', type: 'area', data: series1 },
{ name: 'Volume', type: 'bar', color: '#3a904f', data: series2 },
]
}

const myOptions = {
chart: {
background: 'white',
type: 'line',
stacked: false,
},
dataLabels: {
enabled: false,
},
stroke: {
width: [3, 3, 3],
},
title: {
text: 'Algorand Blockchain Statistics',
align: 'left',
offsetX: 110,
},
xaxis: {
categories: [],
labels: {
hideOverlappingLabels: true,
rotate: 0,
style: {
colors: 'black',
},
},
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB',
},
labels: {
style: {
colors: '#008FFB',
},
},
title: {
text: 'Transaction Count',
style: {
color: '#008FFB',
},
},
tooltip: {
enabled: true,
},
},
{
seriesName: 'Volume',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: 'black',
},
labels: {
style: {
colors: 'black',
},
},
title: {
text: 'Unit Volume',
style: {
color: 'black',
},
},
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60,
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40,
},
}

<PipeChart
options={myOptions}
parseFunction={myParseFunction}
url={myUrl}
interval={5000}
/>

Props

PropTypeDefaultDescription
optionsobjectobject containing ApexCharts specified options
seriesarrayarray containing ApexCharts specified series objects
intervalinteger20000interval to update chart in milliseconds
widthstring"80%"
urlstringcomplete url to fetch and update data
parseFunctionfunctionfunction that takes argument of json parsed data from url fetch and must return an array of ApexCharts specified `series` objects