# noteiqlinechart

A flexible React **LineChart** component built with [Recharts](https://recharts.org/).  
Supports multiple lines, tooltips, legends, grids, reference lines, and full customization.

---

## Installation

```bash
npm install noteiqlinechart

or

yarn add noteiqlinechart

Usage

import React from "react";
import LineChart from "noteiqlinechart";

const data = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 200 },
  { name: "Apr", value: 278 },
  { name: "May", value: 189 },
];

const MyLineChart = () => (
  <LineChart
    data={data}
    xKey="name"
    width={700}
    height={300}
    lines={[
      { dataKey: "value", stroke: "#8884d8", type: "monotone", activeDot: { r: 6 } },
    ]}
    showTooltip={true}
    showLegend={true}
  />
);

export default MyLineChart;

Props

| Prop | Type | Default | Description | | ---------------- | ------------------ | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | data | Array (required) | [] | Array of data objects for the chart | | width | string \| number | "100%" | Width of the chart | | height | number | 250 | Height of the chart | | xKey | string | "name" | Key for X-axis values | | lines | Array<Object> | [{ dataKey: "value", stroke: "#8884d8", type: "monotone", activeDot: { r: 6 } }] | Array of line configurations. Each object can contain all <Line> props from Recharts | | showGrid | boolean | true | Show Cartesian grid | | gridProps | Object | { strokeDasharray: "3 3", stroke: "#ccc" } | Props passed to <CartesianGrid> | | showTooltip | boolean | true | Show tooltip on hover | | tooltipProps | Object | {} | Props passed to <Tooltip> | | showLegend | boolean | false | Show chart legend | | legendProps | Object | {} | Props passed to <Legend> | | referenceLines | Array<Object> | [] | Array of reference line objects (<ReferenceLine> props) | | xAxisProps | Object | {} | Props passed to <XAxis> | | yAxisProps | Object | {} | Props passed to <YAxis> | | chartProps | Object | {} | Props passed to <LineChart> |

Features

• Multiple <Line> series
• Customizable X/Y axes
• Tooltips and legends
• Grid lines
• Reference lines
• Full pass-through for Recharts props

Example with Multiple Lines

<LineChart
  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}
  lines={[
    { dataKey: "uv", stroke: "blue", type: "monotone" },
    { dataKey: "pv", stroke: "red", type: "monotone" },
  ]}
  showTooltip
  showLegend
/>