Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide dc.js chart x-axis

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?

hide dc.js chart x-axis

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!

like image 508
Kai Feng Chew Avatar asked Apr 12 '14 12:04

Kai Feng Chew


4 Answers

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; }
like image 154
RRothfeld Avatar answered Nov 20 '22 05:11

RRothfeld


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.

like image 42
Bernard Hymmen Avatar answered Nov 20 '22 05:11

Bernard Hymmen


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

enter image description here

like image 5
Kai Feng Chew Avatar answered Nov 20 '22 05:11

Kai Feng Chew


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());
        }
  1. Now you can remove the y-axis in your charts by simply adding .showYAxis(false).
like image 2
verse Avatar answered Nov 20 '22 05:11

verse