@foundation-base/graphs

Base graphs component for foundation

Prop Types

interface graphData {
  label: string;
  percentage: number;
  color: string;
}

interface doubleBarData {
  label: string;
  percentages: number[];
  color: string;
  gap: number;
}

interface areaChartData {
  labels: string[];
  datasets: [
    {
      fillColor: string;
      strokeColor: string;
      pointColor: string;
      pointStrokeColor: string;
      data: number[];
    }
  ];
}

export type propsTypes = {
  data: graphData[];
  width: number;
  height: number;
  animationIn: number;
};

export type singleBar = {
  data: graphData[];
  width: number;
  height: number;
  gap: number;
  animationIn: number;
};

export type doubleBar = {
  data: doubleBarData[];
  width: number;
  gapBetweenColumns: number;
  gapBetweenBars: number;
  animationIn: number;
};

export type AreaChart = {
  width: number;
  height: number;
  data: areaChartData;
};

Descriptions of Common Props

`width: number`

width, prop of type number, decides width of the graph in all graphs.

`height: number`

height, prop of type number, decides height of the graph in all graphs.

`animationIn: number`

animationIn, prop of type number, decides how much time in seconds animation should complete in all graphs.

`gap: number`

gap, prop of type number, decides gap between each bar in the single and rounded bar graph.

`gapBetweenBars: number`

gapBetweenBars, prop of type number, decides gap between bars, only in double bar graph.

`gapBetweenColumns: number`

gapBetweenColumns, prop of type number, decides gap between columns in double bar graph only.

Install

npm install --save @foundation-base/graphs