Build clean chart interfaces with AmerCharts.

Quick start

AmerCharts components are React components. Import a chart, place it inside a responsive container, and keep the parent width stable so the chart can render cleanly.

1. Install the package.
2. Import the chart component you want.
3. Render it inside a dashboard card or section.
4. Adjust your wrapper spacing, not the chart internals.

Install the free package

Use npm for app projects, or inspect the source directly on GitHub.

npm install amercharts

git clone https://github.com/ameralhaj/amercharts.git

Basic usage

Import the exact component you need and render it like any other React component.

import { Live3_BarChartGradient_DIV } from "amercharts";

export function AnalyticsCard() {
  return (
    <section className="chart-card">
      <h2>Monthly revenue</h2>
      <Live3_BarChartGradient_DIV />
    </section>
  );
}

Next.js example

In App Router projects, use chart components inside client components if the chart relies on browser APIs or interactive state.

"use client";

import { Live2_LineChartCurved } from "amercharts";

export function RevenueTrend() {
  return (
    <div className="chart-card">
      <Live2_LineChartCurved />
    </div>
  );
}

Recommended layout

Give charts predictable dimensions. Avoid placing them inside containers that constantly change height, and keep dashboard cards simple.

.chart-card {
  min-height: 360px;
  padding: 24px;
  border: 1px solid #e2e8ee;
  border-radius: 8px;
  background: #fff;
}

Available free components

The free package includes a starter set for bars, lines, area charts, parts, maps, and market charts.

Using the Pro source pack

Pro is delivered as private source. Place the ZIP contents inside your app or internal package, then import from that local path.

import { Pro58_GlowLineChart } from "./amercharts-pro/src";

export function ProExample() {
  return (
    <div className="chart-card">
      <Pro58_GlowLineChart />
    </div>
  );
}

Troubleshooting