About

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';
                    //hexadecimal value
                    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.