noteiqareachart

A flexible React AreaChart component built with Recharts. Supports multiple areas, stacked charts, tooltips, legends, grids, reference lines, and full customization.

Installation

npm install noteiqareachart

or

yarn add noteiqareachart

Usage

import React from "react";
import AreaChart from "noteiqareachart";

const data = [
  { name: "Jan", uv: 400, pv: 240 },
  { name: "Feb", uv: 300, pv: 456 },
  { name: "Mar", uv: 200, pv: 139 },
];

const MyAreaChart = () => (
  <AreaChart
    data={data}
    xKey="name"
    width={700}
    height={300}
    areas={[
      { dataKey: "uv", stroke: "#8884d8", fill: "#8884d8", type: "monotone" },
      { dataKey: "pv", stroke: "#82ca9d", fill: "#82ca9d", type: "monotone" },
    ]}
    showTooltip
    showLegend
  />
);

export default MyAreaChart;

Props

| Prop | Type | Default | Description | | ---------------- | ------------------ | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | | data | Array (required) | [] | Data array for the chart | | width | string \| number | "100%" | Chart width | | height | number | 250 | Chart height | | xKey | string | "name" | Key for X-axis values | | areas | Array<Object> | [ { dataKey: "value", stroke: "#8884d8", fill: "#8884d8", type: "monotone" } ] | Array of area configurations. Each object maps to a <Area> in Recharts | | showGrid | boolean | true | Show Cartesian grid | | gridProps | Object | { strokeDasharray: "3 3", stroke: "#ccc" } | Props for <CartesianGrid> | | showTooltip | boolean | true | Show tooltip on hover | | tooltipProps | Object | {} | Props for <Tooltip> | | showLegend | boolean | false | Show chart legend | | legendProps | Object | {} | Props for <Legend> | | referenceLines | Array<Object> | [] | Array of reference line objects (<ReferenceLine> props) | | xAxisProps | Object | {} | Props for <XAxis> | | yAxisProps | Object | {} | Props for <YAxis> | | chartProps | Object | {} | Props for <AreaChart> |

Area Config Props

Each object in the areas array supports all <Area> props from Recharts, including:

• Data & curve

  • dataKey (string, required)
  • type ("monotone", "linear", "step", "natural", etc.)
  • stackId (string, for stacked charts)
  • connectNulls (bool)

• Style

  • stroke, fill, strokeWidth, strokeOpacity, fillOpacity
  • strokeDasharray, strokeLinecap, strokeLinejoin
  • legendType ("line", "square", "circle", etc.)

• Dots & Labels

  • dot (bool, object, function, or React element)
  • activeDot (bool, object, function, or React element)
  • label (bool, object, function, or React element)

• Animation

  • isAnimationActive, animationBegin, animationDuration, animationEasing, animationId

• Visibility & Baseline

  • hide (bool)
  • baseLine (number, array, or function)

• Events

  • onClick, onMouseEnter, onMouseLeave, onMouseOver, onMouseOut

Features

• Multiple <Area> series
• Stacked charts with stackId
• Fully customizable X/Y axes
• Tooltips, legends, and grid lines
• Reference lines for thresholds
• Full pass-through for Recharts props

Example with Stacked Areas

<AreaChart
  data={[
    { name: "Jan", uv: 400, pv: 240 },
    { name: "Feb", uv: 300, pv: 456 },
    { name: "Mar", uv: 200, pv: 139 },
  ]}
  xKey="name"
  width={700}
  height={300}
  areas={[
    { dataKey: "uv", stackId: "1", stroke: "#8884d8", fill: "#8884d8" },
    { dataKey: "pv", stackId: "1", stroke: "#82ca9d", fill: "#82ca9d" },
  ]}
  showTooltip
  showLegend
/>