Line Chart - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

Introduction

A line chart showing the number of donut sold in a day.

Line Chart

This chart includes:

  • 2 axis - x and y
  • Data points
  • A line which connects data points
  • An area below the line.

Steps

Preparation

  1. Create the canvas/svg.
  2. Create scales for x, y axis.
  3. Create x and y axis functions
  4. define the line function for drawing a line: d3.line()
  5. define the area function for drawing an area below the line: d3.area()

Drawing

  1. Draw the axis
  2. Draw the line (line format (dash - color - thickness - ...) is configured using css).
  3. Draw data points
  4. Draw the area below the line

Code

https://github.com/Tuong-Nguyen/Angular-D3-Cometd/tree/master/Line%20Chart