---
title: "Line chart animated icon"
description: "Line chart animated icon (Tables & analytics). The trend is plotted. Light: a pen draws the series from the origin left to right through its values, lifting the flat placeholder line off the baseline as it goes, and stops dead on the latest value, which flashes a data point. Strong: a quicker plot that marks every value in turn as the pen reaches it, the latest last. Values never overshoot; the axes never move; the plotted trend stays."
canonical: https://generativeicons.com/icons/line-chart/
---

# Line chart animated icon

The trend is plotted. Light: a pen draws the series from the origin left to right through its values, lifting the flat placeholder line off the baseline as it goes, and stops dead on the latest value, which flashes a data point. Strong: a quicker plot that marks every value in turn as the pen reaches it, the latest last. Values never overshoot; the axes never move; the plotted trend stays.

- Id: `line-chart`
- Category: Tables & analytics
- Search terms: line graph, trend line, trend, time series, graph, plot, sparkline, stats, statistics, data viz, data visualization
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/line-chart.lottie (dotLottie, 7243 bytes, sha256 a6bf3ccaa137e25e8c5687b757529797b63bbaf68b5747e0072e2785b86808e9)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add line-chart
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/line-chart.mjs';

export function LineChartIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/line-chart.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/line-chart/ · https://generativeicons.com/api/icons/line-chart