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, 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.