animated-charts

animated-charts is a plug-and-play charting library and web component suite for beautiful, animated dashboards. Built with Stencil.js, Tailwind CSS, and Framer Motion, it works seamlessly in React, Angular, Vue, and plain HTML.

• npm: animated-charts
• GitHub: github.com/sahilkhatiwada/react-animated-charts

Key Features

• Plug-and-play: Easy integration with minimal setup.
• Beautiful Animations: Powered by Framer Motion for smooth, eye-catching transitions.
• Modern Design: Styled with Tailwind CSS for a clean, contemporary look.
• Mobile-First: Fully responsive and optimized for all devices.
• Versatile Chart Types: Bar, line, donut, and area charts included.
• Cross-Framework: Use as a web component in React, Angular, Vue, or plain HTML.
• No Extra Animation Setup: Animations work out of the box—no manual configuration required.
• Real-Time Responsiveness: Charts adapt instantly to data and layout changes.

Quick Start

1. Install via npm (recommended)

npm install animated-charts

2. Or use via CDN (for HTML/Vanilla JS)

<script type="module" src="https://unpkg.com/animated-charts/dist/animated-charts/animated-charts.esm.js"></script>

Usage

As Web Components (HTML/Vanilla JS, React, Angular, Vue)

HTML Example

<animated-bar-chart data='[30,50,80,40,60]' labels='["Mon","Tue","Wed","Thu","Fri"]' colors='["#3b82f6","#10b981","#f59e42","#ef4444","#6366f1"]' title="Weekly Sales"></animated-bar-chart>
<script type="module" src="/dist/animated-charts/animated-charts.esm.js"></script>
<!-- See more at https://github.com/sahilkhatiwada/react-animated-charts -->

React Example

import { defineCustomElements } from 'animated-charts/loader';
defineCustomElements();

<animated-bar-chart data='[30,50,80,40,60]' labels='["Mon","Tue","Wed","Thu","Fri"]' colors='["#3b82f6","#10b981","#f59e42","#ef4444","#6366f1"]' title="Weekly Sales"></animated-bar-chart>
// More usage: https://github.com/sahilkhatiwada/react-animated-charts

Angular Example

import { defineCustomElements } from 'animated-charts/loader';
defineCustomElements();
// See https://github.com/sahilkhatiwada/react-animated-charts for more

<animated-bar-chart data='[30,50,80,40,60]' labels='["Mon","Tue","Wed","Thu","Fri"]' colors='["#3b82f6","#10b981","#f59e42","#ef4444","#6366f1"]' title="Weekly Sales"></animated-bar-chart>
<!-- More: https://github.com/sahilkhatiwada/react-animated-charts -->

Vue Example

import { defineCustomElements } from 'animated-charts/loader';
defineCustomElements();
// See https://github.com/sahilkhatiwada/react-animated-charts for more

<animated-bar-chart data='[30,50,80,40,60]' labels='["Mon","Tue","Wed","Thu","Fri"]' colors='["#3b82f6","#10b981","#f59e42","#ef4444","#6366f1"]' title="Weekly Sales"></animated-bar-chart>
<!-- More: https://github.com/sahilkhatiwada/react-animated-charts -->

React-Style Usage (JSX Components)

If you want to use the React wrapper components:

import { BarChart, LineChart, DonutChart, AreaChart } from 'animated-charts/react';

const barData = [30, 50, 80, 40, 60];
const barLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

<BarChart data={barData} labels={barLabels} />
// More: https://github.com/sahilkhatiwada/react-animated-charts

Chart Examples

BarChart

<animated-bar-chart data='[30,50,80,40,60]' labels='["Mon","Tue","Wed","Thu","Fri"]' colors='["#3b82f6","#10b981","#f59e42","#ef4444","#6366f1"]' title="Weekly Sales"></animated-bar-chart>
<!-- More: https://github.com/sahilkhatiwada/react-animated-charts -->

LineChart

<animated-line-chart data='[10,40,35,70,50]' labels='["Jan","Feb","Mar","Apr","May"]' color="#ef4444" title="Monthly Growth"></animated-line-chart>
<!-- More: https://github.com/sahilkhatiwada/react-animated-charts -->

DonutChart

<animated-donut-chart data='[25,35,20,20]' labels='["A","B","C","D"]' colors='["#3b82f6","#f59e42","#10b981","#ef4444"]' title="Segments"></animated-donut-chart>
<!-- More: https://github.com/sahilkhatiwada/react-animated-charts -->

AreaChart

<animated-area-chart data='[15,30,45,30,60,80,70]' labels='["1","2","3","4","5","6","7"]' color="#6366f1" title="Trend"></animated-area-chart>
<!-- More: https://github.com/sahilkhatiwada/react-animated-charts -->

Heatmap

<animated-heatmap data='[[1,2,3,4],[2,3,4,5],[3,4,5,6],[4,5,6,7]]' width="300" height="300" colors='["#f8f9fa","#dc3545"]'></animated-heatmap>

Props:

• data: 2D array of numbers (required)
• width, height: number (optional)
• colors: array of color strings (optional)
• animationDuration: number (ms, optional)

PieChart

<animated-pie-chart data='[{"value":10,"label":"Red","color":"#ef4444"},{"value":20,"label":"Blue","color":"#3b82f6"},{"value":30,"label":"Green","color":"#10b981"},{"value":40,"label":"Yellow","color":"#f59e42"}]' width="300" height="300"></animated-pie-chart>

Props:

• data: array of objects { value, label?, color? } (required)
• width, height: number (optional)
• colors: array of color strings (optional)
• animationDuration: number (ms, optional)

Histogram

<animated-histogram data='[1,2,2,3,3,3,4,5,5,6,7,8,8,8,9]' bins="6" width="400" height="300"></animated-histogram>

Props:

• data: array of numbers (required)
• bins: number (optional)
• width, height: number (optional)
• colors: array of color strings (optional)
• animationDuration: number (ms, optional)

CandlestickChart

<animated-candlestick-chart data='[{"open":10,"close":15,"high":18,"low":8},{"open":15,"close":12,"high":16,"low":10}]' width="400" height="300"></animated-candlestick-chart>

Props:

• data: array of objects { open, close, high, low, label? } (required)
• width, height: number (optional)
• colors: array [upColor, downColor] (optional)
• animationDuration: number (ms, optional)

GaugeChart

<animated-gauge-chart value="65" min="0" max="100" width="300" height="180"></animated-gauge-chart>

Props:

• value: number (required)
• min, max: number (optional)
• width, height: number (optional)
• colors: array of color strings (optional)
• animationDuration: number (ms, optional)

RadarChart

<animated-radar-chart data='[{"label":"A","value":80},{"label":"B","value":60},{"label":"C","value":90},{"label":"D","value":70},{"label":"E","value":50}]' width="350" height="350"></animated-radar-chart>

Props:

• data: array of objects { label, value } (required)
• maxValue: number (optional)
• width, height: number (optional)
• colors: array of color strings (optional)
• animationDuration: number (ms, optional)

ScatterPlot

<animated-scatter-plot data='[{"x":1,"y":2,"label":"P1"},{"x":2,"y":3,"label":"P2"},{"x":3,"y":1,"label":"P3"},{"x":4,"y":4,"label":"P4"}]' width="500" height="350"></animated-scatter-plot>

Props:

• data: array of objects { x, y, r?, color?, label? } (required)
• width, height: number (optional)
• colors: array of color strings (optional)
• animationDuration: number (ms, optional)
• xLabel, yLabel: string (optional)

BubbleChart

<animated-bubble-chart data='[{"x":1,"y":2,"r":10,"label":"B1"},{"x":2,"y":3,"r":15,"label":"B2"},{"x":3,"y":1,"r":8,"label":"B3"},{"x":4,"y":4,"r":12,"label":"B4"}]' width="500" height="350"></animated-bubble-chart>

Props:

• data: array of objects { x, y, r, color?, label? } (required)
• width, height: number (optional)
• colors: array of color strings (optional)
• animationDuration: number (ms, optional)
• xLabel, yLabel: string (optional)

Features

Chart Title

All chart components accept a title prop to display a heading above the chart.

Custom Tooltip Slot

You can provide a custom tooltip by using a named slot:

<animated-bar-chart ...>
  <span slot="tooltip">Custom tooltip content here</span>
</animated-bar-chart>
<!-- More: https://github.com/sahilkhatiwada/react-animated-charts -->

Responsive Resizing

Charts automatically resize to fit their container, making them mobile-friendly and adaptive to layout changes.

Troubleshooting & FAQ

• Web components not rendering in React/Angular/Vue?
  • Make sure to call defineCustomElements() from the loader in your app entry point.
• Props not updating?
  • For web components, pass props as strings (e.g., data='[1,2,3]').
• Styles not applying?
  • Ensure Tailwind CSS is included in your project if you want to customize styles.
• TypeScript errors in React?
  • Add /// <reference types="animated-charts" /> to your global.d.ts or use the provided React wrappers.
• More help: github.com/sahilkhatiwada/react-animated-charts

Community Standards

• Please see our Contributing Guide for how to get involved.
• We follow a Code of Conduct to foster a welcoming and respectful community.
• Project repo: github.com/sahilkhatiwada/react-animated-charts

License

MIT

All Chart Examples (React)

import { BarChart, LineChart, DonutChart, AreaChart } from 'animated-charts/react';
import { Heatmap } from './src/components/heatmap/heatmap';
import { PieChart } from './src/components/pie-chart/pie-chart';
import { Histogram } from './src/components/histogram/histogram';
import { CandlestickChart } from './src/components/candlestick-chart/candlestick-chart';
import { GaugeChart } from './src/components/gauge-chart/gauge-chart';
import { RadarChart } from './src/components/radar-chart/radar-chart';
import { ScatterPlot } from './src/components/scatter-plot/scatter-plot';
import { BubbleChart } from './src/components/bubble-chart/bubble-chart';

const barData = [30, 50, 80, 40, 60];
const barLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const lineData = [10, 40, 35, 70, 50];
const lineLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
const donutData = [25, 35, 20, 20];
const donutLabels = ['A', 'B', 'C', 'D'];
const donutColors = ['#3b82f6', '#f59e42', '#10b981', '#ef4444'];
const areaData = [15, 30, 45, 30, 60, 80, 70];
const areaLabels = ['1', '2', '3', '4', '5', '6', '7'];
const heatmapData = [
  [1, 2, 3, 4],
  [2, 3, 4, 5],
  [3, 4, 5, 6],
  [4, 5, 6, 7],
];
const pieData = [
  { value: 10, label: 'Red', color: '#ef4444' },
  { value: 20, label: 'Blue', color: '#3b82f6' },
  { value: 30, label: 'Green', color: '#10b981' },
  { value: 40, label: 'Yellow', color: '#f59e42' },
];
const histogramData = [1, 2, 2, 3, 3, 3, 4, 5, 5, 6, 7, 8, 8, 8, 9];
const candlestickData = [
  { open: 10, close: 15, high: 18, low: 8 },
  { open: 15, close: 12, high: 16, low: 10 },
  { open: 12, close: 18, high: 20, low: 11 },
  { open: 18, close: 17, high: 21, low: 15 },
];
const gaugeValue = 65;
const radarData = [
  { label: 'A', value: 80 },
  { label: 'B', value: 60 },
  { label: 'C', value: 90 },
  { label: 'D', value: 70 },
  { label: 'E', value: 50 },
];
const scatterData = [
  { x: 1, y: 2, label: 'P1' },
  { x: 2, y: 3, label: 'P2' },
  { x: 3, y: 1, label: 'P3' },
  { x: 4, y: 4, label: 'P4' },
];
const bubbleData = [
  { x: 1, y: 2, r: 10, label: 'B1' },
  { x: 2, y: 3, r: 15, label: 'B2' },
  { x: 3, y: 1, r: 8, label: 'B3' },
  { x: 4, y: 4, r: 12, label: 'B4' },
];

export default function App() {
  return (
    <div>
      <BarChart data={barData} labels={barLabels} />
      <LineChart data={lineData} labels={lineLabels} />
      <DonutChart data={donutData} labels={donutLabels} colors={donutColors} />
      <AreaChart data={areaData} labels={areaLabels} />
      <Heatmap data={heatmapData} />
      <PieChart data={pieData} />
      <Histogram data={histogramData} bins={6} />
      <CandlestickChart data={candlestickData} />
      <GaugeChart value={gaugeValue} />
      <RadarChart data={radarData} />
      <ScatterPlot data={scatterData} />
      <BubbleChart data={bubbleData} />
    </div>
  );
}