Hide dc.js chart x-axis

Question

As the image below, the x-axis is very messy due to big range of data. I wish to remove the x-axis, any luck?

my current code:

toneChart.width(300).height(280)
    .dimension(tone)
    .group(toneGroup)
    .title(function (d) { return ""; })
    .ordering(function(d) { return - d.value })
    .cap(10)
    .transitionDuration(750)
    .renderLabel(true)
    .colors(d3.scale.category10())
    .elasticX(true);

Thanks!

Answer 1

Via CSS one can hide the axes and text.

Remove row chart's x-axis

Add the following to your CSS (replacing the #ID with yours):

#your-row-chart svg g g.axis.x { display: none; }

Remove bar chart's y-axis

Add the following to your CSS (replacing the #ID with yours):

#your-bar-chart svg g g.axis.y { display: none; }

Answer 2

You can control the formatting of the values on the X-axis through the .xAxis().tickFormat() method, which comes from D3.

// To format as a percent
chart.xAxis().tickFormat(function(v) { return 100 * v/yourDenominator + "%"; });

// To blank the the values entirely, though not the actual ticks marks themselves 
chart.xAxis().tickFormat(function(v) { return ""; });

Here's a link to the documentation

https://github.com/dc-js/dc.js/blob/master/web/docs/api-1.6.0.md#xaxisxaxis

I've found it best to do this kind of thing outside of the traditional stack of configuration methods because if you include .xAxis().tickFormat() in with everything else then the next method in the stack will, of course, be associated with the D3 object emitted by the .tickFormat() call, which can result in maddening errors.

Answer 3

Funny! I just solved it!

Tips: adjust the chart margins. Dirty but working fine for me :-P

.margins({top: 0, right: 0, bottom: -1, left: 0})

Answer 4

I had the same question for y-axis, and here's one way to do it in the library itself:

1. After the line var _yElasticity = false; add:

     var _yVisibility = true;
   

2. After the declaration of _chart.elasticY = function (_) { ... } define a new function .showYAxis([boolean]) by adding:

   /**
   #### .showYAxis([boolean])
   Turn on/off y axis.
   **/
   _chart.showYAxis = function (_) {
       if (!arguments.length) {
           return _yVisibility;
       }
       _yVisibility = _;
       return _chart;
   };
   

3. Change the condition that determines when the y-axis is rendered from

       if (_chart.elasticY() || render) {
           _chart.renderYAxis(_chart.g());
       }
   

to

        if ((_chart.elasticY() || render) && (_chart.showYAxis()) ) {
            _chart.renderYAxis(_chart.g());
        }

4. Now you can remove the y-axis in your charts by simply adding .showYAxis(false).

Answer 5

You can try

toneChart.xAxis().ticks(0)

and in your CSS (erase the axis)

.toneChart .axis path, .axis line{
stroke: none;
}

Answer 6

Based on @VictorCortes answer, this strikes me as the simplest way to do it. No CSS, no modification of the library.

Using xAxis or yAxis depending on your chart type :

toneChart.yAxis().tickFormat(function(v) {return "";});
toneChart.yAxis().ticks(0);

Answer 7

This is a working TypeScript solution.It searches for 'axis x' class list and hide the xAxis element.

public checkXAxisVisibility() {
        const elements = document.getElementsByClassName('axis x');
        if (elements && elements.length > 0) {
            const xAxis = elements[0] as HTMLElement;
            xAxis.style.display = this.chartHasData ? 'block ' : 'none';
        }
    }