# Line Chart

A line chart uses a curve to connect data points on a Cartesian coordinate system. Each point is located by its X and Y coordinates. Y is also referred to as the image of X. Multiple curves can be represented on the same chart. The Y-values collection of each curve are images of the unique collection of X values. The X values are arranged in ascending order.

```                ```
let dataA = [18, 15, 14.5, 16, 20.8, 18, 12.3, 10.1, 13, 12.5];
let dataB = [8.6, 10.4, 14.7, 12.9, 12.2, 15, 17.3, 20, 21.7, 19.55];
let xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
```
```

# Data Series

A DataSeries object wraps the Y-values collection of a curve and defines how the curve is drawn. It exposes the following properties:

Property Definition Type Default
name Data series name. Will be used in chart's legend. String ''
style Curve style LineStyle { stroke: 'black', strokeWidth: 2, strokeDashArray: 'none' }
data Collection of Y values Array [ ]
```        ```
let dsA = {
name: 'Series A',
data: dataA,
style: {
stroke: 'green'
}
};

let dsB = {
name: 'Series B',
data: dataB,
style: {
stroke: 'blue'
}
};
```
```

When omitted, the name is set to 'Series n'. Where n is the order of appearance of the data series in the chart's data collection.

# Chart

Use the chart's context to instantiate a LineChart object as follows:

```                ```
let context = document.getElementById('chart');
let chart = new LineChart(context);
```
```

# Background Color

The chart has a transparent background by default. As illustrated in the following examples, the background color can be set with a color name, a hexadecimal value or an RGB value.

```            ```
//gray color
chart.backgroundColor = 'gray';
chart.backgroundColor = '#464849';
//RGB value
chart.backgroundColor = 'rgb(13,46,64)';
```
```

# Data

The chart's data stores the array of X values in its x property and an array of data series in its y property. Given the two data series created above and the array of X values, the chart's data is set as follows:

```                ```
chart.data = {
x: xValues,
y: [dsA, dsB]
};
```
```

# Layout

The layout comprises of two vertical and horizontal axes, a title and a legend. When created, the chart uses default layout settings. You can customize the different layout components to change the look and feel of the chart.

# Interactivity

Line charts are interactive. They support zooming and panning. They can be panned in any direction. The scope is restricted to the range of X values.

# Plot

The plot function draws a line chart within a scope delimited by the xMin, xMax, yMin and yMax parameters. xMin must be less than xMax and both must be between the first and the last X values.

```            ```
chart.plot(xMin, xMax, yMin, yMax);
```
```

The parameters are optional. When omitted, they fall back to default values.

Parameter Default Value
xMin First X value
xMax Last X value
yMin Minimum Y value in the range [xMin; xMax]
yMax Maximum Y value in the range [xMin; xMax]

So the following calls to plot may be used:

```                ```
chart.plot();
chart.plot(xMin);
chart.plot(xMin, xMax);
chart.plot(xMin, xMax, yMin);
chart.plot(xMin, xMax, yMin, yMax);
```
```

# Examples

The Examples section provides a step-by-step guide to building line charts with detailed code snippets.