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.


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)';


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:

           = {
                        x: xValues,
                        y: [dsA, dsB]


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.


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.


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(xMin, xMax);
                    chart.plot(xMin, xMax, yMin);
                    chart.plot(xMin, xMax, yMin, yMax);


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