@patternfly/react-charts/src/echarts/components/Line/examples/index.md

This library provides a set of React chart components for use with the PatternFly reference implementation.

---
id: Line chart
section: charts
propComponents: [
  {
    component: 'Charts',
    source: 'ECharts-docs'
  },
  {
    component: 'ChartsOptionProps',
    source: 'ECharts-docs'
  },
  {
    component: 'TooltipOptionProps',
    source: 'ECharts-docs'
  }
]
beta: true
---
import { FunctionComponent, useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import { LineChart } from 'echarts/charts';
import { GridComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
import { SVGRenderer } from 'echarts/renderers';
import { getComputedStyleValue, getCustomTheme, Charts, ThemeColor } from '@patternfly/react-charts/echarts';

import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';
import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300';
import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';

## Introduction
Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!

The examples below are based on the [Apache ECharts](https://echarts.apache.org/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.

## Examples
### Basic with right aligned legend 

```ts file="./Basic.tsx"

```

### Green with responsive container and bottom aligned legend
```ts file="./Responsive.tsx"

```

### Custom theme
This demonstrates how to create a color scale via a custom theme, which may be applied to multiple charts.

```ts file="./Theme.tsx"

```

### Skeleton

```ts file="./Skeleton.tsx"

```