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!

Answer 1

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