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);