Line Chart & Area Chart : A Guide for beginners

Line Charts

What is a line chart?

A line chart is used to represent data over a continuous time span. It is generally used to show trend of a measure (or a variable) over time. Data values are plotted as points that are connected using line segments.

Using a line chart, one can see the pattern of any dependent variable over time like share price, EPS (Earnings Per Share) of a company, weather recordings (like temperature, precipitation or humidity), etc.

Line Chart Line Charts are great for comparing change in data for multiple groups based on time. Play with more Line Charts to see for yourself

Why do you need a Line Chart?

1. To see changes of a dependent variable over time

Line charts are excellent for mapping continuous data sets over a period of time. Understanding changes happening over a period of time is relatively easier for the human mind. Business owners want to see profits increase over time, content publishers want to see traffic increase over time, and public bodies want to see tax, health or infrastructure data over time. It gives us the best context to understand what’s happening and how to plan for the future.

Line Charts help to see changes of a dependent variable over time UN Population Projection of the world until 2100. Source: Our World In Data

Line charts help in observing trends and identifying key performance issues (either good or bad). Line charts let you find the exact time something out of the ordinary happened, which helps in pinpointing where to dive for answers.

Line Charts are used to identify trends and spot spikes and dips A Simple Line chart from Google Trends shows the interest in Fidget Spinners in United States from 2004 - 2018. it is easily evident that they were quite a fad in 2017

3. To compare patterns of multiple sections

Multi-series line charts are used to compare how different groups (irrespective of how they are segmented - geography, internal teams, age groups, financial quarters, etc.) are performing compared to each other. This helps in identifying key performance areas and to quarantine conditions that are affecting negatively.

Line Charts are great for comparing different groupsA multi series line chart showing sales performance for different Quarters. While you may be curious as to why revenue start increasing at the same time every month, it has nothing to do with the customer’s buying preferences. As many Sales Leaders would know, this is the Hockey Sick Pattern, which results because of quarterly sales commission plan, where sales people get their bonuses on completing their quota every quarter. As the deadline approaches, most salespeople try harder to meet or exceed their quotas

Showcasing public data for an interval of time
Line charts help in showing public data like gender gap in earnings, Rainfall of a region, Population Growth, Disease impact, etc. Line charts help in showing public data like gender gap in earnings, Rainfall of a region, Population Growth, Disease impact, etc.
Looking at financial and business data for time cycles
Line charts help in understanding the monetory and operational status of the company during business cycles Line charts help in understanding the monetory and operational status of the company during business cycles (Weeks, Months, Quarters, Years or Decades)
Comparing performance of different groups
Line charts help in comparing different sectors, businesses or organizational units. Line charts help in comparing different sectors, businesses or organizational units.
Analyzing trends, exceptions & patterns to make timely decisions
Line Charts help in looking at trends for commodities and processes to find profitable insights. Line Charts help in looking at trends for commodities and processes to find profitable insights.

Limitations of Line Chart

1. Bad at Representing too many groups/segments at the same time

Plotting too many lines on a chart makes it appear cluttered. Experts advise to have no more than 4 lines on a single chart; any more than that and it becomes difficult to interpret. In case you have to show more than 4 groups, club the smaller ones in an “Others” group

Line charts are bad at Representing too many groups/segments at the same time Line charts are not great at showing lots of groups. If you have a lot of groups, use a bar chart to compare them.

2. Irregular Class Intervals may give inaccurate insights

Data should always be plotted in equal intervals for the lines to be accurate representations. When lines are used in a chart to connect unequal or non-adjacent intervals of time, they misrepresent the information. Even if the class interval is regular in nature, using too many or too few classes can mask important patterns in the data.

Irregular Class Intervals may give inaccurate insights

You simply cannot compare equal intervals for some data points and then switch to a different interval and expect the result to be a meaningful trend of the plotted data. If there was any decline in the date ranged not mentioned (the years 1999 & 2002) the line chart constructed would be able to mask it perfectly thus leading to inaccurate insights.

Best Practices for Line Charts

  • Lines should only be used to connect adjacent values along an interval scale.
  • Intervals should be equal in size to ensure accurate insights.
  • When the user is focused on the trend of a particular line, additional information like highest and lowest value of the line can be helpful.
  • Choose a baseline that suits your data; choosing a zero baseline may not represent the change in data effectively.
  • When comparing data sets, line graphs are only useful if the axes follow the same scales.
  • When making charts for smaller devices make use of Sparklines - data to ink ratio should be high, hence you should remove unnecessary objects like axis line, axis title, and others.
  • Ensure smooth interactivity on your chart - cross line with anchor and value, hover on line should dim other lines, legend interactions, etc.

Variants of Line Chart

Line with multiple series

The multi-series line chart is used to visualize trends and relationships in multiple datasets. It consists of various data points connected using line segments, where each point represents a single value. It helps in comparing different groups on the same scale to find out how each of them are performing compared to the others.

The multi-series line chart is used to visualize trends and relationships in multiple datasets.

Example use cases where line chart with multiple series is helpful
  • Compare hourly temperatures of Boston, New York, Princeton and Miami on a particular day.
  • Compare closing stock price of Apple, IBM, Microsoft, Amazon, Facebook on last quarter.
  • Performance of sales people in an organization.
  • Import-export trend of a country.
  • Comparing similar metrics like retention rate, new sales, etc. across different timezones or products

Line Chart with Zooming & Panning

The zoom line chart is a special type of multi-series line chart that allows analysis of thousands of data points at macroscopic and microscopic levels. The zooming and panning features allow this analysis to take place efficiently. It consists of multiple lines where each line represents a category and data points that belong to the category. The chart can easily plot thousands of data points, something that can produce indecipherable results if plotted on an ordinary line chart.

The zoom line chart is a special type of multi-series line chart that allows analysis of thousands of data points at macroscopic and microscopic levels.

Example use cases where line chart with zooming & panning is helpful
  • Large scale reporting like nation-wide logistics performance over multiple quarters .
  • Looking at healthcare data for various patients across geographies & health conditions through decades.
  • Analyzing stock data across industries through the years.
  • Tracking daily web traffic on a website for 6 months.
  • Trend of daily minimum and maximum temperature of a place for 5 years.

Line Chart with scrolling

A scroll line chart is used to show the magnitude of change over a period of time. A large number of data points can be rendered on the chart owing to the scroll interactivity of the chart. The chart is rendered with data values plotted as data points that are then connected using line segments. A horizontal scroll bar is rendered at the bottom of the chart to navigate through the chart.

A scroll line chart is used to show the magnitude of change over a period of time.

Example use cases where line chart with scrolling is helpful
  • Plotting a large number of data points like the monthly sales for multiple years
  • Trend of percent of GDP spent each year on military by USA for last century.

Line Chart with multiple axes & series

A multi-axis line chart is an interactive line chart that plots data using multiple axes. This allows plotting data sets having different units and scale ranges. Data values are plotted as data points that are connected by line segments. Multiple y-axes are rendered along the left and right side of the chart.

A multi-axis line chart is an interactive line chart that plots data using multiple axes.

Where to use Line chart with multiple axes & series?
  • Comparing count of web visits and downloads from multiple sources.
  • Comparing rainfall and temperature of a city.
  • Comparing GDP and GDP % growth each year for the last decade of any country

Simple spline chart

A spline chart is a specialized form of the line chart that can be used for plotting data that requires the usage of curve-fitting. Like the line chart, data values are plotted as data points. However, instead of using straight line segments to connect the data points, this chart draws a fitted curve to connect the data points

Screen Shot 2018-10-12 at 10.21.13 AM

Where to use a Spline chart?
  • A Spline chart can be used for applications such as rendering the impulse-response of a system or the development lifecycle for a product.
  • Comparing the company revenue each year for the last decade
  • Comparing the consumption of electricity units across a city

Spline chart with multiple series

A multi-series spline chart is a specialized form of the multi-series line chart that can be used for plotting data for multiple categories of data that requires the usage of curve-fitting. Like the multi-series line chart, data values are plotted as data points. However, instead of using straight line segments to connect the data points, this chart draws a fitted curve to connect the data points.

A spline chart is a specialized form of the line chart that can be used for plotting data that requires the usage of curve-fitting

Where to use a Spline chart with multi-series?
  • A multi-series Spline chart can be used for applications such as rendering the impulse-response for multiple systems or the development lifecycle for multiple products.
  • Comparing the company revenue each year for multiple decades.
  • Comparing the consumption of electricity units across various cities in a state.

Step-line Chart

A step line chart is used to visualize trends for a particular event that is not continuous in nature. For a given data set, this chart not only enables you to compare the magnitude and change in values at different points of the same series but also helps you discern the intermittent pattern of the trend. Data values are plotted as data points on the chart that are connected using vertical and horizontal lines to form a step-like progression.

A multi-series spline chart is a specialized form of the multi-series line chart that can be used for plotting data for multiple categories of data that requires the usage of curve-fitting. Like the multi-series line chart, data values are plotted as data points. However, instead of u

Where to use a Step line chart ?
  • A step line chart can be used for showcasing a revenue and expense comparison in a company.
  • Renewable vs non-renewable energy production.
  • Enrolments each year in an academic institute.

Want to add interactive charts on your web or mobile app?

Fusionchart's expansive library lets you build and use insightful & intuitive charts in minutes.

Try for free !

Area Charts

What is an Area Chart?

An area chart is like a line chart in terms of how data values are plotted on the chart and connected using line segments. In an area chart, however, the area between the line segments and the x-axis is filled with color.

An area chart is a good choice when you want to see volume change over a period of time, without focusing on specific data values. It gives a sense of summation of the quantitative data.

An area chart is a good choice when you want to see volume change over a period of time, without focusing on specific data values. It gives a sense of summation of the quantitative data. Area Charts help in showing change over a time with an emphasis on magnitude. Play with more Area Charts to see for yourself

Why do you need an Area Chart?

1. Adds a sense of volume to your data

Area charts are primarily used when the summation of quantitative data (dependent variable) is to be communicated (rather than individual data values). The area underneath the line(s) helps in graphically depicting quantitative progression over time.

Area Charts are primarily used when the summation of quantitative data (dependent variable) is to be communicated (rather than individual data values). The Google Music Visualization depicts popularity of different music genres through the ages

2. To see part-to-whole relationships between groups

The distinctive feature of an area chart is the filling done between the line segments and the x-axis to emphasize the magnitude. When rendered with stacked data plots, the area chart serves well for a part-to-whole analysis of each category - members of any category can be summed on any common quantitative variable and the same can be stacked to see contribution of each member to the total. If y-axis is %, stacked area also helps in knowing the trend of percentage share of each group.

When rendered with stacked data plots, the area chart serves well for a part-to-whole analysis of each category

3. Analyzing trend of magnitude of a quantitative data

The filling between the line segments and the axis line facilitates understanding the magnitude, something which cannot be done using the line chart. This chart works better when used to plot a small number of data values, since the entire area is colored.

The filling between the line segments and the axis line facilitates understanding the magnitude

4. Comparing trend/proportion of each category

Area charts give a clear and concise picture of each group’s performance trends separately.

One glance at the stacked area chart on the right above gives you a clear understanding that while the food products’ sales have been consistent, the non-food products’ sales have shown a lot of fluctuations.

Area Charts give a clear and concise picture of each group’s performance trends separately.

Business Uses of Area Chart

Trend of magnitude of a single quantitative variable
Area charts help in looking at the growth in revenue reserves of a public company, program participants of qualifying subgroup by year, trends in mortality rates over time by major causes of death.
Area charts help in looking at the growth in revenue reserves of a public company, program participants of qualifying subgroup by year, trends in mortality rates over time by major causes of death.
Comparison of contributions of multiple members of a category (or group)
Area charts help in showing the difference between the number of people in each department, or support tickets raised for different issuesArea charts help in showing the difference between the number of people in each department, or support tickets raised for different issues
To distinguish the relative part-to whole magnitude of a trend component
Area charts help in Finding out how many leads came from which traffic sourceArea Charts help in finding out how many leads came from which traffic source

Limitations of Area Chart

Reading exact data values from an area chart is not something easy. In charts with overlapped data plots, it is difficult to even make out where a data plot begins and ends. While by setting colors and transparency to appropriate values, the overlapped data plots can be made readable, with stacked data plots the solutions are even more limited. Area charts are also ambiguous to read when the data values are very far apart.

Area charts are only useful for comparing trends, not exact values

2. Works efficiently only for smaller number of groups

Rendering multiple categories on an area chart will make it difficult for a user to understand the data. In a chart with overlapped data plots, more the number of categories, more the overlapping, and consequently, lesser the visibility. The stacked area chart is comparatively easier to read than the overlapped one. Yet, it certainly takes considerably more effort in reading ones with many categories than it took for a chart with just two categories. For multiple categories, you might want to use the line chart instead.

Area charts dont work well for large number of groups

Best Practices for Area Charts

  • Start the y-axis at 0 to accurately reflect the proportionate difference in data.
  • Use contrasting & transparent colors to improve readability.
  • While stacking keep highly variable data on top of the chart, and low variable data at bottom
  • Use a stacked area chart if you have to display the contribution of each value to a total over time
  • However, if you have to show part to whole relationship in a case when cumulative total is unimportant, it is best to use 100% stacked area charts

Variants of Area Chart

Area with multiple series

The multi-series area chart is plotted with data values pointed as data points that are connected using line segments. The area between the line segments and the x-axis/edges of other charts is filled with color.

The multi-series area chart is plotted with data values pointed as data points that are connected using line segments

Where to use Area with multiple series?
  • Cost vs revenue magnitudes over time for a company
  • Export vs import magnitudes over time for a nation
  • Birth and death counts over time for a region

Area with scrolling

A scroll area chart is used to show the magnitude of change over a period of time. A large number of data points can be rendered on the chart owing to the scroll interactivity. The chart is rendered with data values plotted as data points that are then connected using line segments. The area between the line segments and the y-axis is filled with color. A horizontal scroll bar is rendered at the bottom of the chart to navigate through the chart.

A scroll area chart is used to show the magnitude of change over a period of time.

Where to use Area with scrolling ?
  • Count of deaths over time for a country
  • Federal Bank reserves over 5 decades
  • Volume of trade of a particular stock

Simple spline-area

A spline area chart is a specialized form of the area chart that can be used for plotting data that requires the usage of curve-fitting. Like the area chart, data values are plotted as data points. However, instead of using straight line segments to connect the data points, this chart draws a fitted curve to connect the data points.The area between the curve and the x-axis is filled with color.

A spline area chart is a specialized form of the area chart that can be used for plotting data that requires the usage of curve-fitting.

Where to use spline-area?
  • Web visits in a month
  • Sales revenue for multiple quarters
  • Forest Spread area
  • Defence expenditure
  • Volume of oil import

Spline-area with multiple series

A multi-series spline area chart is a specialized form of the multi-series area chart that can be used for plotting data for multiple categories of data that requires the usage of curve-fitting. Like the multi-series area chart, data values are plotted as data points. However, instead of using straight line segments to connect the data points, the this chart draws a fitted curve to connect the data points. The area between the curve and the x-axis is filled with color.

A multi-series spline area chart is a specialized form of the multi-series area chart that can be used for plotting data for multiple categories of data that requires the usage of curve-fitting.

Where to use spline-area with multiple series?
  • Spread of urban area and rural area
  • Spread of hot days and cold days in a region
Bubble chart
The bubble chart is used to visualize data that is defined by three numeric variables.The bubble chart is used to visualize data that is defined by three numeric variables. Typically, this chart is used to compare and depict relationships between variables for analyzing patterns and trends in data.
Candlestick chart
Candlestick chart is used for analysis of equity and commodity prices.A candlestick chart is used for analysis of equity and commodity prices.It allows showing the opening price, closing price, highest trading price, lowest trading price, and the trade volume on a single chart.
Gantt chart
The Gantt chart is used for showcasing timelines.The Gantt chart is used for showcasing timelines. It is a date/time-based chart that allows plotting tasks with their exact start and end date/time.
Heatmap chart
A heat map chart is a specialized chart that uses colors to represent data values in a table.A heat map chart is a specialized chart that uses colors to represent data values in a table. It is mostly used to plot large and complex data.
Stacked chart
Stacked charts are used to compare different data and show the composition of each item compared.Stacked charts are used to compare different data and show the composition of each item compared. These charts helps in displaying the cumulative magnitude of two or more datasets.

Line & Area charts in action

Business Dashboards

FusionCharts - Weather Dashboard
Google Analytics Dashboard

Interactive Data Stories

What is Really Warming the World: Data Story by FusionCharts
Trump compares with past presidents - Data Story by FusionCharts

Want to add interactive charts on your web or mobile app?

Fusionchart’s expansive library lets you build and use insightful & intuitive charts in minutes.

Try for free !