Search⌘ K
Home
Courses
Master D3.js for Data Visualization

Adding an Axis

Explore how to add x and y axes to a D3.js line chart, including formatting tick labels and positioning axes properly. This lesson helps you understand how to visually represent time and price data, enhancing the clarity and usability of your charts.

We'll cover the following...

We are going to add an axis to the line chart. It is difficult to read the chart without understanding how the data is measured. We will add an axis for the date and price of the stock. This process should be familiar to you by now. Try tackling this problem as an exercise. Continue reading for the solution.

Solution

If you were able to draw an axis, then congrats. If not, we will tackle this exercise together. We will be working at the bottom of the draw() function.

Javascript (babel-node)
// Axis
const yAxis = d3.axisLeft(yScale)
    .tickFormat(d => `$${d}`)
ctr.append("g").call(yAxis)

We will start with a y-axis. ...