I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error


I am making a bar chart with the years on the X axis. Currently trying to remove the commas using, tickFormat() but it throws an error.

Uncaught (in promise) TypeError: svg.append(...).attr(...).attr(...).classed(...).call(...).tickFormat is not a function at

Does anyone know what is wrong? My code:

let dataNumsOnly = [];
let labels = [];

fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
    .then(response => response.json())
    .then(data => {
        let dataForChart = data;
        dataForChart = dataForChart.data;
        for (let i = 0; i < dataForChart.length; i++) { //grabs data and labels.
            dataNumsOnly.push(dataForChart[i][1]);
            labels.push(dataForChart[i][0]);
        }

    let svg = d3.select('body')
    .append('svg')
    .attr('width', 1060.4)
    .attr('height', 690);

    const xScale = d3.scaleLinear()
    .domain([1947, 2015])
    .range([0, 961]);

    svg.append('g')
    .attr('transform', 'translate(50, 638)')
    .attr('id', 'x-axis')
    .classed('tick', true)
    .call(d3.axisBottom(xScale))
    .tickFormat(d3.format("d"))
    });

Source: JavaSript – Stack Overflow

November 19, 2021
Category : News
Tags: charts | D3.js | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.