How to add axis labels for row chart using dc.js or d3.js

Bhatu V Pawar picture Bhatu V Pawar · Jan 14, 2014 · Viewed 7.8k times · Source

For Bar Chart and Stacked Chart, we can use .xAxisLabel("X Axis Label") and .yAxisLabel("Y Axis Label") functions to add labels for respective axis. But, Is there any way to add axis labels for Row Chart?

Answer

DJ Martin picture DJ Martin · Jan 14, 2014

Try something like this:

dc.renderAll();

function AddXAxis(chartToUpdate, displayText)
{
    chartToUpdate.svg()
                .append("text")
                .attr("class", "x-axis-label")
                .attr("text-anchor", "middle")
                .attr("x", chartToUpdate.width()/2)
                .attr("y", chartToUpdate.height()-3.5)
                .text(displayText);
}
AddXAxis(chart1, "This is the x-axis!");

Here is a jsfiddle example: http://jsfiddle.net/djmartin_umich/x5qb9/

I hope this helps! -DJ