Language selection

Government of Canada / Gouvernement du Canada

Health Infobase Design Manual

  Table of contents

Table of contents


Table of contents

Line chart

A line chart is a visual representation of data that uses a series of connected data points to show the values of different data points over time.

A line chart is a visual representation of data that uses a series of connected data points to show the values of different data points over time.

On this page

When to use

  • To show the change in the value of a data point over time
  • To compare the values of different data points over time
  • To show trends or patterns in the data over time

When to use multi-line charts

  • You have multiple data points or series that you want to compare
  • You want to show the relationship between different data points or series
  • You want to show how different data points or series evolve over time

Examples

  • A line chart showing the trend of reported cases of a specific disease over time
  • A line chart showing the trend in average life expectancy in a population over time

What to avoid

  • Don’t use line charts to show data that does not have a clear numeric value
  • Don’t use bar charts to show data with different units or different scales
  • Don’t use line charts if you’re not trying to convey a trend over time

Design and code

HTML 
<!-- Add D3 library in the head section -->
<script src="https://d3js.org/d3.v7.min.js"></script>
   
<!-- Add a div in the section where you want the graph -->
<div id="lineGraph"></div>
JS 
<script>
    // dimensions and margins 
    const margin = {top: 10, right: 10, bottom: 50, left: 130},
        width = 580 - margin.left - margin.right,
        height = 520 - margin.top - margin.bottom;
    
    // append the svg
    const svg = d3.select("#lineGraph")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);
    
    d3.csv('/src/design-manual/data/en/line-graph/dummyData.csv',
    function(d){
      // date formatting
        return { date : d3.timeParse("%Y-%m-%d")(d.date), price : d.price }
      }).then(
    
      function(data) {
        // yAxis
        const y = d3.scaleLinear()
          .domain([0, d3.max(data, function(d) { return +d.price; })])
          .range([ height, 0 ]);
          
        svg.append("g")
          .call(d3.axisLeft(y).tickFormat(y => `$${y}`))
          .style("font-size","19px");
          
         // xAxis (date format)
        const x = d3.scaleTime()
          .domain(d3.extent(data, function(d) { return d.date; }))
          .range([ 0, width ]);
          
        svg.append("g")
          .attr("transform", `translate(0, ${height})`)
          .call(d3.axisBottom(x))
          .style("font-size","19px");
        // xAxis label 
        svg.append("text")
            .attr("text-anchor", "end")
            .attr("x", width/2 + margin.left - 90)
            .attr("y", height + margin.top + 40)
            .style("font-weight","bold")
            .style("font-size", "23px")
            .text("Year");
      
        // yAxis label
        svg.append("text")
            .attr("text-anchor", "end")
            .attr("transform", "rotate(-90)")
            .attr("y", -margin.left + 45)
            .attr("x", -margin.top - height/2 + 20)
             .style("font-weight","bold")
             .style("font-size", "23px")
            .text("Price");
          
        // add the main path
        svg.append("path")
          .datum(data)
          .attr("stroke", "blue")
          .attr("stroke-width", 1.2)
          .attr("fill", "none")
          .attr("d", d3.line()
            .x(function(d) { return x(d.date) })
            .y(function(d) { return y(d.price) })
            );
    })
            
</script>

Content and design guidelines

  • If you don’t start the Y axis at 0 to better show a trend, clearly indicate that the axis was cut
  • Try to limit the number of lines shown at the same time to avoid confusion
  • Use colour wisely to differentiate lines or highlight specific lines
  • Consider having the labels directly beside the lines, instead of on the axis
  • Follow the general design guidelines

Accessibility guidelines

  • Provide a data table with the graph
  • If the line chart tells a clear story, include that story in the alt text. For example, if the chart shows a clear increase or decrease over time, spell that out in the alt text
  • Follow the general accessibility guidelines
Date modified: