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!

Moureaux

What do you mean turn them to percentage ? Could you also post a jsFIddle ? It always helps get a quality answer. – Novara

Hi @Novara The percentage is too much. Now I'm ok with just the a-axis domains removed and solved :-) – Moureaux

Answer 1

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

Moureaux

@ManojG Yea~ Hope it helps~ And just found out that we have same interests like R and Visualisation with D3 :-) – Moureaux

Ha yes. It helped me. And yes I'm interested in R for Data Science and D3 Visualizations. Glad to see interests same :-) – Paddle

Answer 2

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

Epp

Answer 3

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.

Prologue

Woo, this is how you do it. I was trying to figure this out myself yesterday, and was trying to use a scale in the .x() configuration method, but nothing was changing. – Octosyllable

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

Tadashi

Answer 5

You can try

toneChart.xAxis().ticks(0)

and in your CSS (erase the axis)

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

Oxalis

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

Novara

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';
        }
    }

Savil