Line Chart

The LineChart component is used to visualize data in a line chart format. It is a wrapper around the Recharts LineChart component.

Usage

import { LineChart } from "@sparrowengg/twigs-charts";


const Chart = () => {
  return (
    <LineChart
      data={[
        {
          name: "Page A",
          UV: 4000,
          PV: 2400,
          AMT: 2400,
        },
        {
          name: "Page B",
          UV: 3000,
          PV: 1398,
          AMT: 2210,
        },
        {
          name: "Page C",
          UV: 2000,
          PV: 9800,
          AMT: 2290,
        },
      ]}
      dataKey="name"
      series={[
        {
          name: "UV",
          color: "#51D3D9",
        },
        {
          name: "PV",
          color: "#FEA58E",
        },
        {
          name: "AMT",
          color: "#BDA9EA",
        },
      ]}
    />
  );
};

The series object determines the order of the line in the chart. The first item in the array will be the first line, the second item will be the second line, and so on. Additional properties like color, label, yAxisId, fill, stroke, strokeDasharray, unit, stackId, valueFormatter are optional and can be used to customize the lines.

Props

Examples

Multi data

With Legend

Legend is a useful way to add labels to the lines. You can set showLegend to true to enable this.

Curve Type

Curve type can be set by setting curveType to the series object. It accepts the following values:

• basis
• basisClosed
• basisOpen
• bumpX
• bumpY
• bump
• linear
• linearClosed
• natural
• monotoneX
• monotoneY
• monotone
• step
• stepBefore
• stepAfter

Two Y Axis with valueFormatter

Two Y-axis are useful when you want to compare two different data points within a single line. You can set showRightYAxis to true to enable this. Additionally yAxisId should be added to the series object, accepted values are left and right. valueFormatter can be used to format the values.

Custom Dots

Custom dots can be added to the chart by using lineDotProps or lineActiveDotProps props. lineActiveDotProps is used to add a custom dot to the hovered line.

In the above example, line dots are removed by setting lineDotProps to false. A custom dot is added to the hovered line by setting lineActiveDotProps to a function that returns a styled circle.

Line and Axis Labels

Line and axis labels can be added to the chart by using showLineLabel and xAxisLabel and yAxisLabel props. showLineLabel is used to show the line label. xAxisLabel and yAxisLabel are used to add labels to the x and y axes respectively.

Custom Labels and Units

Custom labels and units can be added to the chart by using label and unit props. label is used to add a custom label to the line. unit is used to add a unit to the line.

Grid Axis

The gridAxis prop controls which grid lines are rendered. Accepted values are 'x' (default), 'y', 'xy', and 'none'. 'x' renders horizontal lines, 'y' renders vertical lines, 'xy' renders both. Use 'none' for a clean chart without any grid lines.

Reference Lines

Reference lines can be added using the referenceLines prop. Each entry is a Recharts ReferenceLine configuration object, so y, x, yAxisId, stroke, strokeDasharray, label, and all other ReferenceLine props are supported. Multiple lines can be added in the same array.

For dual-axis charts, set yAxisId: "right" on the reference line entry to align it against the right Y-axis scale.

Dashed Lines

Individual lines can be styled with a dashed or dotted stroke by setting strokeDasharray on the series object. Any valid SVG stroke-dasharray value is accepted (e.g. "5 5" for dashes, "2 2" for dots).

Legend Position

Legend position and alignment can be controlled via legendProps. Pass any Recharts Legend props directly, such as verticalAlign ("top" | "middle" | "bottom") and align ("left" | "center" | "right").

<LineChart
  showLegend
  legendProps={{ verticalAlign: "bottom", align: "center" }}
  ...
/>