datavis-charts-lib

Reusable React chart components (VerticalBarChart, DonutChart, AreaChart, LineGraph) with D3.js, ready for use in any React project.

Installation

npm install datavis-charts-lib

Usage

import { VerticalBarChart } from 'datavis-charts-lib';
import 'datavis-charts-lib/dist/datavisChartCommon.css';

<VerticalBarChart
  data={[{ name: 'A', value: 30 }, ...]}
  height={400}
  barColor="#3900AD"
  tickCount={4}
  showFooter={true}
  title="Chart Title"
  subtitle="Chart Subtitle"
  showTitle={true}
  showSubtitle={true}
  headlineData={{ label: 'Total', data: '12345' }}
/>

Props

See TypeScript types in the source for details on all props.

• All charts require React and D3 as peer dependencies.
• Import datavisChartCommon.css for base chart styles.
• You can customize or extend the CSS as needed.