I'm trying to rotate the x-axis label for my bar chart since if the names are too long, the labels overlap with each other. How do I rotate it at like 65 degrees so that it looks something like this.

I am using dc/d3.js with Angular and here is my code:

    let xAxis = data.key;
    let newData: any = [];

    for (let i = 0; i < xAxis.length; i++) {
        newData.push({
            'name': xAxis[i],
            'count': data.values[i]
        })
    }

    let ndx = crossfilter(newData);

    let nameDimension = ndx.dimension(function (d: any) {
        return d.name;
    });

    let countDimension: any = ndx.dimension(function (d: any) {
        return +d.count;
    });

    let countGroup = nameDimension.group().reduceSum(function (p: any) {
        return +p.count;
    });

    barChart
        .width(525)
        .height(450)
        .transitionDuration(1000) // Animation delay
        .margins({ top: 30, right: 50, bottom: 25, left: 40 })
        .dimension(nameDimension)
        .group(countGroup)
        .x(d3.scaleOrdinal().domain(xAxis))
        .xUnits(dc.units.ordinal)
        .y(d3.scaleLinear().domain([0, countDimension.top(1)[0].count * 1.1])) // Dynamic scale is 10% larger than max range
        .elasticY(false)
        .renderHorizontalGridLines(true)
        .colorAccessor(function (d: any, i: any) {
            return d3.schemePaired[i];
        })
        .ordinalColors(d3.schemePaired)
        .renderLabel(true)
        .label(function (p: any) {
            return p.y;
        });

    dc.renderAll(group);