Still have questions?
Contact support
You are looking at an outdated 7.3.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

Line Chart

Overview

Data that is arranged in columns or rows on a worksheet can be plotted in a line chart. Line charts can display continuous data over time, set against a common scale, and are therefore ideal for showing trends in data at equal intervals. In a line chart, category data is distributed evenly along the horizontal axis, and all value data is distributed evenly along the vertical axis.


You should use a line chart if your category labels are text, and are representing evenly spaced values such as months, quarters, or fiscal years. You should also use a line chart if you have a few evenly spaced numerical labels, especially years.


Line and line with markers Displayed with or without markers to indicate individual data values, line charts are useful to show trends over time or ordered categories, especially when there are many data points and the order in which they are presented is important. If there are many categories or the values are approximate, you should use a line chart without markers.


Stacked line and stacked line with markers Displayed with or without markers to indicate individual data values, stacked line charts are useful to show the trend of the contribution of each value over time or ordered categories. If there are many categories or the values are approximate, you should use a stacked line chart without markers.


Tip: For a better presentation of this type of data, you may want to consider using a stacked area chart instead.


100% stacked line and 100% stacked line with markers Displayed with or without markers to indicate individual data values, 100% stacked line charts are useful to show the trend of the percentage each value contributes over time or ordered categories. If there are many categories or the values are approximate, you should use a 100% stacked line chart without markers.

Tip: For a better presentation of this type of data, you may want to consider using a 100% stacked area chart instead.

Chart

Depending on data model and the visualization purpose the line chart may contain single series or multi series.

Single Series Line Chart

Let's see single-series line chart created using the following data - sales of ACME Corp. through several months in one year:

MonthSales
January$10000
February $12000
March $18000
April $11000
May $9000

Now we need to convert this data table into acceptable format, this format will be accepted by AnyChart. In terms of AnyChart data model we have one series of data (Sales) with categories that hold months names. Each point in series represents one month and sales volume. Converted Data looks like:

var data = anychart.data.set([
        ['January', 10000],
        ['February', 12000],
        ['March', 18000],
        ['April', 11000],
        ['May', 9000]
]);
chart = anychart.lineChart();
chart.line(data);

As you can see, we've specified chart's type with anychart.lineChart() method, defined data source with chart.line(data) and set data with anychart.data.set().

Single Series Spline Chart

For better look and feel of your charts you can use Spline chart type:

var data = anychart.data.set([
        ['January', 10000],
        ['February', 12000],
        ['March', 18000],
        ['April', 11000],
        ['May', 9000]
]);
chart = anychart.lineChart();
chart.spline(data);

Here is the same chart as shown above, but in Spline mode:

Single Series Step Line Chart

Step line chart series display data points connected with Horizontal or Vertical segments.

var data = anychart.data.set([
        ['January', 10000],
        ['February', 12000],
        ['March', 18000],
        ['April', 11000],
        ['May', 9000]
]);
chart = anychart.lineChart();
chart.stepLine(data);

Here is the same chart as shown above, but in Step Line mode:

Multi-series Line Chart

To compare two or more data rows you have to use multi-series line charts as it shown in the sample below.

Let's compare 2003 sales to 2004 sales:

Month2003 Sales2004 Sales
January$10000$12000
February $12000 $15000
March $18000 $16000
April $11000 $15000
May $9000 $14000

As we do in single series line sample above we need to convert this table into acceptable format, the only difference between these two samples is the fact that now we have two series of data - one series for each year, and we give proper names to each series:

var dataSet = anychart.data.set([
        ['January', '10000', '12000'],
        ['February', '12000', '15000'],
        ['March', '18000', '16000'],
        ['April', '11000', '15000'],
        ['May', '9000', '14000'],
]);
var seriesData_2 = dataSet.mapAs({x: [0], value: [1]});
var seriesData_1 = dataSet.mapAs({x: [0], value: [2]});
chart = anychart.lineChart();
chart.line(seriesData_1);
chart.line(seriesData_2);

As we now have multi-series chart we don't want to set type for each series individually (there can be much more than two series in multi-series chart), so we add 'anychart.lineChart()' parameter to chart. Now all series in chart will be of Line type by default.

Axes

In AnyChart axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale and settings and many more. All axis features are described in Working with Axes tutorial, in this section we will quickly demonstrate how axis orientation can be adjusted, how axis scale can be inverted and how minimum and maximum values can be controlled.

Orientation

With AnyChart you can place axes to any side of the chart, all you need to do is to adjust orientation with orientation() parameter of .yAxis() or .xAxis() methods.


Positioning depends on plot type and inversion of axes, you will find list of all possible orientation and inversion settings in Axes Orientation tutorial.

chart.xAxis(0).orientation('top');
chart.yAxis(0).orientation('right');

And here is the demonstration of this feature on the Single-series sample:

Inversion

AnyChart allows to invert any axis: Y, X or any extra axis. Inversion is controlled by axis .inverted():

chart.yScale().inverted(true);

And here is the demonstration of Y Axis inversion on the Single-series sample:

Minimum and Maximum

By default AnyChart calculates axis minimum and maximum automatically, you can see this on the scale inversion chart sample above: minimal value on the Y Axis is 8.000, and maximum is 20.000. You can control these values by setting .maximum() and .minimum() parameters of .yScale() method:

chart.yScale().minimum('0').maximum('50000');

And here is the demonstration of maximum and minimum values on the Single-series sample:

Visualization

In this section we will describe main parts of line chart style and demonstrate how style can be applied.

The main idea of styles is to segregate visualization and data definition. Visual appearance of lines is defined using certain styles.

Also, styles are used to make charts interactive, you can define how elements will be displayed by default, when user moves cursor over an element.

Basic Sample

Now, let's look how to create a simple style and apply it to the chart. As we've already said style consists of several elements, here is an acceptable structure:

chart.line(data)
        .stroke('Rgb(86,86,26)', 4)
        .markers(null)
        .hoverStroke('darkred', 4);

Using such settings we've defined line of Gold color, rather thick line and a couple of effects. Also, we've defined that when user will move cursor over an element it will be highlighted with a DarkRed thick line.

Labels and Tooltips

In this section we will explain how to add and configure data labels and tooltips.


If you want to configure data labels and tooltips for all series - you should do that in .labels() and .tooltip() methods. You can tune their visual appearance, positioning and format. Let's do that in the following example: we will make data labels appear to the top of the data points, also, we will format labels so they show only the value corresponding to the point and tooltip will show detailed description.

Markers

Marker is an object with a specified shape, size, and color or an image used to mark and to identify chart elements. AnyChart allows to add markers to any data element including lines.


In the sample below we will take single-series data described above and mark the highest point in series with a "Star5" of the "Gold" color.


To make marker visually appealing we will create a style, that will tell AnyChart to set marker size to 12 pixels in normal state, and make it bigger (16 pixels) when user moves cursor over an element.

{x: 'March', value: 18000, marker:{type:'star5', fill:'gold', size: 12}, hoverMarker: {size: 22}}

And here is a result - March is the most successful month and we are showing this on the chart:

Colors

AnyChart uses default color palette to colorize data elements of chart automatically even if you have not define special colors. But you can set and apply the color to exact data series or data point.

Colorizing Elements

Let's demonstrate how to apply different colors to different data series. To apply the color to the exact series we need to set ".stroke()" parameter for a series. In the sample below we have 5 series with sample data and we'll color each series to different color. Here is the sample: