# Line Chart

Line Chart (or line graph) is a type of chart which displays information as a series of data points connected by straight line segments. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments.

## Example

![Example line chart](imgs/lineChart_example_1.png)

```js

import React from 'react';
import ReactDom from 'react-dom';
import r3 from 'r3-charts'

// get line chart component
const LineChart = r3.LineChart;

// source data
const data = [
  {x:-14,y:11},
  {x:-5,y:-8},
  {x:0,y:0},
  {x:1,y:-14},
  {x:5,y:3},
  {x:13,y:-3},
  {x:14,y:3},
  {x:18,y:-8}
];

ReactDOM.render(
  <LineChart data={data}/>,
  document.getElementById('app')
);

```

## Properties

Name              | Type   | Default                       | Description
---               | ---    | ----                          | ---
data *            | array  | -                             | The source data in which each element is an object, like: `{x: 1, y: 2}`
background        | string | `#eee`                        | The chart background color 
chartClassName    | string | `r3-linechart`                | The class name of chart
color             | string | `red`                         | The color of line and point
height            | number | `300`                         | The height of chart container
lineWidth         | number | `1`                           | The width of line
padding           | object | `{bottom: 10,left: 10,right: 15,top: 20}`     | The sizes of whitespace inside the svg container
width             | number | `400`                         | The width of chart container
xAxis             | object | [XAxisOptionsDefault](../Components/XAxis.md) | X-axis options object. [XAxisOptions](../Components/XAxis.md)
xAxis.className   | string | `r3-linechart-xaxis`          | The class name of chart x-axis
xAxis.domainDelta | number | `.3`                          | The value of the percentage of the width of the available area of the chart, which will be expanded this area (for example, the frame will fit to the tooltip and the values do not lie directly on the axis)
xAxis.height      | number | `30`                          | The height of chart x-axis 
yAxis             | object | [YAxisOptionsDefault](../Components/YAxis.md) | Y-axis options object. [YAxisOptions](../Components/YAxis.md)
yAxis.className   | string | `r3-linechart-yaxis`          | The class name of chart y-axis
yAxis.domainDelta | number | `.3`                          | The value of the percentage of the width of the available area of the chart, which will be expanded this area (for example, the frame will fit to the tooltip and the values do not lie directly on the axis) 
yAxis.width       | number | `35`                          | The width of chart y-axis
z                 | number | `2`                           | The linear dot size (diameter or maybe side of the square)