Clever Geek Handbook

C3js: How to hide ticks along the Y axis? Y-Axis shortcut disabled

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

I am currently achieving it by editing tick.format

as seen from this JSFiddle http://jsfiddle.net/DanielApt/bq17Lp02/1/

I am not happy with this solution as the y-axis label is truncated

Screenshot showing the y-axis label is being cut off

So how can I hide the ticks without clipping the y-axis label?

Thanks for your help in advance!

+3


source to share


3 answers


In the end, I used a combination of Chetan and 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 a solution in action.

+1


source


1) Try setting axis.y.tick.count to 1 so that no ticks are shown other than the top and bottom.

2) Or try CSS to go through all intermediate ticks except top and bottom, e.g .: -

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

If placing the axis label is an issue, try positioning it somewhere else: -



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/

Link url: http://c3js.org/samples/axes_label_position.html

+9


source


In case anyone still needs it, I put it in an onrendered callback to not affect all charts:

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


source






More articles:


All Articles