C3js: How to hide ticks on y-axis? Y-Axis label is cut off

Question

How can I hide the ticks on the y-axis?

I currently achieve it by editing tick.format, as can be seen in this JSFiddle http://jsfiddle.net/DanielApt/bq17Lp02/1/

I'm not happy with this solution, as the y-axis label is being cut off

So how can I hide ticks without having y-axis label being cut off?

Thank you for your help in advance!

Fari

Answer 1

In the end I used a combination of Chetan's answer and some further work:

I hid the ticks with:

.c3-axis-y .tick {
   display: none;
}

And I set the tick format:

axis.y.tick.format = function(){return 'fy'; }
//return characters with both ascenders and descenders

See this JS Fiddle http://jsfiddle.net/DanielApt/etuwo8mz/1/ for the solution in action.

Fari

You can also do it in the method: ` onrendered: function() { d3.selectAll(".c3-axis.c3-axis-y .tick") .style("fill", "none"); } ` – Pyroligneous

Answer 2

1) Try setting axis.y.tick.count to 1, so that no ticks are shown except top, and bottom most.

2) Or try CSS to get ride of all intermediate ticks except top and bottom one like:-

.c3-axis-y .tick {
   display: none;
}

If axis label positioning is an issue try to position it somewhere else like:-

axis: {
    x: {
        label: {
            text: 'X Label',
            position: 'outer-center'
            // inner-right : default
            // inner-center
            // inner-left
            // outer-right
            // outer-center
            // outer-left
        }
    },

Here is the working code:- http://jsfiddle.net/chetanbh/24jkmvL5/

Reference Url : http://c3js.org/samples/axes_label_position.html

Grimace

Answer 3

In case someone still needs it, I put it in onrendered callback to avoid affecting all charts:

onrendered: function() {
      d3.select("#myChartContainer").selectAll(".c3-axis-x .tick line").style("display", "none");
}

Anisotropic