Line Chart

Displays data in a line chart.
Properties
xAxisLabel
yAxisLabel
Example
Source Code
Installation
"use client";

import React from "react";
import * as SubframeCore from "@subframe/core";
import { LineChart } from "@/subframe/components/LineChart";

function LineChartExample() {
  return (
    <LineChart
      categories={["Biology", "Business", "Psychology"]}
      data={[
        { Year: "2015", Psychology: 120, Business: 110, Biology: 100 },
        { Year: "2016", Psychology: 130, Business: 95, Biology: 105 },
        { Year: "2017", Psychology: 115, Business: 105, Biology: 110 },
        { Year: "2018", Psychology: 125, Business: 120, Biology: 90 },
        { Year: "2019", Psychology: 110, Business: 130, Biology: 85 },
        { Year: "2020", Psychology: 135, Business: 100, Biology: 95 },
        { Year: "2021", Psychology: 105, Business: 115, Biology: 120 },
        { Year: "2022", Psychology: 140, Business: 125, Biology: 130 },
      ]}
      index={"Year"}
    />
  );
}

export default LineChartExample;

Props

Line Chart
This component has no additional props.

Examples

Axis Labels

Use xAxis and yAxis slots for greater axis customization. The SubframeCore.XAxis and SubframeCore.YAxis components can receive any of the props from the Recharts XAxis and Recharts YAxis components.

Customizing the Legend

Use the legend slot to render a custom legend. The SubframeCore.ChartLegend can receive any of the props from the Recharts Legend component.

Legend on bottom left

Custom rendered legend

Custom Tooltip

Use the tooltip slot to render a custom tooltip. The SubframeCore.ChartTooltip can receive any of the props from the Recharts Tooltip component.