Line Chart
Used to display data points connected by straight line segments, showing trends and patterns in continuous data over time or sequences
Usage
import { Chart, useChart } from "@chakra-ui/charts"
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"<Chart.Root>
<LineChart>
<CartesianGrid />
<XAxis />
<YAxis />
<Line />
</LineChart>
</Chart.Root>Examples
Axes Label
To add labels to the x and y axes, use the Label component from recharts.
<XAxis axisLine={false} label={{ value: "X Axis", position: "bottom" }} />
<YAxis axisLine={false} label={{ value: "Y Axis", position: "left", angle: -90 }} />No Dots
Set dot and activeDot to false to hide the dots completely.
<Line dot={false} activeDot={false} />Point Labels
Render the LabelList component from recharts inside the Line component to
show labels at each data point.
<Line>
<LabelList position="right" offset={10} />
</Line>Gradient
Use the Chart.Gradient component to create a gradient. Ensure the id is
unique and used in the stroke prop of the Line component.
<defs>
<Chart.Gradient id="custom-gradient" stops={[]} />
</defs>
<Line stroke="url(#custom-gradient)" />Dashed
Set the strokeDasharray prop in the series object to create a dashed line.
const chart = useChart({
data: [
{ windows: 186, mac: 165, month: "January" },
//...
],
series: [
{ name: "windows", color: "teal.solid", strokeDasharray: "5 5" },
{ name: "mac", color: "purple.solid" },
],
})Multiple
Here's an example of a line chart with multiple series.
Legend Interaction
Adding interactivity to the chart legends make it come to life. To enable this
feature, set the interaction prop to "hover" or "click" in the
Chart.Legend component.
<Chart.Legend interaction="hover" />Start and End Tick
By default, the chart shows the label for each tick. To show just the start and
end ticks, pass the ticks prop to the XAxis component from recharts.
You can optionally pass a label prop to the XAxis component to show a
label at the bottom of the axis.
<XAxis
ticks={["January", "August"]}
label={{ value: "[January - August] Customers", position: "bottom" }}
/>Value Formatter
To format the value axis ticks, pass the tickFormatter prop to the YAxis
component from recharts.
<YAxis
tickFormatter={chart.formatNumber({
style: "currency",
currency: "USD",
notation: "compact",
})}
/>Biaxial
Use the yAxisId prop in the series object and YAxis component to create a
chart with two y-axes.
<YAxis yAxisId="left" />
<YAxis yAxisId="right" orientation="right" />Custom Tooltip
In event you need to customize the tooltip entirely, replace the Chart.Tooltip
component with your own. The basic signature of a custom tooltip looks like:
function CustomTooltip(props: TooltipProps<string, string>) {
const { active, payload, label } = props
if (!active || !payload || payload.length === 0) return null
return <Box>{/* Your custom tooltip content */}</Box>
}Series Label
To add a custom label to the series, set the label prop in the series
object.
const chart = useChart({
data: [
{ mac: 10, linux: 120, month: "January" },
//...
],
series: [
{ name: "mac", label: "Mac sales", color: "purple.solid" },
{ name: "linux", label: "Linux sales", color: "blue.solid" },
],
})Reference Point
Use the reference components from recharts to highlight a specific data point.
<ReferenceDot x="August" y={110} r={6} />
<ReferenceLine y={110} label={{ value: "Target", position: "top" }} />Value Domain
Pass the domain prop to the YAxis component to set the domain (upper and
lower bounds) of the value axis.
<YAxis domain={[0, 100]} />Connect Nulls
To connect the null values, set the connectNulls prop to true in the Line
component.
<Line connectNulls />Composition
Here's an example of composing the Card, State and Chart components
together to create a stunning visualization.
Customers by channel
- Facebook Ads
- 325
- Organic
- 387
- Google Ads
- 327
Line Types
Recharts provides flexible support for various kinds of line charts.
Below are the different types of line charts you can create:
<Line type="linear" />
<Line type="bump" />
<Line type="basis" />
<Line type="step" />
<Line type="stepBefore" />
<Line type="stepAfter" />
<Line type="natural" />
<Line type="monotone" />