PipeChart

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

Some Fallback Content

Some Fallback Content

Usage Example (for 2-series area chart)

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}
/>

Usage Example (for pie chart)

  const myUrl = 'https://indexer.algoexplorerapi.io/stats/v2/accounts/rich-list?limit=10&asset-id=137594422'
  
  const myOptions = {
    title: {
      text: 'HDL Rich List',
      align: 'center'
    },
    chart:{
      type:"pie"
      },
        legend: {
          show: true,
          position: "bottom"
        },
        plotOptions: {
          pie: {
            dataLabels: {
               offset: -30 
            } 
          } 
        }
      }

  function myParseFunction(data){
    let total = data["asset-total"]
    let totalShown = 0;
    let series1 = []
    let nlabels = []
    data.accounts.forEach(point => {
      nlabels.push(point.address)
      series1.push(parseInt(point.balance));
      totalShown += parseInt(point.balance)
    })
      series1.push(total - totalShown)
      nlabels.push("Misc")
      console.log(series1)
      console.log(nlabels)
      return [series1,nlabels]
      }

return(
<PipeChart
  width="100%"
  url={myUrl}
  parseFunction={myParseFunction}
  type="pie"
  options={myOptions}
  interval={100000}
/>
)

Props

Prop	Type	Default	Description
options	object		object containing ApexCharts specified options
series	array		array containing ApexCharts specified series objects
interval	integer	20000	interval to update chart in milliseconds
width	string	"80%"
type	string	"area"
url	string		complete url to fetch and update data
parseFunction	function		function that takes argument of json parsed data from url fetch and must return an array of ApexCharts specified `series` objects OR an array of pie series array + a labels array